Nginx反向代理为指定静态文件添加缓存后返回404如何解决？

问题根因 #

你启用的js/css匹配location块未配置proxy_pass规则，Nginx正则匹配优先级高于普通前缀匹配，当请求命中\.(?:css|js)$规则后，会直接在服务器本地磁盘查找对应文件，而你实际的静态资源托管在端口为3000的上游服务中，本地无对应文件就会返回404。

修复方案 #

直接在被注释的location块中补全上游转发规则即可，无需嵌套到location /块内部：

# 静态资源缓存配置
location ~* \.(?:css|js)$ {
    expires 1d;  
    add_header Vary Accept-Encoding;
    add_header Cache-Control private;
    # 补全转发到上游3000服务的配置
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
}

修改配置后执行nginx -t检查语法无误，再执行nginx -s reload即可生效。

可选优化 #

如果后续你把打包后的单页应用静态资源直接存到Nginx本地目录（比如/usr/share/nginx/spa/），可以替换proxy_pass为root规则，响应性能更高：

location ~* \.(?:css|js)$ {
    root /usr/share/nginx/spa/;
    expires 1d;  
    add_header Vary Accept-Encoding;
    add_header Cache-Control private;
}

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