如何配置Docker运行React应用并在浏览器正常访问

三个配置错误会导致你现在的问题，按顺序修改即可：

• 错误1：docker-compose.yml中配置的command: bash会覆盖Dockerfile里定义的npm start启动命令，容器启动后不会自动跑前端服务；同时image: node:16配置无意义，还会干扰自定义镜像的构建逻辑，直接删掉这两行即可。
• 错误2：Create React App生成的项目默认启动的开发服务仅监听容器内部的127.0.0.1回环地址，宿主机通过端口映射发过来的请求根本进不去服务，必须显式指定服务监听0.0.0.0地址。
• 错误3：挂载本地目录到容器时，文件监听默认不生效，容易导致服务启动异常或者热更新失效，需要加对应环境变量兼容。

修改后的配置参考 #

docker-compose.yml #

version: "3"
services:
  node:
    build: .
    container_name: myapp
    tty: true
    stdin_open: true
    restart: always
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - 3000:3000
    environment:
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true

Dockerfile（原有配置不需要改动，保持即可） #

FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]

重启生效步骤 #

改完配置后执行以下命令清理旧的错误容器，重新构建启动：

docker compose down
docker compose up -d --build

验证方式 #

启动后等10-20秒，执行docker logs myapp看日志，出现类似Compiled successfully!、You can now view app in the browser的提示，且显示监听地址为0.0.0.0:3000时，直接在浏览器访问http://localhost:3000即可正常打开页面。

补充说明：如果是在远程服务器、WSL2环境中运行Docker，不要直接访问0.0.0.0，替换为对应环境的实际IP+3000端口即可访问。

内容的提问来源于stack exchange，提问作者nntk