Nginx部署两个React项目遇静态文件404问题求助

1. 静态资源路径不匹配：React项目默认打包后，静态资源（JS、CSS、图片等）的引用路径是根路径/。比如admin项目的JS会请求/static/js/main.xxx.js，但Nginx接收到这个请求时，会去根目录找资源，而非admin的build目录，导致404。第二种配置中，根路径的location指向frontend的build目录，所以/admin的静态资源请求会被转发到frontend目录，自然找不到对应文件。
2. 缺少单页路由 fallback 处理：React是单页应用，直接访问/admin下的子路由（如/admin/dashboard）时，Nginx会尝试查找对应的物理文件，找不到就返回404，需要配置让Nginx返回index.html交给React路由处理。

第一步：修改React项目的静态资源前缀 #

打包前给两个项目配置子路径前缀，确保静态资源请求路径正确：

• admin项目：
  • 若使用Create React App，在package.json中添加"homepage": "/admin"；
  • 若使用Vite，在vite.config.js中配置base: '/admin'；
    执行npm run build重新打包。
• frontend项目：
  • 同理，添加"homepage": "/main"（或Vite配置base: '/main'），重新打包。

第二步：修改Nginx配置 #

使用以下配置，确保每个子路径的资源和路由都能正确匹配：

server {
    listen 80;
    server_name example.com;

    # 处理admin项目的资源和路由
    location /admin {
        alias /home/ubuntu/dwq/admin/build;
        # 优先查找对应文件，找不到则返回admin的index.html处理路由
        try_files $uri $uri/ /admin/index.html;
    }

    # 处理main项目的资源和路由
    location /main {
        alias /home/ubuntu/dwq/frontend/build;
        try_files $uri $uri/ /main/index.html;
    }

    # API代理
    location /api/ {
        proxy_pass http://localhost:8000/api/;
        # 传递主机和真实IP信息给后端服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

可选：不修改React项目的替代方案 #

如果不想修改React项目配置，可以通过Nginx路径重写适配：

server {
    listen 80;
    server_name example.com;

    location /admin {
        alias /home/ubuntu/dwq/admin/build;
        try_files $uri $uri/ /admin/index.html;
    }

    # 单独匹配静态资源请求，根据来源转发到对应目录
    location /static {
        if ($request_uri ~* ^/admin/static/) {
            alias /home/ubuntu/dwq/admin/build/static;
            break;
        }
        alias /home/ubuntu/dwq/frontend/build/static;
    }

    # 处理其他根路径资源（如favicon.ico）
    location = /favicon.ico {
        if ($request_uri ~* ^/admin/favicon.ico) {
            alias /home/ubuntu/dwq/admin/build/favicon.ico;
            break;
        }
        alias /home/ubuntu/dwq/frontend/build/favicon.ico;
    }

    location /main {
        alias /home/ubuntu/dwq/frontend/build;
        try_files $uri $uri/ /main/index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

这种方式需要逐个处理所有可能的资源路径，不如修改React项目配置优雅，优先推荐第一种方案。

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