通过Kubernetes Ingress访问Pod中Angular应用的配置与故障排查

架构老林

2026-10-29

核心故障原因

静态资源路径不匹配
现有Dockerfile执行Angular构建时未指定--base-href参数，打包生成的index.html内所有JS、CSS静态资源的引用路径默认是站点根路径/。当通过Ingress提供的/angular-app/ser/路径访问时，页面发起的静态资源请求会直接向http://localhost/runtime-xxx.js这类根路径地址发起请求，完全不匹配Ingress配置的路由规则，导致请求无法被正确转发到后端服务
Ingress 路由规则逻辑错位
配置的nginx.ingress.kubernetes.io/rewrite-target: "/$1"规则会剥除请求中的/angular-app/ser/前缀，将转发给后端Nginx服务的路径修改为不带前缀的相对路径。这套逻辑本身没有问题，但和未配置base-href的Angular应用叠加后，所有未命中/angular-app/ser/前缀的请求会被Ingress判定为无匹配后端服务，直接返回503错误
路由匹配失效导致返回默认页
当请求的路径不满足Ingress配置的/angular-app/ser/(.*)匹配规则时，Ingress找不到可转发的后端服务，会返回自身的默认错误页；部分场景下转发逻辑错位时，会命中后端Nginx的默认欢迎页配置，出现访问Ingress地址却显示Nginx默认首页的问题

修复方案

调整Angular构建参数
修改Dockerfile中的构建命令，补上与Ingress访问路径一致的base-href配置，保证页面内静态资源的引用路径带上正确的访问前缀：
```
RUN npm run build -- --output-path=./dist/out --configuration $configuration --base-href=/angular-app/ser/
```
修正Ingress路由逻辑
如果需要保留现有路径前缀对外暴露的能力，可直接移除rewrite注解，让完整的请求路径带着/angular-app/ser/前缀转发给后端服务。只要保证Angular的base-href配置和对外暴露的路径完全一致，后端Nginx就能正常找到对应目录下的静态资源
如果需要保留现有rewrite剥除前缀的逻辑，需要确认正则捕获组的配置和当前集群内Ingress-Nginx的版本匹配，避免因匹配规则兼容问题导致路由失效

完善后端Nginx配置
在nginx-custom.conf的server块内补充单页应用路由兼容配置，避免页面刷新时出现404错误：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

校验Service关联状态
确认Ingress配置中引用的angular-ser服务，其selector标签能正确匹配运行Angular应用的Pod，且Service的端口映射和Pod内Nginx服务的暴露端口一致。如果Service没有关联到健康的Pod端点，即使Pod本身可以通过IP直接访问，Ingress转发请求时也会返回503

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