Docker Compose+Nginx代理React与Node.js服务路由故障排查

你的问题出在React单页应用的子路径适配和Nginx代理路径传递两个核心点上：React默认基于根路径/构建，直接通过/signup/或/background/访问时，静态资源路径和前端路由都会出现匹配错误，同时代理Nginx的路径转发规则也没有正确处理前缀。

以下是分步解决方法：

1. 调整React应用的构建配置 #

修改React项目的构建参数，让静态资源路径自动带上子路由前缀：

• Create React App项目：在项目根目录的package.json中添加homepage字段

  // frontend项目
  {
    "homepage": "/signup"
  }
  
  // background项目
  {
    "homepage": "/background"
  }
  

• Vite项目：修改vite.config.js中的base配置

  // frontend项目
  export default defineConfig({
    base: '/signup/'
  })
  
  // background项目
  export default defineConfig({
    base: '/background/'
  })
  

2. 适配React前端路由 #

如果使用React Router，需要为路由添加basename属性，确保前端路由匹配子路径：

// frontend应用路由
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/signup">
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

// background应用路由
function App() {
  return (
    <BrowserRouter basename="/background">
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

3. 修改代理Nginx的配置（docker-compose使用的nginx.conf） #

修正路径转发规则，确保请求前缀被正确剥离后传递给React容器，同时添加必要的请求头：

upstream frontend {
    server frontend:3000;
}

upstream backend {
    server backend:8000;
}

upstream background {
    server background:3000;
}

server {
    listen 80;

    # 处理frontend子路由
    location /signup {
        rewrite ^/signup(.*)$ $1 break;
        proxy_pass http://frontend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 处理background子路由
    location /background {
        rewrite ^/background(.*)$ $1 break;
        proxy_pass http://background;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 后端API配置保持不变
    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4. 重新构建并启动服务 #

• 重新构建两个React应用的Docker镜像：

  # 构建frontend镜像
  docker build -t signup:frontend ./你的frontend项目目录
  
  # 构建background镜像
  docker build -t background ./你的background项目目录
  

• 重启Docker Compose服务：

  docker-compose down
  docker-compose up -d
  

完成以上步骤后，即可通过localhost/signup/访问frontend、localhost/background/访问background，localhost/api/访问后端服务。

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