Nginx proxy_pass代理React应用容器失效问题求助

核心问题分析 #

你的问题出在Nginx代理路径与React Router路由的匹配逻辑不兼容，加上proxy_pass的路径处理规则导致两种配置都无法正常工作：

• 加/时：Nginx会把/production后的路径直接拼到http://react-production:3000/后面，但React应用的资源路径（如js、css）会以根路径加载，导致404，页面空白。
• 不加/时：Nginx会把完整的/production路径转发给React应用，但React Router没有匹配/production的路由规则，返回404页面。

分步解决方案 #

1. 修正Nginx的default.conf配置 #

需要同时做路径重写和代理，确保转发给React应用的是去掉/production前缀的路径，同时正确处理资源请求：

location /production {
    # 转发前去掉/production前缀
    rewrite ^/production(.*)$ $1 break;
    proxy_pass http://react-production:3000;
    # 传递必要的请求头，确保React应用能正确识别请求
    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;
}

2. 配置React项目的路由与打包路径 #

（1）设置React Router的basename

在React Router的根路由配置中，添加basename="/production"，确保所有路由都基于这个前缀：

// 示例：使用BrowserRouter的情况
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/production">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

（2）确认package.json的homepage配置

确保homepage字段设置为"/production"，这样打包时生成的资源路径会自动带上这个前缀：

{
  "name": "your-react-app",
  "homepage": "/production",
  // 其他配置...
}

3. 确保React容器的服务支持SPA路由 #

如果你的React容器是用serve命令运行打包后的静态文件，需要加上-s参数（单页应用模式），让它在路由不存在时返回index.html：

# 比如Dockerfile里的CMD
CMD ["serve", "-s", "build", "-l", "3000"]

如果是用Nginx托管React静态文件（在React容器内），需要在容器内的Nginx配置中添加SPA路由规则：

location / {
    try_files $uri $uri/ /index.html;
}

验证步骤 #

• 重新打包React应用，更新容器镜像或重新部署React容器。
• 重启Nginx容器，加载新的default.conf配置。
• 访问http://your-nginx-domain/production，检查页面和路由是否正常跳转。

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