Docker Compose部署NGINX反向代理多站点时admin路径访问空白问题

问题核心原因 #

你遇到的问题是子路径部署前端应用的两个典型配置遗漏：

1. 现有Nginx配置会将/admin前缀一并转发给admin服务，而admin应用默认部署在根路径下，无法识别带/admin前缀的请求路径
2. React应用默认静态资源引用路径为根路径/static/*，访问/admin页面时加载的静态资源会被location /规则转发给client服务，返回的资源与admin应用不匹配导致白屏

解决方案 #

1. 修改Nginx配置 #

更新default.conf中的/admin匹配规则，优先匹配/admin路径且转发时自动去除前缀：

# 替换原有location /admin块
location ^~ /admin {
    rewrite ^/admin(/.*)$ $1 break;
    proxy_pass http://admin:3001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

^~修饰符保证该前缀匹配优先级高于后续正则规则，避免静态资源请求被其他规则拦截。

2. 修改Admin端React应用配置 #

需要给admin应用指定子路径基准，避免静态资源和路由冲突：

• 如果是Create React App创建的项目，在package.json中添加配置项：

  "homepage": "/admin"
  

• 如果使用react-router，给路由根组件添加basename属性：

  <BrowserRouter basename="/admin">
    {/* 原有路由配置 */}
  </BrowserRouter>
  

修改完成后重新构建admin镜像、重启所有容器即可生效。

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