Kubernetes EKS ALB Ingress下直接访问URL中Vue客户端路由报错问题

问题根因 #

你遇到的/path1、/path2路径返回404的问题由两个原因共同导致：

• AWS ALB Ingress默认会将完整请求路径透传给后端UI服务，访问/path1/xxx时，请求会携带完整路径发往UI的静态资源托管服务（通常为Nginx），而Vue打包后的静态资源均存放在根目录下，不存在/path1对应的目录或文件，因此Nginx直接返回404，不会走到Vue客户端路由的处理逻辑。
• 你当前的Ingress配置仅做了路径转发，没有配置路径重写规则，也没有为UI服务配置静态资源 fallback 规则。

解决方案 #

方案1：配置Ingress路径重写（无需修改UI服务配置） #

给Ingress资源添加AWS Load Balancer Controller专属的重写注解，同时调整路径匹配规则即可：

1. 添加重写注解

annotations:
  alb.ingress.kubernetes.io/rewrite-target: /$2

2. 调整UI相关的路径规则

- path: /path1(/|$)(.*)
  backend:
    serviceName: ui
    servicePort: 80
- path: /path2(/|$)(.*)
  backend:
    serviceName: ui
    servicePort: 80
- path: /*
  backend:
    serviceName: ui
    servicePort: 80

该配置会把/path1/xxx、/path2/xxx类的请求重写为/xxx再发给UI服务，即可匹配到根目录下的静态资源。

方案2：修改UI服务的Nginx配置（适配所有客户端路由场景，更推荐） #

如果你的Vue使用history模式的客户端路由，直接修改UI镜像内的Nginx配置，添加静态资源 fallback 规则即可，无需修改Ingress配置：

location / {
  root /usr/share/nginx/html;
  index index.html index.htm;
  # 核心规则：找不到对应静态资源时统一返回index.html，交给Vue客户端路由处理
  try_files $uri $uri/ /index.html;
}

该方案适配所有Vue客户端路由场景，后续新增路由无需再修改Ingress规则，灵活度更高。

额外检查项 #

确认Ingress规则排序：将/a/*、/b/*、/path1/*、/path2/*这类更具体的路径规则放在/*通用规则之前，虽然AWS ALB默认按最长前缀优先级匹配，但显式排序可避免规则加载异常导致的路由错误。

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