Docker环境下react-scripts start未同步JS文件变更的问题

可能的原因及对应解决方案 #

1. 确认Docker卷挂载配置正确 #

Docker卷挂载是本地代码与容器内同步的核心，若配置错误，本地修改无法同步到容器内：

• 检查docker-compose.yml或docker run命令中的volumes配置，确保本地项目根目录完整挂载到容器内的项目路径，同时避免node_modules被本地目录覆盖：

  services:
    react-app:
      volumes:
        - ./:/app  # 本地当前目录挂载到容器内/app目录
        - /app/node_modules  # 保留容器内的node_modules，避免本地覆盖
  

• 确保容器内用户拥有文件读写权限，可在Dockerfile中添加权限调整：

  RUN chown -R node:node /app
  USER node
  

2. 完善热更新相关环境变量 #

仅设置CHOKIDAR_USEPOLLING=true可能不足以触发完整的热更新，需补充其他环境变量增强文件监听能力：
修改package.json中的start脚本：

"scripts": {
  "start": "CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true HOST=0.0.0.0 PORT=3000 react-scripts start"
}

• CHOKIDAR_USEPOLLING=true：强制Chokidar以轮询方式监听文件变更（Docker环境下默认的文件系统监听机制失效）
• WATCHPACK_POLLING=true：增强Webpack的文件变更检测能力
• HOST=0.0.0.0：允许容器外部访问开发服务器
• PORT=3000：指定容器内端口，需与Docker端口映射配置一致

3. 禁用反向代理的资源缓存 #

反向代理（如Nginx）可能缓存旧的bundle.js等资源，导致浏览器无法获取最新代码：
在代理配置中添加缓存禁用规则：

location /users/userid/apps/reactapp {
    proxy_pass http://react-app:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    
    # 禁用JS/CSS资源缓存
    location ~* \.(js|css)$ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        proxy_pass http://react-app:3000;
    }
}

4. 配置CRA的子路径适配 #

由于应用部署在子路径下，需设置homepage确保资源路径和热更新请求指向正确的子路径：
在package.json中添加：

"homepage": "/users/userid/apps/reactapp"

该配置会让CRA自动为生成的资源链接添加子路径前缀，避免热更新请求因路径错误失败。

5. 临时禁用Service Worker #

项目中引入的register-service-worker在开发环境可能缓存旧资源，屏蔽代码更新：
在index.tsx中注释掉Service Worker注册代码：

// import registerServiceWorker from './registerServiceWorker';
// registerServiceWorker();

或通过环境变量控制注册逻辑：

"scripts": {
  "start": "REACT_APP_DISABLE_SW=true CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true HOST=0.0.0.0 PORT=3000 react-scripts start"
}

然后在注册代码中添加判断：

import registerServiceWorker from './registerServiceWorker';

if (!process.env.REACT_APP_DISABLE_SW) {
  registerServiceWorker();
}

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