如何让Docker内的React应用在源码变更后自动重建重启？

核心前提：正确挂载本地源码目录到容器 #

这是热重载生效的基础，必须通过docker-compose.yml将本地项目的源码目录挂载到容器内对应位置，让容器能实时读取本地修改的文件。

示例配置：

version: '3.8'
services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    volumes:
      # 挂载本地src目录到容器内的项目src路径
      - ./src:/app/src
      # 匿名挂载容器内的node_modules，避免被本地目录覆盖
      - /app/node_modules
    environment:
      # 开启文件变化轮询，解决容器内文件系统监听限制
      - CHOKIDAR_USEPOLLING=true
      # 允许外部访问开发服务器的websocket
      - WDS_SOCKET_HOST=0.0.0.0

注意：/app/node_modules的匿名挂载很关键，它会保留容器内安装的依赖包，避免本地依赖与容器环境不兼容导致的异常。

修复容器内文件权限问题 #

如果挂载后仍无反应，大概率是容器内运行用户没有读取挂载文件的权限。可以在Dockerfile中配置合适的用户权限：

FROM node:18-alpine

WORKDIR /app

# 先复制依赖配置文件，利用Docker缓存优化构建速度
COPY package*.json ./
RUN npm install

# 复制项目源码
COPY . .

# 创建非root用户并切换，避免权限冲突
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
USER appuser

EXPOSE 3000

CMD ["npm", "start"]

还原开发模式启动脚本 #

不要修改package.json的start脚本为react-scripts build && react-scripts start——react-scripts start本身就是开发模式，自带实时编译和热重载，提前执行build会覆盖开发服务器的动态编译逻辑，导致源码变更无法实时生效。

常见问题排查 #

• 挂载后容器内看不到本地修改：检查docker-compose.yml的挂载路径是否匹配，本地./src和容器内/app/src的路径要完全对应。
• 热重载仍不触发：添加CHOKIDAR_INTERVAL=1000环境变量，调整轮询间隔，确保容器能检测到文件变化。
• 浏览器无更新：检查浏览器是否开启缓存，或添加WDS_SOCKET_PORT=3000环境变量，保证websocket连接正常。

日常开发流程 #

1. 首次启动执行docker compose up --build，完成镜像构建和容器启动。
2. 修改本地源码后，容器内的开发服务器会自动检测变化、重新编译，并推送更新到浏览器，无需重启容器或重建镜像。

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