Docker+PM2环境下React应用浏览器自动重载问题求助

问题背景 #

需要实现：修改React应用src/App.js文件时，Docker容器（docker-compose管理、PM2进程管理）中的应用能在http://localhost:3000自动重载。当前应用可正常启动，但修改代码后刷新页面无变化，仅重新执行docker-compose up才生效。

项目结构：

project_root/
├── app/                  # Django应用后端代码
│   ├── app/
│   │   ├── settings.py        
│   └── manage.py         
├── frontend/             # React应用前端代码
│   ├── node_modules/     
│   ├── public/            
│   ├── src/                 
│   │   ├── App.js
│   │   └── ...
│   ├── templates/            
│   ├── ecosystem.conf.js
│   ├── package-lock.json
│   ├── package.json          
│   ├── Dockerfile.frontend   
│   └── ...
├── Dockerfile          
├── docker-compose.yml      
└── ...

核心问题排查 #

• 工作目录与挂载路径不匹配：Dockerfile.frontend设置工作目录为/frontend，但docker-compose将本地./frontend挂载到/app，导致热重载监听路径与实际文件路径不一致。
• PM2配置冗余错误：React应用依赖react-scripts start启动开发服务器实现热重载，无需PM2直接监听src/App.js，当前配置属于重复启动，且PM2的监听逻辑无法触发React的热重载机制。
• 环境变量与挂载冲突：Dockerfile将node_modules移至根目录，docker-compose又挂载本地node_modules到/app/node_modules，导致依赖路径混乱；react脚本中export SET NODE_OPTIONS写法在Alpine环境无效。
• 启动命令冲突：Dockerfile的CMD与docker-compose的command重复定义，导致启动逻辑混乱。

解决方案步骤 #

1. 修正Dockerfile.frontend #

FROM node:18.3.0-alpine
WORKDIR /frontend
ENV PATH /frontend/node_modules/.bin:$PATH

COPY ./frontend/package*.json ./
RUN npm install --silent && \
    npm install react-scripts@5.0.1 -g --silent && \
    npm install pm2 -g && \
    npm install eslint babel-eslint --save-dev && \
    npm i -g concurrently && \
    npm cache clean --force

COPY ./frontend ./
EXPOSE 3000

CMD ["npm", "run", "start"]

2. 简化package.json脚本 #

移除冗余的PM2启动逻辑，修正环境变量写法：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "pm2": "5.3.0"
  },
  "devDependencies": {
    "concurrently": "8.2.0",
    "babel-eslint": "^10.1.0",
    "eslint": "8.47.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  },
  "scripts": {
    "lint": "npx eslint --fix --ext .js,.jsx .",
    "react": "NODE_OPTIONS=--openssl-legacy-provider CHOKIDAR_USEPOLLING=true react-scripts start",
    "start": "concurrently \"npm run lint\" \"npm run react\"",
    "build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
    "test": "NODE_OPTIONS=--openssl-legacy-provider react-scripts test",
    "eject": "NODE_OPTIONS=--openssl-legacy-provider react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

说明：添加了日志中提示缺失的@babel/plugin-proposal-private-property-in-object依赖，避免警告。

3. 修正docker-compose.yml挂载配置 #

保持挂载路径与容器内工作目录一致，避免依赖冲突：

version: "3.9"
services:
  app: # 省略
  db: # 省略
  frontend:
    container_name: frontend-dev
    build:
      context: . 
      dockerfile: ./frontend/Dockerfile.frontend
    restart: always
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/frontend
      - /frontend/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true
      - FAST_REFRESH=true
      - WDS_SOCKET_PORT=0
      - NODE_ENV=development
      - PORT=3000
    command: ["npm", "run", "start"]

4. 清理冗余配置（可选） #

开发环境下可删除ecosystem.config.js，React开发服务器本身具备进程管理和热重载能力；若生产环境需PM2，可单独编写生产环境启动配置。

5. 验证修复 #

执行命令重启容器：

docker-compose down
docker-compose up --build

修改src/App.js后，观察容器日志是否出现编译提示，浏览器是否自动重载页面。

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