同一域名下双React应用的Nginx配置问题：App2子页面404

核心问题分析 #

App2子页面出现404的原因有两个：

• Nginx未将所有/app2开头的请求正确转发到App2前端服务（3003端口），且未处理SPA路由的fallback逻辑
• App2的React路由未配置basename，导致子页面路径跳转异常

步骤1：修正Nginx配置 #

替换原Nginx配置文件中的对应location块，确保两个SPA应用的路由都能被正确处理：

server {
    root /var/www/mydomain.com/html;
    index index.html index.htm index.nginx-debian.html;
    server_name mydomain.com www.mydomain.com;

    # 处理App1（主页SPA）
    location / {
        # 转发到App1的pm2静态服务，利用pm2 serve --spa自带的SPA fallback逻辑
        proxy_pass http://localhost:8082;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 处理App2前端（/app2路径下的SPA）
    location /app2 {
        proxy_pass http://localhost:3003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 重写路径：将/app2/xxx转换为/xxx，适配App2的根路由配置
        rewrite ^/app2/(.*)$ /$1 break;
        # 超时配置避免请求中断
        proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;
    }

    # 处理GraphQL API
    location /graphql {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:4000/graphql;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

关键配置说明： #

• App1：直接转发到pm2托管的8082端口，pm2 serve --spa会自动处理所有子页面的路由fallback
• App2：通过rewrite规则转换路径，让App2的React路由能识别子页面路径；同时保留请求头信息确保服务端正常处理请求

步骤2：配置App2的React路由 #

在App2的前端代码中，给BrowserRouter添加basename="/app2"，确保所有路由跳转自动带上/app2前缀：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/app2">
      <Routes>
        <Route path="/" element={<App2Home />} />
        <Route path="/page1" element={<Page1 />} />
        {/* 其他子页面路由 */}
      </Routes>
    </BrowserRouter>
  );
}

步骤3：重启服务生效 #

1. 重启Nginx使配置生效：

sudo nginx -s reload

2. 若修改了App2前端代码，重启对应的pm2进程：

pm2 restart <app2-frontend-process-name>

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