Kubernetes通过带前缀路径的Ingress部署静态网站出现404问题咨询

完全可以通过Ingress配置实现不需要修改前端代码的适配，也可以通过前端少量构建配置实现任意前缀适配，两种都是生产环境常用的最佳实践，按需选择即可。

方案1：仅通过Nginx Ingress配置实现（无需修改前端代码） #

适合不想动前端构建逻辑、临时调整部署路径的场景，核心用到Nginx Ingress的路径重写、响应内容替换两个能力，示例配置如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-app-ingress
  annotations:
    # 路径重写：把/myApp/xxx的请求重写为/xxx转发到后端静态服务
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    # 自动替换响应内容中的资源路径前缀
    nginx.ingress.kubernetes.io/configuration-snippet: |
      sub_filter '="/' '="/myApp/';
      sub_filter_last_modified off;
      sub_filter_once off;
      sub_filter_types text/html text/css application/javascript;
spec:
  ingressClassName: nginx
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /myApp(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: my-app-service
            port:
              number: 80

核心逻辑：

• 所有/myApp开头的请求都会自动去掉前缀转发给后端静态服务，后端依然按根路径响应资源，无需调整配置
• 返回的HTML、CSS、JS内容中所有="/开头的绝对路径资源引用，都会自动替换为="/myApp/，不需要手动修改每个静态文件，对相对路径引用的资源也完全兼容，不会产生影响。

方案2：前端配置动态base路径（推荐长期使用，适配任意前缀） #

如果应用需要经常调整部署路径，或者要同时部署在多个不同前缀路径下，推荐用前端原生能力实现，不依赖特定Ingress控制器，通用性和性能都更优。
操作步骤：

1. 在HTML的<head>标签中添加<base href="./">，所有相对路径资源都会自动基于这个base的路径解析
2. 配置Docker镜像启动逻辑，支持通过环境变量动态修改base标签的href值，以下是Nginx静态服务的启动脚本示例：

# 读取部署时传入的前缀环境变量，默认值为根路径
APP_PREFIX=${APP_PREFIX:-/}
# 动态替换index.html中的base标签值
sed -i "s|<base href=\".*\">|<base href=\"$APP_PREFIX\">|g" /usr/share/nginx/html/index.html
# 启动Nginx服务
nginx -g 'daemon off;'

部署时只需要给Deployment传入对应前缀的环境变量即可，比如要部署在/myApp下就设置APP_PREFIX=/myApp/，Ingress只需配置常规的前缀转发规则即可，不需要额外的重写或内容替换逻辑。

方案选型建议 #

• 临时部署、不想修改前端代码/镜像：选择方案1，直接修改Ingress配置即可生效
• 长期维护、需要灵活调整部署路径：选择方案2，通用性更强，性能更高。

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