GCP Kubernetes Istio Ingress部署Angular应用遇JS404求示例

• 静态JS文件404常见诱因：
  • Angular构建时baseHref配置和实际部署路径不匹配，导致静态资源请求路径错位
  • Istio路由规则对静态资源路径匹配逻辑错误，截断了JS/CSS类文件的请求
  • 托管Angular的Web服务未配置SPA路由回退，非根路径访问时直接返回404
• LoadBalancer模式正常但Istio Ingress访问异常的常见诱因：
  • K8s Service端口命名未遵循Istio协议自动识别规则，导致Sidecar无法正确转发流量
  • VirtualService/Gateway的Host匹配规则和实际请求的Host头不匹配
  • GCP防火墙未放通Istio Ingress网关的入站流量

前置准备 #

• 为集群默认命名空间开启自动Sidecar注入：kubectl label namespace default istio-injection=enabled
• 构建Angular应用时根据部署路径配置资源前缀：
  • 应用部署在域名根路径：直接执行ng build --prod
  • 应用部署在子路径（如/web/）：执行ng build --prod --baseHref=/web/，避免静态资源路径错位
• 将构建完成的Angular静态资源打包到Nginx镜像，推送到GCP Artifact Registry供集群拉取

应用与基础Service配置 #

# angular-app.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-app
  labels:
    app: angular-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: angular-app
  template:
    metadata:
      labels:
        app: angular-app
    spec:
      containers:
      - name: angular-web
        image: gcr.io/你的GCP项目ID/angular-app:v1.0.0
        ports:
        - containerPort: 80
          name: http-web
---
apiVersion: v1
kind: Service
metadata:
  name: angular-app-svc
spec:
  selector:
    app: angular-app
  ports:
  - port: 80
    targetPort: 80
    name: http-web

注意：容器内Nginx配置需开启SPA回退逻辑，核心配置片段如下：

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

  # 静态资源直接命中返回
  location ~* \.(js|css|png|jpg|svg|ico)$ {
    expires 1d;
    add_header Cache-Control "public";
  }

  # SPA路由回退，避免前端路由刷新404
  location / {
    try_files $uri $uri/ /index.html;
  }
}

重点提醒：Service和Deployment的端口名必须以http为前缀，这是Istio自动识别HTTP流量的默认规则，否则会出现流量转发异常。

Istio 路由配置 #

# istio-ingress-config.yaml
apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: angular-app-gateway
spec:
  selector:
    istio: ingressgateway
  servers:
  - port:
      number: 80
      name: http
      protocol: HTTP
    hosts:
    - "*" # 生产环境替换为实际访问域名
---
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: angular-app-vs
spec:
  hosts:
  - "*" # 与Gateway的host配置保持一致
  gateways:
  - angular-app-gateway
  http:
  - match:
    - uri:
        prefix: /
    route:
    - destination:
        host: angular-app-svc
        port:
          number: 80

• 静态文件404排查：
  • 进入应用Pod内检查静态文件路径：kubectl exec -it <angular-app-pod-name> -- ls /usr/share/nginx/html，确认构建产物是否完整存在
  • 在集群内直接curl后端Service地址，访问静态JS资源，排除Nginx本身的配置问题
  • 对照浏览器开发者工具的JS请求路径，确认是否和baseHref配置一致，路径错位时调整Angular构建参数重新打包
• Istio访问异常排查：
  • 临时将Istio Ingress网关Service改为LoadBalancer类型，获取外网IP直接访问，排除GCP防火墙拦截问题
  • 确认Pod的Sidecar注入状态：Pod内需包含istio-proxy边车容器，缺失时需重新检查命名空间的注入标签
  • 查看Ingress网关日志定位路由拦截原因：执行kubectl logs -n istio-system <istio-ingressgateway-pod-name>，根据日志中的404/503记录调整路由匹配规则

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