Kubernetes Ingress子路径下Angular路由配置问题咨询

不需要在构建阶段感知部署环境，也不需要运行时自定义脚本篡改index.html，通过三层标准配置即可实现需求，所有配置和环境解耦，一次构建可适配任意子路径部署场景。

1. Angular构建固定配置（和部署环境完全无关） #

构建时固定使用相对路径作为base href，该配置对所有部署环境通用，不需要根据子路径调整：

ng build --base-href "./"

构建生成的index.html中会写入<base href="./">，浏览器会基于当前访问URL的路径自动拼接所有静态资源、前端路由的相对地址，无论部署在根路径还是任意层级子路径，资源地址都会自动带上对应的路径前缀，从根本上避免资源路径写错的问题。

注意：构建时不要配置--deploy-url参数，保持默认即可，避免硬编码资源路径前缀；业务代码中不要硬编码/开头的绝对路径跳转，优先使用Angular Router提供的路由API生成地址，避免跳转时丢失子路径前缀。

2. 前端Angular应用的Nginx配置 #

前端容器内的Nginx不需要做任何路径截断rewrite，只需要保留SPA标准的路由回退规则即可，配置如下：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 静态资源直接返回，配置长缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot|map)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    # 所有非静态资源请求返回index.html，支持Angular前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. Ingress规则调整 #

以AKS最常用的NGINX Ingress Controller为例，只需要调整路径匹配规则和添加rewrite注解，在请求转发给前端服务时自动剥离子路径前缀即可，后端API的转发规则保持原有逻辑不变：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  rules:
    - host: 09ab799fd5674c4594a5.centralus.aksapp.io
      http:
        paths:
          # 后端API保持原样转发，不做路径重写，适配已配置的BasePath
          - path: /ea/api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: releaseeab-eab-chart
                port:
                  number: {{ .Values.externalService.port }}
          # 前端路径匹配后，截取子路径后的内容转发给前端服务
          - path: /ea(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: releaseeaf-eaf-chart
                port:
                  number: {{ .Values.externalService.port }}

配置逻辑说明 #

• 当用户访问https://域名/ea时，Ingress将路径重写为/转发给前端Nginx，返回index.html；浏览器基于当前路径/ea和相对base href，自动将资源请求路径拼接为/ea/xxx.js，匹配Ingress路由规则
• 静态资源请求到达Ingress后，会被重写为/xxx.js转发给前端Nginx，Nginx直接返回对应静态文件，资源加载正常
• 当用户直接访问前端路由（如/ea/dashboard）时，Ingress将路径重写为/dashboard转发给前端Nginx，Nginx找不到对应静态文件时自动返回index.html，Angular正常解析前端路由完成渲染
• 所有/ea/api开头的请求不做重写，直接携带完整前缀转发给后端服务，适配后端已配置的BasePath规则

适配其他Ingress控制器 #

如果使用Application Gateway Ingress（AGIC），逻辑完全一致，只需要将NGINX的rewrite注解替换为AGIC对应的重写规则集，在转发给前端服务前剥离子路径前缀即可，不需要修改前端构建产物和Nginx配置。

内容的提问来源于stack exchange，提问作者Matthias Müller