假设我们开发了一个 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 部分参考这里。