Angular应用部署K8s集群后配置/login为根路径路由异常求助

当前报错核心是三个配置不匹配：Angular应用的基础路径、Nginx的资源匹配规则、Traefik Ingress的路径路由规则没有同步适配/login前缀。

1. 修正Angular编译配置 #

静态资源路径错误的核心原因是缺少base href适配，操作如下：

• 把Dockerfile里的npm run build改为npm run build -- --base-href /login/，注意结尾的斜杠不能少，否则会出现/loginstyles.css这类拼接错误的资源路径。
• 也可以直接修改项目index.html中的<base href="/">为<base href="/login/">，效果完全一致。
• 现有Angular路由配置无需调整，根路径''对应的DefaultComponent（登录页）会自动匹配/login根路径。

2. 修正Nginx配置 #

原有Nginx配置里强制指定静态资源MIME头的规则反而会覆盖默认正确配置，同时没有适配前缀路径的 fallback 逻辑，替换为以下配置即可：

server {
    listen 8080;
    server_name  localhost;
 
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
 
    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
 
    location /login {
      alias /usr/share/nginx/html/;
      try_files $uri $uri/ /login/index.html;
    }
}

注：删除原来单独写的.css和.js匹配规则，include /etc/nginx/mime.types已经可以处理正确的MIME类型返回，强制添加规则反而会导致404时返回错误的Content-Type。

3. 修正Traefik Ingress配置 #

需要调整路径匹配规则并添加路径重写注解，配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: traefik
    traefik.ingress.kubernetes.io/router.tls: "true"
    cert-manager.io/cluster-issuer:XXXXXX-acme
    # 新增路径重写规则，把/login前缀剥离后传给后端服务
    traefik.ingress.kubernetes.io/rewrite-target: /$2
  name: ingresshosts
  namespace: dev
spec:
  rules:
    - host: XXXXXXXX
      http:
        paths:
          - path: /login(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: frontend
                port:
                  number: 8080
                              
  tls:
    - hosts:
        - XXXXXXXX
      secretName: XXXXXXXX

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