Nginx服务SPA路由配置遇404错误：现有规则失效求助

嘿，我帮你捋清楚这个Nginx配置的问题——你的需求是典型的单页应用（SPA）路由+静态资源映射场景，之前的配置踩了几个常见的Nginx路径匹配坑，咱们直接上解决方案再拆解原因：

修正后的完整配置 #

server {
    listen 80;
    server_name localhost; # 替换成你的实际域名或localhost

    # 核心：将Nginx默认资源根目录指向SPA打包目录
    root /usr/app/build;

    # 处理所有/build开头的请求，映射到打包目录下的对应资源
    location /build {
        alias /usr/app/build;
        # 优先查找请求的文件/目录，不存在则返回404
        try_files $uri $uri/ =404;
        
        # 可选：给静态资源加缓存策略，优化加载速度
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 处理所有其他请求，返回SPA的index.html让前端路由接管
    location / {
        # 逻辑：先找实际存在的文件/目录，不存在则返回index.html
        try_files $uri $uri/ /index.html;
    }
}

为什么之前的配置会触发404？ #

你之前的配置有两个关键问题：

• 路径匹配逻辑错误：location / { try_files /usr/app/build/index.html =404; } 里的绝对路径会被Nginx当成「相对于默认root（通常是/usr/share/nginx/html）的路径」，实际查找的是/usr/share/nginx/html/usr/app/build/index.html，这个路径根本不存在，自然返回404。
• 缺少全局root配置：没有统一设置资源根目录，导致所有路径匹配都需要写绝对路径，容易出错。

配置细节解释 #

• root /usr/app/build：把Nginx的默认资源根目录直接指向你的SPA打包文件夹，后续所有静态资源查找都会基于这个路径，避免重复写冗长的绝对路径。
• location /build：用alias将/build开头的请求映射到/usr/app/build目录，比如请求/build/js/app.js会对应文件/usr/app/build/js/app.js；try_files确保如果请求的资源不存在，直接返回404，不会误跳转到index.html。
• location /：try_files $uri $uri/ /index.html是SPA路由的标准写法——先尝试匹配请求的实际文件/目录（比如/favicon.ico或/css/main.css），如果不存在，就返回index.html，让前端路由来处理页面跳转。

内容的提问来源于stack exchange，提问作者Kieren Johnstone