Nginx部署两个Angular路由应用 /project1子路径访问异常问题

出现该异常是几处配置错误共同导致的：

• Dockerfile拷贝路径错误：两个Angular应用的构建产物都被直接拷贝到镜像的/ui目录，不仅会出现同名文件覆盖，也和Nginx配置中声明的资源路径不匹配。
• Nginx路径映射逻辑错误：location /project1/块使用root指令时，Nginx会将root路径+完整请求URI拼接作为资源查找路径，例如请求/project1/main.js时会查找/ui/second-app/project1/main.js，但第二个Angular应用的构建产物直接存放在dist目录下，没有project1这层子目录，导致静态资源找不到。
• 回退规则配置错误：/project1/块的try_files最后回退路径写为/index.html，该路径会命中根路径的location规则，返回第一个应用的index.html，这就是静态资源返回首页内容、访问子路径跳回根应用的直接原因。
• 额外路由配置问题：第二个Angular应用已经设置--base-href /project1/，应用内部路由会基于该基路径解析，原有路由配置外层额外加了project1前缀，会导致路由匹配多一层路径，无法正确加载组件。

1. 修正Dockerfile多阶段构建配置 #

将两个应用的产物分别拷贝到独立的子目录，避免文件覆盖，匹配Nginx的路径配置：

FROM node:12-alpine AS first-app
# 省略依赖安装、源码拷贝步骤
RUN ng build --prod

FROM node:12-alpine AS second-app
# 省略依赖安装、源码拷贝步骤
RUN ng build --prod --base-href /project1/


FROM nginx:1.19-alpine AS nginx
# 预先创建两个应用的独立存放目录
RUN mkdir -p /ui/first-app /ui/second-app
COPY .docker/config/nginx.conf /etc/nginx/nginx.conf
# 拷贝第一个应用产物到对应目录，注意根据自身Angular项目构建输出的实际目录层级调整
COPY --from=first-app /src/first-app/dist/first-app/ /ui/first-app/
# 拷贝第二个应用产物到对应目录
COPY --from=second-app /src/second-app/dist/second-app/ /ui/second-app/

注意：Angular执行ng build后，产物默认会存放在dist/[项目名]目录下，请根据自己实际的项目名调整COPY的源路径，确保index.html、静态资源文件直接在/ui/first-app和/ui/second-app目录下，不要多嵌套一层目录。

2. 修正第二个Angular应用的路由配置 #

去掉路由配置中外层的project1路径前缀，base-href已经声明了应用部署的基路径，内部路由不需要重复添加：

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: 'home', pathMatch: 'full'}
]

3. 修正Nginx配置 #

子路径部署推荐使用alias指令做路径映射，避免root指令的路径拼接问题，同时修正try_files的回退路径，指向子应用自己的index.html：

location / {
    root /ui/first-app/;
    index index.html;
    try_files $uri $uri/ /index.html;
}

location /project1/ {
    # alias路径末尾必须加斜杠，会将匹配到的/project1/前缀替换为/ui/second-app/
    # 例如请求/project1/main.js会映射到/ui/second-app/main.js
    alias /ui/second-app/;
    index index.html;
    try_files $uri $uri/ /project1/index.html;
}

重新构建Docker镜像启动后：

• 访问http://localhost/可正常加载第一个应用
• 访问http://localhost/project1/会自动跳转到/project1/home，静态资源请求返回正确的JS/CSS内容，不再返回根应用的index.html

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