无Nginx的React Docker容器启动与实时热更新配置咨询

当前配置无法访问的核心原因有3个：

• yarn start启动的React开发服务器（基于webpack-dev-server/CRA）默认监听3000端口，你配置的端口映射是宿主机80、443端口指向容器的80、443端口，但容器内根本没有服务在这两个端口运行，自然会连接拒绝。之前Nginx镜像能正常访问，是因为Nginx本身配置了监听80、443端口。
• React开发服务器默认绑定127.0.0.1回环地址，这个地址仅容器内部可访问，宿主机和外部请求根本打不到服务上，必须绑定0.0.0.0才能接收外部请求。
• 开发环境的Dockerfile里多余执行了RUN yarn build，开发模式下yarn start会实时编译代码，提前构建完全是冗余操作，浪费镜像构建时间。

按以下步骤修改即可正常访问并启用热更新：

1. 简化开发环境用的Dockerfile，移除冗余的构建步骤：

FROM node:16-buster-slim

WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH

# 仅拷贝依赖文件安装依赖，全量代码通过volume挂载
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

CMD ["yarn", "start"]

2. 修改docker-compose配置，修正端口映射、添加必要的服务环境变量：

frontend:
    container_name: frontend
    build:
      context: ../../client/project
      dockerfile: local.dockerfile
    ports:
      # 映射宿主机端口到容器内开发服务的3000端口
      - "3000:3000"
      - "80:3000"
      # 如需启用HTTPS再添加443映射，同时在environment中打开HTTPS开关
    environment:
      # 强制开发服务监听所有网卡，允许外部访问
      - HOST=0.0.0.0
      # 自动适配websocket端口，避免热更新连接失败
      - WDS_SOCKET_PORT=0
      # Linux环境如果遇到文件变更不触发热更新，添加下面这行启用轮询监听
      # - CHOKIDAR_USEPOLLING=true
      # 需要HTTPS时取消注释
      # - HTTPS=true
    env_file:
      - ../../client/project/.env
    volumes:
      - ../../client/project:/app/
      # 匿名卷隔离容器内的node_modules，避免宿主机依赖覆盖导致兼容性问题
      - /app/node_modules
    restart: on-failure
    depends_on:
      - backend

修改完成后重新构建镜像启动容器，访问localhost:3000或localhost:80即可正常打开页面，修改本地代码后会自动触发热更新，无需手动重新构建镜像。

• 环境配置分离：生产环境继续保留原有多阶段构建+Nginx的方案，开发环境单独使用上述精简版Dockerfile和compose配置。两者目标完全不同：生产追求镜像体积小、访问性能高、稳定性强；开发追求启动快、热更新及时、调试方便，不要强行用同一份配置适配两个场景。
• 依赖层缓存优化：Dockerfile里先拷贝package.json和yarn.lock安装依赖，再挂载代码，这样只有依赖变更时才会重新执行yarn install，日常改代码重启容器不需要重新装依赖，速度快很多。
• 不要在构建阶段拷贝全量代码、执行build：开发模式下所有代码通过volume从宿主机挂载，构建阶段拷贝代码、执行build完全是无效操作，只会拖慢镜像构建速度。
• node_modules隔离保留：你当前配置的/app/node_modules匿名卷是正确配置，可以避免宿主机上不同系统编译的二进制依赖（比如node-sass之类的包）覆盖容器内安装的对应版本依赖，防止出现依赖不兼容报错。
• 端口配置对齐：如果需要修改开发服务的监听端口，通过PORT=xxxx环境变量在容器内修改，再对应调整端口映射，不要直接把宿主机端口映射到容器内未被监听的端口。
• 热更新异常适配：如果在Linux桌面环境或WSL2下遇到修改代码不自动刷新的问题，添加CHOKIDAR_USEPOLLING=true环境变量，让webpack用轮询模式监听文件变化即可解决，这是Docker下文件系统事件通知不兼容的通用解决方案。

内容的提问来源于stack exchange，提问作者Никита Петров