Docker部署React镜像热重载失效问题求助

问题根源 #

你的React服务配置里，没有挂载本地项目源码到容器内，导致本地修改的代码根本同步不到容器里，热重载自然检测不到文件变化。另外之前尝试的CHOKIDAR_USEPOLLING=true也没在容器环境里配置生效。

具体修复步骤 #

1. 更新docker-compose.yaml的React服务配置 #

添加源码挂载和热重载所需的环境变量：

react:
  container_name: react
  build:
    context: ./../frontend
  ports:
    - '3001:3000'
  environment:
    - CHOKIDAR_USEPOLLING=true
    - WATCHPACK_POLLING=true
  volumes:
    - ./../frontend:/home/app  # 把本地前端代码映射到容器内工作目录
    - node_modules:/home/app/node_modules  # 保留node_modules独立卷，避免本地依赖覆盖容器内的
  stdin_open: true  # 防止React开发服务启动后容器自动退出

2. 优化React项目Dockerfile（可选） #

提前注入热重载环境变量，同时使用轻量镜像：

FROM node:18-alpine

RUN mkdir -p /home/app
WORKDIR /home/app

COPY package*.json ./
RUN npm install

COPY . .

# 配置热重载环境变量
ENV CHOKIDAR_USEPOLLING=true
ENV WATCHPACK_POLLING=true

CMD ["npm", "start"]

3. 确认package.json配置 #

保证scripts里的start命令是"react-scripts start"，无需强制降级react-scripts@5.0.1，配合上述配置即可正常工作。

修复逻辑 #

• 挂载本地源码到容器，让React服务能实时读取本地文件修改
• 开启轮询模式（CHOKIDAR_USEPOLLING/WATCHPACK_POLLING），解决Docker容器内文件系统监听不灵敏的问题
• 开启stdin_open避免容器意外退出，保证开发服务持续运行

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