单Nginx服务器部署两个React应用：/biro-cat路径仅显背景图排查

核心问题分析 #

你遇到的情况是典型的React静态资源路径不匹配加上Nginx配置细节错误导致的：

• React默认打包后资源引用路径是根路径/，但你的第二个应用部署在/biro-cat下，浏览器会尝试从/static/js/xxx.js加载资源，而实际资源在/biro-cat/static/js/xxx.js，所以JS、CSS等核心资源加载失败，页面只剩能正常加载的背景图（大概率背景图用了相对路径或者配置正确）。
• Nginx的location /biro-cat配置没有正确匹配子路径资源，且try_files写法存在问题。

分步解决 #

1. 调整React应用的公共路径配置 #

根据你的React项目类型修改打包配置：

Create React App项目

在项目根目录创建.env.production文件，添加：

PUBLIC_URL=/biro-cat

执行npm run build重新打包，把新的build目录内容替换到/var/www/biro-cat。

Vite项目

修改vite.config.js中的base参数：

export default defineConfig({
  base: '/biro-cat/',
  // 其他原有配置
})

重新打包部署。

2. 修正Nginx配置 #

原配置存在两个关键问题：一是location匹配优先级不足，二是alias和try_files的路径拼接错误。替换为以下配置：

server {
        listen 80;
        server_name ec2-18-207-215-29.compute-1.amazonaws.com;

        location /api/ {
                include proxy_params;
                proxy_pass http://unix:/run/gunicorn.sock;
        }

        # 优先匹配biro-cat的所有子路径请求
        location ^~ /biro-cat/ {
                alias /var/www/biro-cat/;
                try_files $uri $uri/ /biro-cat/index.html;
        }

        # 根路径应用配置，修正原有的/uri笔误
        location / {
                root /var/www/take-me;
                try_files $uri $uri/ /index.html;
        }
}

配置说明：

• ^~ /biro-cat/：用^~提升匹配优先级，避免根路径的location /拦截子路径请求。
• alias /var/www/biro-cat/：末尾加斜杠确保路径拼接正确，比如请求/biro-cat/static/css/main.css会正确指向服务器上的/var/www/biro-cat/static/css/main.css。
• try_files $uri $uri/ /biro-cat/index.html：先找实际文件，找不到就跳转到该应用的index.html，支持React的单页路由。
• 根路径的try_files去掉了错误的/uri参数，恢复标准写法。

3. 验证生效 #

执行sudo systemctl restart nginx重启服务，清除浏览器缓存后访问/biro-cat，检查浏览器控制台是否还有404错误，确认静态资源加载正常。

内容的提问来源于stack exchange，提问作者Yael Ben-Yair