Nginx配置通过/dev路径访问默认目录下Angular静态资源报错如何解决

问题原因分析 #

• 首次404报错：root指令的逻辑是将完整请求路径拼接在root值之后，访问/dev/xxx时，实际查找的路径是/usr/share/nginx/html/dev/xxx，和你实际静态文件存放路径不符。
• 后续403报错：三个原因叠加：1. alias末尾未加斜杠，路径匹配逻辑出错；2. index配置被注释，访问目录路径时Nginx无法定位到index.html；3. try_files的回退路径写的是根路径，没有适配当前location规则。

正确配置方案 #

方案1：rewrite重写规则（适配多前缀场景） #

如果需要同时支持/dev、/prod等多个前缀访问同一批静态资源，直接在server块下配置如下规则即可：

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    # 全局指定根目录和默认首页
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # 匹配所有带前缀的请求，自动剥离前缀后查找文件
    location ~ ^/[^/]+/(.*)$ {
        try_files $uri /$1 /$1/ /index.html;
    }

    # 保留根路径原有访问规则
    location / {
        try_files $uri $uri/ /index.html;
    }
}

方案2：修正alias配置（仅适配单个/dev前缀） #

如果只需要适配/dev前缀，把你之前的alias配置修正即可解决403问题：

location /dev/ {
    alias /usr/share/nginx/html/; # 末尾必须加斜杠
    index index.html index.htm; # 启用index配置
    try_files $uri $uri/ /index.html;
}

Angular适配注意事项 #

Angular单页应用需要配合调整打包参数适配路径前缀：

• 单个前缀场景：打包时添加--base-href参数，适配/dev前缀的打包命令为 ng build --base-href /dev/
• 多前缀通用场景：打包时设置base-href为相对路径 ng build --base-href ./，可以兼容任意前缀路径。

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