Docker环境下React+Nginx热重载失效及子路径访问配置问题

一、修复React代码修改无热重载问题 #

当前你的Dockerfile采用多阶段构建直接打包生产产物，这种方式不适合开发阶段的热重载需求。开发阶段需改用Node.js开发容器，挂载本地代码并启用React官方的热重载服务：

1. 调整docker-compose.yml中React服务配置 #

替换原有phirater-frontend服务配置为开发环境版本：

services:
  # 其他服务（Laravel、主Nginx）保持不变
  phirater-frontend:
    image: node:16-alpine
    working_dir: /app
    volumes:
      # 挂载本地React代码目录到容器内（替换为你的实际路径）
      - ./phirater-frontend:/app
      # 保留容器内node_modules，避免本地依赖覆盖导致兼容性问题
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      # 开启文件轮询，解决容器内文件变更监听失效问题
      - CHOKIDAR_USEPOLLING=true
      # 允许外部访问开发服务器
      - HOST=0.0.0.0
      # 设置子路径前缀，确保资源加载路径正确
      - PUBLIC_URL=/react
    command: npm start

2. 确认React项目配置 #

• 若使用create-react-app，无需额外修改配置，PUBLIC_URL环境变量会自动处理子路径的资源引用
• 若使用自定义Webpack配置，需确保devServer.publicPath设为/react，并开启热重载插件

二、主应用根路径+React子路径部署最佳实践 #

1. 开发环境配置 #

主Nginx代理配置

修改主Nginx的/react路径代理规则，指向React开发服务器：

location /react {
    proxy_pass http://phirater-frontend:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    # 转发路径时去除/react前缀，避免React开发服务器收到错误路径
    rewrite ^/react/(.*)$ /$1 break;
}

React路由配置

保持你已设置的Router basename：

// App.js
<Router basename="/react">
  // 路由内容
</Router>

2. 生产环境配置 #

React项目打包配置

在React项目的package.json中添加homepage字段，确保打包后资源路径自动适配子路径：

{
  "homepage": "/react"
}

多阶段Dockerfile优化（保持原有结构，适配子路径）

# 构建阶段
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
# 使用package.json中的homepage配置自动处理路径
RUN npm run build

# 部署阶段
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
# 替换Nginx配置，处理单页应用路由刷新问题
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

React应用的Nginx配置（处理单页路由）

# nginx.conf
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        # 刷新时重定向到index.html，解决单页应用404问题
        try_files $uri $uri/ /index.html;
    }
}

主Nginx生产环境代理配置

location /react {
    proxy_pass http://phirater-frontend;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    # 处理React路由刷新，将所有/react下的路径转发到React的index.html
    try_files $uri $uri/ /react/index.html;
}

3. 目录结构建议 #

确保项目目录清晰，便于Docker挂载和维护：

project-root/
├── laravel-app/          # Laravel主应用
├── phirater-frontend/    # React前端项目
│   ├── src/
│   ├── package.json
│   └── nginx.conf
└── docker-compose.yml

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