Nuxt应用Ingress部署后前端资源加载路径异常问题求助

1. 修正Nuxt配置并重新部署 #

先确认nuxt.config.js（或Nuxt 3的nuxt.config.ts）的配置是否正确，必须重新构建前端镜像并部署服务才能生效：

Nuxt 2 配置示例 #

export default {
  router: {
    base: '/real-time-service/' // 注意末尾必须带斜杠
  },
  build: {
    publicPath: '/real-time-service/_nuxt/'
  }
}

Nuxt 3 配置示例 #

export default defineNuxtConfig({
  app: {
    baseURL: '/real-time-service/'
  },
  nitro: {
    publicAssets: {
      baseURL: '/real-time-service/_nuxt/'
    }
  }
})

2. 调整Ingress重写规则 #

如果前端配置修改后仍未生效，可调整Ingress的rewrite-target，让前端服务接收带完整前缀的请求路径：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-nginx-rewrite
  namespace: ns-apropo-uat
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /real-time-service/$2
spec:
  ingressClassName: nginx
  rules:
    - http:
      paths:
      - path: /real-time-service(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: frontend-real-time-svc
            port:
              number: 80

此配置会将/real-time-service/xxx重写为/real-time-service/xxx，前端服务收到的请求包含前缀，生成的资源路径会自动带上/real-time-service/。

3. 用Nginx响应内容替换强制修正路径 #

如果前两种方法都无效，可通过Ingress注解添加Nginx配置，替换响应中的资源路径：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-nginx-rewrite
  namespace: ns-apropo-uat
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet: |
      sub_filter '/_nuxt/' '/real-time-service/_nuxt/';
      sub_filter_once off;
spec:
  ingressClassName: nginx
  rules:
    - http:
      paths:
      - path: /real-time-service(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: frontend-real-time-svc
            port:
              number: 80

sub_filter_once off确保所有匹配的资源路径都被替换，而非仅第一个。

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