Docker化React App搭配Nodemon监听文件变更失效问题

核心原因 #

Windows文件系统与Linux容器的inotify机制不兼容，Docker在Windows下通过Hyper-V或WSL1共享文件时，容器无法接收本地文件的变更通知；而Mac系统的文件共享机制能正常适配inotify，因此无问题。

可行解决方案 #

1. 切换到WSL2后端并将代码放在WSL2文件系统中

这是最彻底的解决方案，WSL2的文件系统与Linux容器原生兼容，inotify通知可正常传递：

• 打开Docker Desktop设置，确保General标签下勾选"Use the WSL 2 based engine"
• 将React项目移动到WSL2的用户目录下（例如~/projects/my-react-app，通过wsl命令进入WSL终端操作）
• 重新执行initialise.bat构建镜像，启动容器时挂载WSL2内的项目目录（而非Windows本地目录）

2. 强制Nodemon使用轮询模式

绕过inotify机制，让Nodemon定期主动检查文件变化：

• 修改package.json中的启动脚本，添加--poll参数：

  "scripts": {
    "start": "nodemon --watch src/App.js --poll 1000 src/App.js"
  }
  

• 或创建nodemon.json配置文件，统一设置轮询规则：

  {
    "watch": ["src/App.js"],
    "polling": true,
    "pollInterval": 1000
  }
  

  （pollInterval单位为毫秒，可根据需求调整）

3. 检查Docker挂载配置与权限

• 确保容器启动时的目录挂载路径正确，Windows下建议使用WSL风格路径（例如-v /mnt/c/Users/xxx/my-react-app/src:/app/src）或正斜杠路径
• 构建镜像时，给容器内的项目目录设置正确权限：

  RUN mkdir -p /app/src && chmod -R 755 /app/src
  

• 启动容器时添加--no-cache参数，避免构建缓存导致变更未同步：

  docker build --no-cache -t my-react-app .
  

4. 替换为更兼容的文件监听工具

如果Nodemon的轮询仍不稳定，可尝试chokidar-cli，它对跨平台文件监听支持更好：

• 安装依赖：

  npm install chokidar-cli --save-dev
  

• 修改启动脚本：

  "scripts": {
    "start": "chokidar 'src/App.js' -c 'node src/App.js' --polling"
  }
  

额外排查点 #

• 检查Windows防火墙或杀毒软件，是否拦截了Docker的文件共享通信，可临时关闭测试
• 确保Docker Desktop的Resources > File Sharing中，已勾选项目所在的驱动器（例如C盘）

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