Ubuntu服务器React应用Nginx配置问题：静态资源404

问题根源 #

你的React构建资源使用相对路径./assets，当页面访问路径为ahammed.online/pdfManager时，浏览器会将资源请求指向ahammed.online/assets/xxx，但实际资源存放在/var/www/ahammed.online/html/pdf-manager/dist/assets/，导致Nginx无法匹配到文件返回404。

以下是两种可行的解决方案：

方案1：修改React项目的publicPath（推荐） #

通过修改React构建配置，让资源自动带上子路径前缀，从根源解决路径问题：

• 如果是Create React App项目，在package.json中添加：

  "homepage": "/pdfManager"
  

• 如果是Vite项目，在vite.config.js中配置：

  export default defineConfig({
    base: '/pdfManager/'
  })
  

• 重新构建项目，将新的dist文件替换到服务器对应目录。
• 此时你现有的Nginx配置无需修改，资源会自动请求ahammed.online/pdfManager/assets/xxx，与实际文件路径匹配。

方案2：调整Nginx配置（无需重新构建） #

如果不想重新构建React项目，可以通过嵌套location规则，单独匹配/pdfManager下的静态资源请求：

修改你的Nginx配置文件/etc/nginx/sites-available/ahammed.online为：

server{
    root /var/www/ahammed.online/html;
    index index.html index.htm index.nginx-debian.html;

    # 处理/pdfManager页面路由
    location /pdfManager {
        alias /var/www/ahammed.online/html/pdf-manager/dist/;
        try_files $uri $uri/ @pdfManager_fallback;
    }

    # 处理React单页路由刷新404问题
    location @pdfManager_fallback {
        rewrite ^/pdfManager/(.*)$ /pdfManager/index.html last;
    }

    # 专门匹配/pdfManager下的静态资源请求
    location /pdfManager/assets {
        alias /var/www/ahammed.online/html/pdf-manager/dist/assets/;
        expires 30d; # 可选，设置静态资源缓存优化加载速度
    }
}

配置修改后执行以下命令生效：

1. 检查配置语法：sudo nginx -t
2. 重启Nginx：sudo systemctl reload nginx

内容的提问来源于stack exchange，提问作者Ahammed Zulaikh