React+TypeScript中如何获取容器环境变量VERSION并显示

你遇到的核心问题是：React前端项目的process.env变量是构建时注入的，而Pod的环境变量是容器运行时存在的，直接用process.env.VERSION自然拿不到，下面分两种常用场景给你解决方案：

场景1：构建时注入环境变量（适合版本固定在构建阶段的情况） #

不同React构建工具对环境变量有前缀要求，必须遵守规则才能被正确注入：

• Create React App (CRA)：变量必须以REACT_APP_开头
  1. 要么把Pod里的环境变量名改成REACT_APP_VERSION，要么在构建时把VERSION的值赋值给REACT_APP_VERSION，比如在Dockerfile或Pod的构建命令里写：

     REACT_APP_VERSION=$VERSION npm run build
     

  2. 在组件里直接使用：

     <div className={classes.buttomstyle}> {process.env.REACT_APP_VERSION} </div>
     

• Vite：变量必须以VITE_开头
  1. 构建时赋值：

     VITE_VERSION=$VERSION npm run build
     

  2. 组件里通过import.meta.env获取：

     <div className={classes.buttomstyle}> {import.meta.env.VITE_VERSION} </div>
     

场景2：运行时读取Pod环境变量（适合需要动态获取容器运行时变量的情况） #

如果前端镜像已经构建完成，需要在Pod运行时动态读取环境变量，得通过容器启动脚本生成前端可访问的变量：

1. 在容器的启动脚本（比如entrypoint.sh）里添加代码，生成包含环境变量的js文件：

   # 假设前端静态文件放在/usr/share/nginx/html目录下
   echo "window.env = { VERSION: '$VERSION' }" > /usr/share/nginx/html/env.js
   

2. 在项目的index.html里引入这个脚本：

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

3. 在TypeScript组件里使用，同时添加全局类型声明避免报错：

   // 先在项目的types文件里添加全局声明（比如env.d.ts）
   declare global {
     interface Window {
       env: {
         VERSION: string;
       };
     }
   }
   
   // 组件中使用
   export const AppSidebar = () => {
       // ... 其他代码
       return (
           <Sidebar>
             {/* ... 其他元素 */}
             <div className={classes.buttomstyle}> {window.env.VERSION} </div>
           </Sidebar>
       );
   };
   

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