如何在裸金属Kubernetes集群通过Ingress暴露Angular应用

1. 修正Ingress路径匹配与重写规则 #

问题大概率出在Ingress的路径转发逻辑上，确保配置使用正则匹配和正确的重写规则，让所有/myapp/下的子请求都能转发到后端Service。示例配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myapp-ingress
  namespace: your-namespace
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  ingressClassName: nginx
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /myapp/(.*)
        pathType: Prefix
        backend:
          service:
            name: myapp-service
            port:
              number: 80

重点：用/myapp/(.*)匹配所有子路径，通过rewrite-target: /$1将请求转发到Service的根路径，避免静态资源请求被截断。

2. 确保Angular构建时的base href配置正确 #

不要只修改代码里的base href，必须在构建时指定参数，保证静态资源路径前缀正确：

ng build --base-href "/myapp/"

如果用Docker镜像部署，要把这个构建命令写入Dockerfile：

FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN ng build --base-href "/myapp/"

FROM nginx:alpine
COPY --from=build /app/dist/your-app-name /usr/share/nginx/html

注意末尾的斜杠不能省略，否则Angular生成的静态资源路径会缺少层级。

3. 检查前端与后端的路由隔离 #

如果前端和.NET后端共用同一个Service，要在nginx配置里区分SPA路由和API请求，避免冲突：

# 处理Angular SPA路由，找不到的页面重定向到index.html
location / {
    try_files $uri $uri/ /index.html;
}

# 转发API请求到.NET后端
location /api/ {
    proxy_pass http://backend:5000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

如果前后端是分开的Service，要在Ingress里分别配置路径规则，比如为API单独设置/api/(.*)的转发规则。

4. 验证与调试 #

• 用kubectl describe ingress myapp-ingress -n your-namespace确认Ingress已正确关联Service，路径规则生效。
• 用curl -v http://your-domain.com/myapp/runtime.js查看请求状态码和响应头，确认是否被正确转发。
• 查看nginx ingress控制器日志：kubectl logs -n ingress-nginx deployment/ingress-nginx-controller，搜索请求路径排查转发错误。

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