Ubuntu Nginx部署Angular应用：location /ss资源加载路径异常

我之前也碰到过一模一样的问题！Angular单页应用部署在Nginx子路径下时，最容易踩的就是资源路径和前端路由的坑，给你一步步解决：

1. 先修正Angular编译的基础路径 #

Angular默认编译时会把资源路径设为根目录（/），当你要部署到/ss子路径下时，必须告诉Angular资源的基础路径：

执行编译命令时加上--base-href参数：

# 生产环境编译
ng build --prod --base-href /ss/

# Angular 12+ 也可以这样写
ng build --configuration production --base-href /ss/

编译完成后，你会看到dist目录下的index.html里多了一行：

<base href="/ss/">

这会让Angular所有静态资源（JS、CSS、图片等）都从/ss/路径加载，不会再去根目录找。

2. 配置Nginx的location /ss #

接下来要让Nginx正确映射/ss路径到你的Angular静态文件，同时处理前端路由的fallback（因为Angular路由是前端路由，直接刷新子页面会404）：

场景1：直接部署静态文件（最常见） #

如果你的Angular已经编译成静态文件放在服务器上，用这个配置：

server {
    listen 81;
    server_name example.com;

    # 替换成你Angular编译后dist目录的绝对路径
    set $angular_dist /var/www/your-angular-app/dist;

    location /ss {
        # 用alias去掉/ss前缀，直接指向dist目录下的文件
        alias $angular_dist;
        
        # 优先找静态文件，找不到就转发到index.html（支持前端路由）
        try_files $uri $uri/ /ss/index.html;

        # 保留你原来需要的请求头（如果有的话）
        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;
    }
}

注意这里用alias而不是root：root会把/ss作为子目录去查找文件，而alias会直接把/ss映射到dist目录，更符合我们的需求。

场景2：反向代理到Angular开发/后端服务 #

如果你的Angular是运行在后端服务（比如开发服务器localhost:4200），那配置要调整为：

server {
    listen 81;
    server_name example.com;

    location /ss {
        # 末尾的斜杠很重要！它会把/ss后的路径转发到后端的根路径
        proxy_pass http://localhost:4200/;
        
        # 保留请求头
        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;
        # 告诉后端请求的基础路径
        proxy_set_header Host $host;
    }
}

这种情况下同样要确保Angular已经设置了--base-href /ss/，否则资源还是会从根目录加载。

3. 验证配置 #

修改完Nginx配置后，重启Nginx生效：

sudo systemctl restart nginx

现在访问http://example.com:81/ss/#/screenshots，应该就能正常加载资源和路由了！

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