如何将 Angular 应用部署在虚拟目录/子目录

假设我们开发了一个 Angular 应用，我们希望将它部署在 https://www.iconben.com/app1，我们该怎么做呢？

这涉及两方面的配置，一方面是 Nginx 配置文件中，配置 server 下面的子目录；另一方面，因为 Angular 应用中的所有请求都会经过 url 拼装，需要让 Angular 知道自己处于子目录的环境下。

前者通过 nginx 配置文件内 server 中配置 location 可以实现(有 root 和 alias 两种用法，若子目录与angular 应用的文件夹不同名，则用 alias 配置)：

server {
        server_name   www.iconben.com;
        listen 80;

        location /app1 {
            alias  /srv/www/angular-app1;
            index  index.html  index.htm login.html;
            client_max_body_size  1024m;
        }

        location / {
            root  /srv/www/www.iconben.com;
            try_files $uri $uri/ /index.html;
            index  index.html  index.htm login.html;
            client_max_body_size  1024m;
        }
}

后者通过修改 Angular 应用的 base href 可以实现。即修改index.html 中的 base 标签为 <base href=”app1″>（默认为<base href=””>，表示配置在站点根目录）。

考虑到开发环境多数并非子目录环境，以上这一步要么在打包的时候才实现（如果是 CI/CD 的环境，配置好相关脚本就好）；要么则是不修改打包结果，而在 nginx 中用 sub_filter 配置 index.html 被请求的时候动态替换base 标签的 href 值。

以下为完整配置：

server {
        server_name   www.iconben.com;
        listen 80;

        location /app1 {
            alias  /srv/www/angular-app1;
            sub_filter '<base href="/">' '<base href="/app1/">';
            sub_filter_once on;
            try_files $uri $uri/ /app1/index.html;
            index  index.html  index.htm login.html;
            client_max_body_size  1024m;
        }

        location / {
            root  /srv/www/www.iconben.com;
            try_files $uri $uri/ /index.html;
            index  index.html  index.htm login.html;
            client_max_body_size  1024m;
        }
}

网上有很些相关文章，但很多没讲到点子上。

一般官方文档是很好的参考来源。以上配置涉及 angular 部分参考这里。