Kubernetes容器中Vite React应用出现ERR_ABORTED 504网关超时问题求助

核心问题定位 #

你当前在Kubernetes集群中运行的是Vite开发服务器（npm run dev），而非生产环境的静态资源服务。Vite开发服务器的模块热更新、依赖预构建逻辑都是针对本地开发优化的，在K8s的网络环境下，依赖文件的请求路径、缓存机制极易和集群网关/Ingress规则冲突，进而导致504超时。同时你的Dockerfile也存在不少不合理的构建步骤。

解决方案步骤 #

1. 改用生产构建模式部署（最关键） #

Vite开发服务器完全不适合部署到K8s生产环境，正确流程是先构建成静态文件，再用Nginx这类轻量Web服务器托管：

• 修改Dockerfile为生产构建流程：

FROM node:18.17.0-alpine AS builder
WORKDIR /app
# 先拷贝依赖配置文件，利用Docker缓存加速构建
COPY package*.json ./
RUN npm ci --only=production
# 拷贝项目源码与配置
COPY ./src ./src
COPY vite.config.js ./
# 执行生产构建
RUN npm run build

# 用Nginx作为运行时镜像
FROM nginx:alpine
# 拷贝构建产物到Nginx默认静态目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 可选：自定义Nginx配置处理React SPA路由（适配react-router-dom）
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• 新增nginx.conf处理SPA路由：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. 若需临时在K8s运行开发模式（仅用于调试） #

如果必须在K8s里跑Vite dev，需调整Vite配置和K8s网络规则：

• 修改vite.config.js，适配K8s容器环境：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0', // 必须监听所有地址，否则K8s容器外无法访问
    port: 5173,
    watch: {
      usePolling: true, // K8s容器文件系统大多不支持inotify，用轮询避免热更新失效
    },
    optimizeDeps: {
      force: true, // 强制每次启动重新预构建依赖，避免缓存不一致
    },
  },
})

• 调整K8s配置：
  • 确保Service端口与Vite的5173端口正确映射
  • 给Ingress添加长连接超时配置（比如Nginx Ingress设置proxy_connect_timeout、proxy_read_timeout为60秒以上），避免依赖请求超时

3. 清理Dockerfile冗余步骤 #

原Dockerfile存在不少无意义操作，需精简：

• 去掉npm update，改用npm ci锁定依赖版本，避免构建环境不一致
• 非必要情况下删除npm rebuild，仅在有特定原生依赖（如sharp）时保留
• 删除node ./node_modules/esbuild/install.js，Vite会自动处理esbuild安装
• 不能只拷贝src目录，必须包含package.json、vite.config.js等核心文件

4. 排查K8s网络问题 #

如果调整后仍出现504：

• 检查集群Ingress/网关的超时设置，确保超时时间足够覆盖依赖文件加载
• 查看Pod日志，确认Vite服务器是否正常启动、有无报错
• 进入Pod内部，用curl测试本地能否访问Vite依赖文件（比如curl http://localhost:5173/node_modules/react/index.js），排查容器内部服务是否正常

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