容器化Web应用NGINX反向代理静态资源404问题解决

问题根源 #

你的UI服务（如Nginx Proxy Manager、AKHQ）生成静态资源URL时，默认使用自身根路径（比如/css/、/ui/static/css/），但通过反向代理的子路径（如/nginxui/、/ui/）访问时，浏览器会直接向域名根路径请求这些资源，而当前Nginx配置仅代理了特定路由（如/nginxui/、/ui/login），未覆盖静态资源的请求路径，导致404错误。

修改后的Nginx配置 #

server {
    listen 443;
    server_name **NAME_HOST**;

    # 代理Nginx Proxy Manager（路径/nginxui/）
    location /nginxui/ {
        proxy_pass http://localhost:81/;
        proxy_redirect off;
        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-Proto $scheme;
    }

    # 代理AKHQ应用（路径/ui/）
    location /ui/ {
        proxy_pass http://localhost:8080/ui/;
        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-Proto $scheme;
    }
}

关键修改说明 #

• 匹配完整前缀路径：将原/ui/login改为/ui/，确保所有以该前缀开头的请求（包括静态资源）都能被代理；保留/nginxui/的前缀匹配，覆盖该路径下所有请求。
• proxy_pass末尾加斜杠：proxy_pass末尾的斜杠会让Nginx自动把代理前缀后的路径拼接到目标URL后，比如请求/nginxui/css/main.css会被转发到http://localhost:81/css/main.css，刚好匹配服务的静态资源路径。
• 移除冗余rewrite：原配置中的rewrite规则可直接删除，proxy_pass的路径映射已经能完成需求，避免规则冲突。

额外优化建议 #

如果你的UI服务支持配置base URL（比如Nginx Proxy Manager可在设置中指定根路径为/nginxui/，AKHQ可通过环境变量AKHQ_SERVER_BASE-URL=/ui/配置），建议同时修改服务的base URL，这样服务生成的静态资源URL会自动带上代理前缀，彻底避免路径匹配问题。

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