如何配置Nginx实现两个React+Express应用的子路径代理

问题分析与修复方案 #

你的问题核心在于React应用的静态资源路径、路由配置，以及Nginx反向代理的路径传递规则不匹配，导致页面空白。以下是分步解决方法：

1. 修正React应用的基础路径配置 #

React默认以根路径/打包，部署在/app1这类子路径时，静态资源（JS/CSS/图片）会请求根路径资源，导致404。需要修改两个React项目的配置：

• 在每个项目的package.json中添加：

  "homepage": "/app1"  // app2对应改为"/app2"
  

• 如果使用React Router，需设置路由的basename属性：

  <BrowserRouter basename="/app1">
    {/* 你的路由组件 */}
  </BrowserRouter>
  

• 重新打包React应用，替换Express服务对应的静态资源目录文件。

2. 调整Nginx反向代理配置 #

当前proxy_pass未加尾斜杠，会把/app1完整传递给后端服务，而Express默认处理根路径请求。修改配置如下：

server {
    listen 80;
    server_name sub.domain.com;

    # 处理/app1路径，加尾斜杠将/app1/*映射到localhost:2000/*
    location /app1/ {
        proxy_pass http://localhost:2000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }

    # 处理/app2路径，同理
    location /app2/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }

    # 可选：重定向不带尾斜杠的请求，避免路径不一致
    location = /app1 {
        return 301 /app1/;
    }

    location = /app2 {
        return 301 /app2/;
    }
}

3. 确保Express服务适配路径 #

如果Express是托管React静态文件，需确保路由fallback正确：

• 若Nginx已将子路径转成根路径传递，Express可保持默认配置：

  const path = require('path');
  app.use(express.static(path.join(__dirname, 'build')));
  
  // SPA路由 fallback，处理所有路径请求
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  

验证操作 #

1. 重启Nginx：sudo systemctl restart nginx
2. 重启两个Express服务
3. 访问sub.domain.com/app1和sub.domain.com/app2，检查页面加载状态与静态资源返回码（应为200）

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