Nginx同域名部署多服务时React应用/panel路径资源加载失败问题

这个问题是React路径配置和Nginx转发规则不匹配导致的，按下面两步改就能解决：

1. 调整React项目配置 #

• 如果是用create-react-app搭建的项目，先在package.json中添加配置项："homepage": "/panel"
• 路由如果用的是BrowserRouter，添加basename属性：

import { BrowserRouter } from 'react-router-dom'

// 替换你原来的BrowserRouter声明
<BrowserRouter basename="/panel">
  {/* 原有路由规则不变 */}
</BrowserRouter>

改完重新打包项目，把打包后的build文件夹放到对应的服务目录。

2. 修改Nginx配置 #

根据你是直接托管静态资源还是反向代理到其他服务，二选一配置：

方案A：/panel直接对应静态资源目录

location /panel {
    alias /你的/panel项目/build目录的绝对路径;
    try_files $uri $uri/ /panel/index.html;
}

# 根路径的原有配置不用改
location / {
    alias /你的根路径项目/build目录的绝对路径;
    try_files $uri $uri/ /index.html;
}

方案B：/panel反向代理到其他后端服务

location /panel {
    # 注意末尾的斜杠必须加，作用是把请求路径里的/panel前缀去掉再转发
    proxy_pass http://你另一台服务的地址/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置改完执行nginx -t检查语法没问题后，执行nginx -s reload生效，清浏览器缓存重新访问/panel就正常了。

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