Vue.js部署Kubernetes环境中加载CSS/JS资源出现404错误求助

问题描述 #

我们尝试将Vue.js应用部署在Kubernetes环境中（通过Nginx容器运行），使用Ingress进行站点路由，相关配置如下：

Dockerfile：

# build stage
FROM public.ecr.aws/docker/library/node:19 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM public.ecr.aws/nginx/nginx:1.24 as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/conf.d/default.conf

Nginx配置：

server {
    listen       80;
    server_name  _;
    access_log  /var/log/nginx/vue-access.log;
    error_log  /var/log/nginx/ve-error.log;
    
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
}

Ingress配置：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: -ingress
  annotations:
    kubernetes.io/ingress.class: alb
    alb.ingress.kubernetes.io/scheme: internet-facing
    alb.ingress.kubernetes.io/target-type: ip
spec:
  rules:
    - http:
        paths:
          - backend:
                service:
                    name: vue-portal-service
                    port:
                      number: 80            
            path: /
            pathType: ImplementationSpecific

当前页面的index.html可正常加载，但CSS和JS资源均返回404错误。该Docker镜像在本地运行时一切正常，无法定位问题。

排查步骤 #

• 验证Vue打包的publicPath配置：检查vue.config.js中的publicPath设置，默认是/，需确保与实际访问路径完全匹配。查看打包后dist/index.html内的资源引用路径，比如是否为/css/app.xxx.css这类绝对路径，如果是相对路径（如css/app.xxx.css），可能导致资源加载时路径解析错误。
• 检查Nginx容器内的资源完整性：登录到K8s的Nginx Pod，执行kubectl exec <nginx-pod-name> -- ls -l /app，确认css、js等目录及文件是否存在且完整。同时查看Pod启动日志kubectl logs <nginx-pod-name>，排除镜像拷贝或挂载异常。
• 分析Nginx日志定位请求路径：查看Nginx的访问日志和错误日志：

  kubectl exec <nginx-pod-name> -- cat /var/log/nginx/vue-access.log
  kubectl exec <nginx-pod-name> -- cat /var/log/nginx/ve-error.log
  

  对比404请求的路径与容器内实际资源路径，确认是否存在路径不匹配（比如请求/static/css/app.css但容器内是/app/css/app.css）。
• 验证Service到Pod的路由：执行kubectl describe service vue-portal-service，确认Endpoints列表包含Nginx Pod的IP，端口映射为80。再通过端口转发直接访问服务：kubectl port-forward service/vue-portal-service 8080:80，在本地访问http://localhost:8080，如果资源能正常加载，说明问题出在Ingress/ALB的转发规则。
• 检查ALB的路径转发配置：当前Ingress使用ImplementationSpecific路径类型，需确认ALB是否正确转发所有资源请求（如/css/*、/js/*）到Nginx服务。查看ALB的访问日志，排查是否有路径重写或过滤导致资源请求被拦截。
• 修正Ingress配置语法错误：当前Ingress的name字段配置为-ingress，属于无效名称，需修改为合法名称（如vue-app-ingress），避免因Ingress配置无效导致路由异常。

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