Kubernetes Ingress需添加哪些注解解决Angular静态资源404问题？

问题根源 #

你的Angular应用构建时默认将静态资源的请求路径设为根路径（/），比如请求/main.js、/styles.css等。但当前Ingress配置仅将sport.domain.com/sports路径转发到后端competitions-service，当访问sport.domain.com/sports时，应用发起的根路径资源请求会直接被Ingress拦截（因为没有对应路径规则），导致返回404。

解决方案 #

方案一：修改Angular构建配置（推荐） #

构建Angular应用时，通过--base-href参数指定子路径前缀，让所有静态资源的请求路径自动加上/sports前缀：

ng build --base-href /sports/

如果使用Docker镜像打包，需要在Dockerfile中修改构建命令，加入该参数。构建完成后，应用会请求/sports/main.js这类路径，刚好匹配Ingress的/sports转发规则，静态资源即可正常加载。

方案二：使用Nginx Ingress重写注解（无需修改应用） #

如果无法调整应用构建流程，可以通过Ingress的注解实现请求路径重写，把根路径的静态资源请求映射到/sports路径下。修改后的Ingress配置如下：

kind: Ingress
metadata:
  name: sports-ingress
  namespace: default
  annotations:
    # 启用正则匹配
    nginx.ingress.kubernetes.io/use-regex: "true"
    # 将根路径请求重写为/sports下的对应资源
    nginx.ingress.kubernetes.io/rewrite-target: /sports/$1
spec:
  ingressClassName: ingress-nginx
  rules:
  - host: sport.domain.com
    http:
      paths:
      # 匹配根路径下的所有请求（比如/main.js）
      - pathType: Prefix
        path: "/(.*)"
        backend:
          service:
            name: competitions-service
            port:
              number: 80
      # 保留/sports路径的直接访问
      - pathType: Prefix
        path: "/sports"
        backend:
          service:
            name: competitions-service
            port:
              number: 80

这个配置会把sport.domain.com/main.js这类请求重写为sport.domain.com/sports/main.js，再转发到后端服务，从而解决404问题。

注意事项 #

• 方案一属于Angular应用部署在子路径下的标准做法，配置更简洁，避免Ingress规则复杂，优先推荐。
• 若使用方案二，需确保你的Ingress Controller是ingress-nginx（已在配置中指定ingressClassName: ingress-nginx），因为不同Ingress Controller的注解规则不同。

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