NGINX配置问题：多代理场景下无法访问dist目录的CSS/JS文件

问题描述 #

我在根目录部署了一个应用，能加载/dist目录里的index.html，但无法访问其中CSS、JS文件夹内的样式文件与app.js。尝试修改NGINX配置，但因为存在多个对应不同端口的location规则，找不到解决方法。我的NGINX配置如下：

server {

        root /var/www/krzysztofmironczuk/html;
index index.html index.htm index.nginx-debian.html;

        server_name krzysztofmironczuk.me www.krzysztofmironczuk.me;

        location /magicbellows {
                proxy_pass http://localhost:3000/;
        }

        location /musicfestival {
                proxy_pass http://localhost:4000/;
        }
        
        location /navalnoticeboard {
                proxy_pass http://localhost:5000/;
        }

        location /musicapp {
                proxy_pass http://localhost:6000/;
        }

        location /pizzeria {
                proxy_pass http://localhost:7000/; //* this location
                                
        }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/krzysztofmironczuk.me/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/krzysztofmironczuk.me/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = www.krzysztofmironczuk.me) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = krzysztofmironczuk.me) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name krzysztofmironczuk.me www.krzysztofmironczuk.me;
    return 404; # managed by Certbot

}

解决方案 #

问题核心出在/pizzeria的location配置上，根据你的应用类型，选择对应的修复方案：

方案1：应用为纯静态前端（如Vue/React打包产物） #

如果你的应用是打包后的静态文件，无需反向代理到后端端口，直接修改location /pizzeria指向静态资源目录：

location /pizzeria {
    root /var/www/krzysztofmironczuk/html;
    try_files $uri $uri/ /pizzeria/dist/index.html;

    # 单独处理静态资源，确保路径正确
    location ~* \.(css|js|png|jpg|svg)$ {
        root /var/www/krzysztofmironczuk/html/pizzeria/dist;
        expires 30d; # 启用缓存优化加载速度
    }
}

注意：确认你的dist目录实际路径为/var/www/krzysztofmironczuk/html/pizzeria/dist，如果路径不同，调整root值到正确位置。

方案2：应用需要反向代理到后端服务（7000端口） #

如果后端服务（localhost:7000）负责提供静态资源，当前配置的斜杠会导致路径前缀丢失，修改如下：

location /pizzeria {
    proxy_pass http://localhost:7000; # 去掉末尾斜杠，保留完整请求路径
    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;
}

同时确保后端服务已配置正确处理/pizzeria前缀的静态资源请求。

必要检查步骤 #

• 修复文件权限：执行chmod -R 755 /var/www/krzysztofmironczuk/html/pizzeria/dist，确保NGINX有读取权限
• 清除浏览器缓存，避免旧路径缓存干扰
• 重启NGINX生效配置：sudo systemctl restart nginx

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