Vite React应用如何通过Helm的values.yaml注入运行时环境变量？

核心原因 #

Vite默认是构建时注入import.meta.env环境变量，这些变量会被直接打包进静态JS文件中。而Helm配置的env是容器运行时的环境变量，浏览器中的前端代码无法直接访问容器的环境变量（两者运行环境完全隔离），所以直接配置Helm的env字段无效。

解决方案：运行时动态注入环境变量 #

通过容器启动脚本动态生成前端可访问的环境配置文件，让前端在运行时读取变量，步骤如下：

1. 创建前端环境配置模板
   在项目public目录下新建env-config.js.tpl模板文件：

window.env = {
  VITE_TOKEN: "{{VITE_TOKEN}}",
  VITE_API_URL: "{{VITE_API_URL}}"
};

2. 修改Dockerfile，添加启动脚本
   调整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-config.js.tpl /usr/share/nginx/html/env-config.js.tpl
# 复制启动脚本
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
# 设置启动入口
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

3. 编写启动替换脚本
   在项目根目录新建entrypoint.sh：

#!/bin/sh
# 用容器环境变量替换模板中的占位符，生成实际的配置文件
sed -e "s|{{VITE_TOKEN}}|${VITE_TOKEN:-}|g" \
    -e "s|{{VITE_API_URL}}|${VITE_API_URL:-}|g" \
    /usr/share/nginx/html/env-config.js.tpl > /usr/share/nginx/html/env-config.js

# 执行原容器命令（启动nginx）
exec "$@"

4. 前端代码读取运行时变量
   在前端代码中优先读取window.env中的变量， fallback到构建时变量：

// src/config.js
export const appConfig = {
  token: window.env?.VITE_TOKEN || import.meta.env.VITE_TOKEN,
  apiUrl: window.env?.VITE_API_URL || import.meta.env.VITE_API_URL
};

5. Helm配置传递环境变量
   在Helm的values.yaml中配置需要传递的变量：

env:
  VITE_TOKEN: "your-production-token"
  VITE_API_URL: "https://app.prod.org.io"

然后在Helm的deployment.yaml模板中，将这些变量注入容器环境：

containers:
  - name: react-app
    image: {{ .Values.image.repository }}:{{ .Values.image.tag }}
    env:
      {{- range $key, $value := .Values.env }}
      - name: {{ $key }}
        value: {{ $value | quote }}
      {{- end }}

额外说明 #

如果需要更灵活的配置，也可以将环境配置文件通过K8s ConfigMap挂载到容器中，替换上述的模板替换逻辑，核心思路都是让前端在运行时能获取到动态配置的变量。

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