如何在运行时将Kubernetes Pod环境变量注入React应用

首先明确核心限制：React 是客户端运行的前端框架，代码经构建后生成静态产物，默认无法直接读取 Pod 容器内部的系统环境变量（该变量仅存在于容器运行时的服务端环境）。你之前使用静态config.json的方案只能读取构建阶段固化的数值，自然无法适配Pod调度、重启后生成的动态服务地址。

以下是生产环境常用的轻量实现方案： #

实现步骤 #

1. 编写容器启动脚本动态生成前端配置文件 #

在项目根目录新建entrypoint.sh启动脚本，容器启动时会读取当前Pod的环境变量，生成前端可直接引入的JS配置文件：

#!/bin/sh
# 清空旧配置，生成新的env.js文件，将需要的变量挂载到window全局对象
echo "window.__POD_ENV__ = {" > /usr/share/nginx/html/env.js
# 仅导出需要的变量，不要全量导出避免泄露K8s集群敏感信息
echo "  REACT_APP_ENV_VARIABLE: \"$REACT_APP_ENV_VARIABLE\"," >> /usr/share/nginx/html/env.js
echo "  REDIS_SERVICE_HOST: \"$REDIS_PORT_6379_TCP_ADDR\"," >> /usr/share/nginx/html/env.js
echo "  REDIS_SERVICE_PORT: \"$REDIS_SERVICE_PORT\"," >> /usr/share/nginx/html/env.js
echo "  BACKEND_SERVICE_HOST: \"$PLAYGROUND_SERVICE_SERVICE_HOST\"," >> /usr/share/nginx/html/env.js
echo "  BACKEND_SERVICE_PORT: \"$PLAYGROUND_SERVICE_SERVICE_PORT\"," >> /usr/share/nginx/html/env.js
echo "}" >> /usr/share/nginx/html/env.js
# 执行原nginx启动命令（如果你用的是其他前端服务，替换为对应启动命令即可）
exec nginx -g "daemon off;"

2. 前端入口引入配置文件 #

在项目public/index.html的<head>标签最顶部引入生成的配置文件，确保页面加载时优先拿到环境变量：

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

3. React组件中直接使用变量 #

修改你的业务代码，直接读取window上挂载的环境变量即可，可以加兜底逻辑避免变量不存在导致报错：

function App() {
  // 兜底避免变量未初始化报错
  const podEnv = window.__POD_ENV__ || {};
  return (
    <div className="App">
      <header className="App-header">
        <p>
            <code>ENV. VARIABLE: </code> {podEnv.REACT_APP_ENV_VARIABLE}
        </p>
      </header>
    </div>
  );
}

export default App;

4. 修改Dockerfile适配启动脚本 #

在你的React镜像Dockerfile中增加启动脚本配置，替换原有默认启动命令：

# 前面的构建步骤（构建React产物、复制到nginx目录等）保持不变
# 新增：复制启动脚本到容器内，设置执行权限
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
# 替换默认启动命令为自定义脚本
ENTRYPOINT ["/entrypoint.sh"]

方案说明 #

该方案无需修改业务逻辑架构，每次Pod重启、重新调度时，启动脚本都会自动读取当前Pod最新的环境变量生成配置文件，无需重新构建镜像即可自动适配服务地址变更的场景。

注意：不要将密码、密钥等敏感信息导出到前端全局变量，所有前端可访问的变量都是公开的，敏感请求请走后端服务代理。

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