配置K8s Nginx Ingress实现两个Angular SPA站点流量路由

这个问题我之前部署Angular SPA到AKS时也碰到过，核心是Angular的静态文件路径配置和Ingress的rewrite规则没配合好，咱们一步步来解决：

1. 先修复Angular应用的静态文件引用路径 #

Angular SPA默认会以根路径(/)作为静态文件的基准路径，当你把它部署在/app2子路径下时，生成的JS、CSS文件引用还是/js/main.js这种根路径格式，Ingress会把这类请求路由到app1的服务，而app1找不到这些文件就返回自己的index.html——这就是你看到的现象。

解决方法很简单：

• 构建app2时指定基准路径：

  ng build --prod --base-href /app2/
  

• 或者直接修改app2的src/index.html，把<base href="/">改成：

  <base href="/app2/">
  

重新构建并部署app2的Docker镜像，这一步是关键，确保所有静态文件的请求都会带上/app2前缀。

2. 调整Ingress配置 #

你的原有Ingress配置缺少正则启用的注解，而且路径匹配规则可以更精准。更新后的配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-app-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    # 启用正则路径匹配（必须加，不然正则表达式不生效）
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
spec:
  rules:
  - http:
      paths:
      - path: /?(.*)
        pathType: Prefix
        backend:
          service:
            name: cluster-ip-app-1
            port:
              number: 5001
      - path: /app2/(.*)
        pathType: Prefix
        backend:
          service:
            name: cluster-ip-app-2
            port:
              number: 5003

关键调整说明： #

• 新增nginx.ingress.kubernetes.io/use-regex: "true"：告诉Nginx Ingress启用正则表达式路径匹配，不然你的/?(.*)这类规则不会生效。
• 修改app2的路径为/app2/(.*)：相比原来的/app2/?(.*)，这个规则会精准捕获/app2/后面的所有内容（比如/app2/js/main.js会捕获到js/main.js），通过rewrite-target: /$1转发给app2的服务时，路径就是正确的/js/main.js，服务能正常返回静态文件。

3. 处理SPA路由的Fallback（可选） #

如果访问app2的路由路径（比如/app2/dashboard）出现404，可以添加一个注解来让Nginx自动 fallback 到index.html，保证Angular的前端路由正常工作：
在Ingress的annotations里添加：

nginx.ingress.kubernetes.io/configuration-snippet: |
  location ~* ^/app2/(?!.*\.(js|css|png|jpg|ico)$) {
    try_files $uri $uri/ /app2/index.html;
  }

这个规则会让所有/app2/下的非静态文件请求，都返回app2的index.html，交给Angular的路由处理。

关于新手的Nginx Ingress学习资源 #

给你几个适合入门的方向：

• 先从Nginx Ingress官方入门文档入手：重点看「Basic Configuration」「Rewrite」「Serving Static Content」这几个章节，了解核心注解的作用和基础路由规则。
• 结合AKS官方教程：Azure文档里有专门针对AKS部署Nginx Ingress、配置HTTPS、处理SPA应用的分步指南，都是针对实际场景的操作，很适合新手。
• 动手做小实验：先部署两个简单的HTTP服务（比如用nginx镜像），配置Ingress路由到不同路径，再逐步添加rewrite、静态文件处理、SPA应用，边做边理解比纯看文档高效很多。

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