如何在React的.env文件中读取主机环境变量？（Kubernetes场景）

直接在.env文件中使用${ENV_ON_HOST_BASE_SERVICEX_URL}这种占位符引用主机环境变量，默认情况下不可行，但可以通过调整构建或运行逻辑实现需求，以下是具体说明和方案：

为什么默认不可行 #

Create React App（CRA）在构建阶段会读取.env文件的内容，但它本身不会自动解析并替换文件中的${...}占位符。如果构建时没有主动将主机环境变量注入到构建流程中，最终打包后的应用里，这些变量会被当作字符串${ENV_ON_HOST_BASE_SERVICEX_URL}保留，而非实际的服务地址。

针对Kubernetes环境的可行方案 #

方案一：构建时注入环境变量 #

在构建环节将主机/容器的环境变量传入，让CRA自动替换.env中的占位符：

• 在Kubernetes的构建Pod中，通过env字段注入目标环境变量，再执行构建命令：

  # 示例K8s构建Pod片段
  containers:
  - name: build-container
    image: node:18-alpine
    env:
    - name: ENV_ON_HOST_BASE_SERVICEX_URL
      value: "https://dev-servicex.example.com"
    - name: ENV_ON_HOST_BASE_SERVICEY_URL
      value: "https://dev-servicey.example.com"
    command: ["sh", "-c", "npm install && npm run build"]
  

  此时CRA会读取构建环境中的ENV_ON_HOST_BASE_SERVICEX_URL变量，自动替换.env里的占位符，最终打包出的应用会包含实际的服务地址。

方案二：运行时动态注入（更适合K8s灵活配置） #

如果需要在Pod启动时动态修改配置（无需重新构建镜像），可以通过启动脚本生成全局配置文件：

1. 编写容器启动脚本（以Nginx部署静态文件为例）：

   # 生成全局配置文件
   cat > /usr/share/nginx/html/config.js <<EOF
   window.REACT_APP_CONFIG = {
     BASE_SERVICEX_URL: "${ENV_ON_HOST_BASE_SERVICEX_URL}",
     BASE_SERVICEY_URL: "${ENV_ON_HOST_BASE_SERVICEY_URL}"
   }
   EOF
   # 启动Nginx
   nginx -g 'daemon off;'
   

2. 在React项目的public/index.html中引入这个配置文件：

   <script src="%PUBLIC_URL%/config.js"></script>
   

3. 在React组件中直接读取全局变量：

   const serviceXUrl = window.REACT_APP_CONFIG.BASE_SERVICEX_URL;
   

4. 在Kubernetes部署时，通过env字段注入环境变量即可，无需修改镜像。

方案三：用ConfigMap挂载配置（需配合运行时逻辑） #

将不同环境的配置存在Kubernetes ConfigMap中，部署时挂载到容器路径，但注意CRA是构建时读取.env，所以直接挂载.env到构建后的容器不生效，需要结合方案二的运行时脚本，读取挂载的配置文件内容并生成全局配置。

总结 #

• 若配置在构建时确定，方案一的构建时注入方式可以满足你最初的.env占位符需求；
• 若需要K8s环境下的动态配置灵活性，方案二的运行时注入是更推荐的实践。

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