React/Node.js读取Kubernetes Pod环境变量返回undefined？求解决方法

• 先确认变量是否能被Node.js读取：在Pod里执行node -e "console.log(process.env.TEST)"，如果能输出正确值，说明是代码层面的问题：
  • 检查变量名拼写，环境变量是大小写敏感的，确认没有写错
  • 确认代码调用process.env.TEST的时机，避免在模块加载阶段就提前调用（部分框架的初始化逻辑可能存在类似问题）
  • 如果项目用了dotenv这类工具，暂时禁用它测试，避免本地.env文件覆盖系统环境变量

前端代码运行在浏览器中，无法直接读取Pod的环境变量——process.env是Node.js环境特有的对象，浏览器不存在这个变量。不同构建工具有不同的环境变量注入规则：

Create React App（CRA） #

• 环境变量必须以REACT_APP_为前缀，比如把TEST改成REACT_APP_TEST，否则CRA不会将变量注入到构建后的代码中
• 构建镜像时，需要将Pod的环境变量传递到构建过程：
  Dockerfile示例：

  # 构建阶段
  FROM node:18-alpine as builder
  ARG TEST
  ENV REACT_APP_TEST=$TEST
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  
  # 部署阶段
  FROM nginx:alpine
  COPY --from=builder /app/build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

  构建镜像时传递参数：docker build --build-arg TEST=$(kubectl get secret your-secret -o jsonpath='{.data.TEST}' | base64 -d) -t your-image .
• 如果需要部署后动态修改配置，不能依赖构建时注入，建议：
  • 在public目录下创建config.json文件写入配置，前端通过fetch('/config.json')读取
  • 或者通过后端接口返回配置，前端初始化时请求接口获取

Vite 构建的React项目 #

• 环境变量必须以VITE_为前缀，比如VITE_TEST
• 代码中通过import.meta.env.VITE_TEST访问，而非process.env
• 构建时需将Pod的环境变量传递到构建过程，比如在Dockerfile中设置ENV VITE_TEST=$TEST，或执行VITE_TEST=$TEST npm run build

• 在Pod内执行echo $TEST，确认变量存在且值正确
• Node.js后端：在代码最顶部添加console.log('ENV TEST:', process.env.TEST)，启动后查看日志是否输出正确值
• React前端：构建后查看打包后的静态文件（比如main.js），搜索是否存在对应的变量值，确认是否注入成功

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