容器化前端项目代码修改后无法自动刷新问题求助

以下是针对你的问题的具体排查方向，结合你提供的配置逐一验证：

1. 修正Webpack Dev Server（WDS）的Socket代理配置 #

你的.env设置了WDS_SOCKET_PORT=0，会让WDS随机分配socket端口，但React Scripts 5.x默认使用sockjs-node作为socket路径，而非你Nginx配置中的/ws，这会导致socket连接失败，热更新无法触发：

• 修改Nginx的WebSocket代理规则，将原location /ws替换为：

  location /sockjs-node {
      proxy_pass http://client;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
  }
  

• 在.env中补充WDS_SOCKET_PATH=/sockjs-node，确保WDS使用的socket路径与Nginx代理一致。

2. 优化CHOKIDAR文件监听配置 #

虽然你设置了CHOKIDAR_USEPOLLING=true，但可能需要调整参数确保文件变化被检测到：

• 在.env中添加CHOKIDAR_INTERVAL=1000（单位毫秒），提高轮询频率；
• 进入client容器执行npm start，观察日志是否有File watching enabled提示；若出现Error: ENOSPC: System limit for number of file watchers reached，在宿主机执行以下命令调整文件监听限制：

  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  

3. 检查容器内React启动日志与运行状态 #

• 进入client容器：docker-compose exec client bash；
• 查看npm start的输出日志，重点关注：
  • 是否有热更新相关错误（如socket连接失败、文件监听失败）；
  • 修改代码后是否触发Compiling...的日志输出；
• 执行ls /app/node_modules，确认匿名卷挂载的依赖未被宿主机文件覆盖，依赖包完整。

4. 验证Nginx与Client容器的网络连通性 #

• 进入nginx容器：docker-compose exec nginx bash；
• 执行curl client:3000，确认能正常返回React页面内容；
• 安装wscat后执行wscat -c ws://client:3000/sockjs-node/info，验证WebSocket连接能正常建立。

5. 排查文件权限问题 #

• 进入client容器执行ls -l /app，确认挂载的宿主机文件/目录所有者与容器内运行Node的用户一致；
• 若权限不匹配，可在Dockerfile中添加USER指令指定运行用户，或在docker-compose.yml的client服务中添加user: "你的UID:GID"（替换为宿主机用户ID和组ID）。

6. 排除浏览器缓存干扰 #

• 打开浏览器开发者工具（F12），在Network标签下勾选Disable cache，强制刷新页面（Ctrl+Shift+R）；
• 查看资源的Last-Modified或ETag字段，确认请求的是最新版本。

7. 检查Client容器的Dockerfile配置 #

确保你的client Dockerfile包含以下关键配置：

FROM node:16-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

ENV NODE_ENV=development
EXPOSE 3000

CMD ["npm", "start"]

重点确认：

• 设置了NODE_ENV=development（生产环境下热更新默认关闭）；
• 启动命令为npm start而非构建命令；
• 暴露了3000端口且未修改默认启动端口。

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