Vite+React部署至Kubernetes时运行时环境变量注入问题

问题根源 #

Vite的import.meta.env采用构建时静态替换机制，打包后变量值会直接硬编码到压缩JS文件中。K8s运行时注入的环境变量无法覆盖这些已固化的值，导致应用读取不到正确配置。

解决方案 #

方法一：Nginx启动脚本注入全局环境变量（推荐，无后端依赖） #

这种方式通过容器启动脚本将K8s注入的环境变量写入前端全局变量，应用运行时直接读取全局变量：

1. 在项目public目录创建env.template.js模板：

window.env = {
  VITE_APP_CLIENT_ID: "${VITE_APP_CLIENT_ID}",
  VITE_APP_AUTHORITY: "${VITE_APP_AUTHORITY}",
  VITE_APP_REDIRECT_URI: "${VITE_APP_REDIRECT_URI}"
};

2. 修改Dockerfile，添加启动脚本逻辑：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY public/env.template.js /usr/share/nginx/html/env.template.js

COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

3. 编写entrypoint.sh启动脚本，替换模板变量：

#!/bin/sh
# 将K8s注入的环境变量替换到env.js
envsubst '\$VITE_APP_CLIENT_ID \$VITE_APP_AUTHORITY \$VITE_APP_REDIRECT_URI' \
  < /usr/share/nginx/html/env.template.js \
  > /usr/share/nginx/html/env.js

# 启动Nginx
exec "$@"

4. 修改main.jsx中的变量引用：

auth: {
  clientId: window.env.VITE_APP_CLIENT_ID,
  authority: window.env.VITE_APP_AUTHORITY,
  redirectUri: window.env.VITE_APP_REDIRECT_URI,
}

5. 在index.html的<head>中提前引入env.js（确保在React脚本之前加载）：

<script src="/env.js"></script>

方法二：打包后替换JS文件占位符 #

如果不想引入全局变量，可以在构建时设置占位符，容器启动时用sed替换：

1. 在vite.config.js中定义占位符：

export default defineConfig({
  define: {
    'import.meta.env.VITE_APP_CLIENT_ID': '"__CLIENT_ID__"',
    'import.meta.env.VITE_APP_AUTHORITY': '"__AUTHORITY__"',
    'import.meta.env.VITE_APP_REDIRECT_URI': '"__REDIRECT_URI__"'
  }
});

2. 修改Dockerfile的启动脚本：

# ... 构建阶段同上 ...

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html

COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

3. 编写entrypoint.sh替换占位符：

#!/bin/sh
# 替换JS文件中的占位符
sed -i "s/__CLIENT_ID__/$VITE_APP_CLIENT_ID/g" /usr/share/nginx/html/assets/*.js
sed -i "s/__AUTHORITY__/$VITE_APP_AUTHORITY/g" /usr/share/nginx/html/assets/*.js
sed -i "s/__REDIRECT_URI__/$VITE_APP_REDIRECT_URI/g" /usr/share/nginx/html/assets/*.js

exec "$@"

方法三：Vite运行时配置（Vite 4.3+） #

如果使用Vite 4.3及以上版本，可以启用实验性的运行时配置，直接读取容器环境变量（适合用vite preview启动的场景）：

1. 在vite.config.js中配置：

export default defineConfig({
  experimental: {
    runtimeConfig: {
      public: {
        VITE_APP_CLIENT_ID: process.env.VITE_APP_CLIENT_ID,
        VITE_APP_AUTHORITY: process.env.VITE_APP_AUTHORITY,
        VITE_APP_REDIRECT_URI: process.env.VITE_APP_REDIRECT_URI
      }
    }
  }
});

2. 在应用中读取运行时配置：

import { useRuntimeConfig } from 'vite';

// 在组件或入口文件中
const runtimeConfig = useRuntimeConfig();
auth: {
  clientId: runtimeConfig.public.VITE_APP_CLIENT_ID,
  authority: runtimeConfig.public.VITE_APP_AUTHORITY,
  redirectUri: runtimeConfig.public.VITE_APP_REDIRECT_URI,
}

验证步骤 #

1. 部署后进入Pod，执行echo $VITE_APP_CLIENT_ID确认环境变量已注入；
2. 打开应用浏览器控制台，检查window.env（方法一）或查看JS文件中的变量值（方法二），确认配置正确加载。

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