React应用无法读取K8s YAML配置的BACKEND_URL环境变量求助

1. 前端环境变量必须带前缀 #

绝大多数React脚手架（比如Create React App）对前端环境变量有硬性要求：必须以REACT_APP_开头，否则打包工具会直接忽略这个变量，根本不会把它注入到代码里。

如果你的K8s YAML里定义的是BACKEND_URL，那直接写process.env.BACKEND_URL肯定读不到。改一下：

• K8s侧修改变量名：

  env:
    - name: REACT_APP_BACKEND_URL
      value: "https://your-dev-backend.com"
  

• 代码里访问：process.env.REACT_APP_BACKEND_URL

2. 别搞混构建时和运行时注入 #

React是前端应用，代码打包后会变成静态文件。如果你的流程是先build再部署到容器，那K8s里设置的环境变量是运行时的，根本没法直接被打包好的静态代码读到——因为打包时变量已经被硬编码进去了。

两种解决办法：

办法一：构建镜像时传变量 #

在Dockerfile里加构建参数，把环境变量注入到构建过程：

ARG REACT_APP_BACKEND_URL
ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL
RUN npm run build

构建不同环境的镜像时传对应参数：

# Dev环境
docker build --build-arg REACT_APP_BACKEND_URL=https://dev-backend.com -t react-app:dev .
# Prod环境
docker build --build-arg REACT_APP_BACKEND_URL=https://prod-backend.com -t react-app:prod .

办法二：运行时替换静态文件占位符 #

如果要在K8s运行时动态改变量，就得绕开process.env，用占位符替换的方式：

1. 代码里不用process.env，改用全局变量占位符：

   const backendUrl = window.__BACKEND_URL__ || "default-url";
   

2. 写个启动脚本（比如start.sh），容器启动时替换静态文件里的占位符：

   #!/bin/sh
   # 替换js文件里的占位符
   sed -i "s|__BACKEND_URL__|$BACKEND_URL|g" /usr/share/nginx/html/static/js/*.js
   # 启动服务
   nginx -g 'daemon off;'
   

3. Dockerfile里把启动命令改成这个脚本，K8s里正常定义BACKEND_URL变量就行。

3. 先确认K8s变量真的进容器了 #

别光盯着代码，先排查K8s的配置有没有生效：

• 进Pod里看环境变量：kubectl exec -it <你的Pod名称> -- printenv，看看能不能找到你定义的那个变量
• 如果用的是ConfigMap/Secret挂载变量，检查资源是否正确关联到Pod：

  env:
    - name: REACT_APP_BACKEND_URL
      valueFrom:
        configMapKeyRef:
          name: backend-config-map
          key: backend-url
  

  再确认ConfigMap存在：kubectl get configmaps backend-config-map

4. 清缓存、重构建！ #

最后别忘了最容易踩的坑：

• 开发环境下，改了环境变量要重启npm start，不然process.env还是旧的
• 生产环境要重新构建镜像，别用之前打包好的旧产物，不然新变量根本没进去

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