如何配置K8s Nginx Ingress基URL替换以适配Angular客户端路由(LocationStrategy)

嘿，我来帮你解决Angular客户端路由搭配K8s Nginx Ingress基URL配置的问题，这玩意儿确实容易踩坑，我给你拆解成清晰的步骤来弄：

第一步：先搞定Angular项目的基础配置 #

Ingress的基URL得和Angular项目的配置对应上，不然路由肯定乱跳：

• 如果你的Ingress要把应用挂载在/test-app这类基路径下，构建Angular包的时候必须指定base-href参数：

  ng build --prod --base-href /test-app/
  

• 关于Angular的路由策略，推荐用PathLocationStrategy（无#的美观URL），但需要Ingress配合做fallback处理；如果图省事也可以用HashLocationStrategy（URL带#），Ingress配置会简单很多，但用户体验稍差。

第二步：调整K8s Nginx Ingress配置 #

你原来的Ingress配置有几个关键问题需要修正，尤其是rewrite-target的写法和Angular路由的fallback逻辑，下面给你两种场景的正确配置：

场景1：使用PathLocationStrategy（推荐） #

这种场景下核心要解决的是页面刷新404的问题——因为Angular的客户端路由路径，刷新时会被Ingress当成真实的后端路径，需要转发到index.html让Angular自己处理：

kind: Ingress
apiVersion: networking.k8s.io/v1 # 注意：extensions/v1beta1已废弃，用当前标准的v1版本
metadata:
  name: test-app
  namespace: acceptance-testing
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    nginx.ingress.kubernetes.io/use-regex: "true" # 必须开启，因为要用正则匹配路径
    nginx.ingress.kubernetes.io/rewrite-target: /$2 # 用$2捕获基路径后的路由部分
    # 新增：处理路由fallback，刷新时转发到index.html
    nginx.ingress.kubernetes.io/configuration-snippet: |
      location ~* ^/test-app(.*)$ {
        try_files $uri $uri/ /test-app/index.html;
      }
spec:
  rules:
    - http:
        paths:
          - path: /test-app(/|$)(.*) # 正则匹配基路径及后续所有路由
            pathType: Prefix
            backend:
              service:
                name: test-app-service # 替换成你的实际服务名
                port:
                  number: 80

关键配置解释

• rewrite-target: /$2：正则/test-app(/|$)(.*)会把/test-app/dashboard拆分为$1=/、$2=dashboard，重写后转发到后端服务的/dashboard，完美匹配Angular的路由。
• configuration-snippet：这段Nginx规则会捕获所有/test-app开头的请求，如果请求的路径不存在（比如刷新客户端路由），就自动 fallback到/test-app/index.html，让Angular接管路由逻辑。

场景2：使用HashLocationStrategy（简单省心） #

如果不想折腾Ingress的fallback配置，可以改用Hash路由，此时URL中的#后面部分不会被发送到服务器，Ingress只需要处理基路径转发即可：
首先在Angular的路由模块里配置Hash策略：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, HashLocationStrategy, LocationStrategy } from '@angular/router';

const routes: Routes = [/* 你的路由配置 */];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
export class AppRoutingModule { }

然后Ingress配置简化为：

kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
  name: test-app
  namespace: acceptance-testing
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
spec:
  rules:
    - http:
        paths:
          - path: /test-app
            pathType: Prefix
            backend:
              service:
                name: test-app-service
                port:
                  number: 80

第三步：验证配置是否生效 #

• 部署Ingress后，用命令检查配置：kubectl describe ingress test-app -n acceptance-testing
• 访问https://你的域名/test-app，测试路由跳转和页面刷新：比如跳转到/test-app/dashboard后刷新页面，应该正常显示内容而不是404。

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