React应用如何获取AKS集群通过ConfigMap注入的CURRENT_ENV变量

问题根源 #

React（尤其是Create React App）在执行npm run build时，会将所有process.env.REACT_APP_*变量静态注入并替换到打包后的静态文件中。你当前的流程是先完成构建打包，再在容器启动时设置环境变量，这时候变量根本不会被写入已经生成的静态代码里，自然在前端代码里拿不到值。

解决方案 #

根据你的需求（动态根据部署环境修改标签），推荐两种方案：

方案1：运行时注入环境变量（单镜像适配多环境） #

这种方案不需要为每个环境构建不同镜像，而是在容器启动时将环境变量注入到静态文件中：

1. 修改run.sh脚本，在启动serve前生成一个包含环境变量的全局配置文件：

   # 在build目录下生成环境变量配置文件
   cat > /app/build/env-config.js << EOF
   window._env_ = {
     REACT_APP_CURRENT_ENV: "${CURRENT_ENV}"
   };
   EOF
   
   npx serve -s build -l 3000
   

2. 修改public/index.html，在<head>标签内引入这个配置文件：

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

3. 前端代码中使用全局变量，替换原来的process.env调用：

   const currentEnv = window._env_.REACT_APP_CURRENT_ENV;
   // 用currentEnv动态修改标签逻辑
   

4. 保持AKS的ConfigMap配置不变，确保CURRENT_ENV能正确注入到Pod环境中。

方案2：构建时注入环境变量（多镜像对应多环境） #

如果允许为每个环境构建独立镜像，可以在Docker构建阶段传入环境变量：

1. 修改Dockerfile，添加构建参数并注入环境变量：

   # 构建阶段
   FROM node:18-alpine as builder
   ARG CURRENT_ENV  # 定义构建参数
   ENV REACT_APP_CURRENT_ENV=${CURRENT_ENV}  # 注入到构建环境
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build  # 构建时静态注入变量
   
   # 运行阶段
   FROM node:18-alpine
   WORKDIR /app
   COPY --from=builder /app/build ./build
   RUN npm install -g serve
   CMD ["serve", "-s", "build", "-l", "3000"]
   

2. 构建镜像时传入环境参数：

   # 生产环境镜像
   docker build --build-arg CURRENT_ENV=production -t my-react-app:prod .
   
   # 测试环境镜像
   docker build --build-arg CURRENT_ENV=staging -t my-react-app:staging .
   

3. AKS部署时直接使用对应环境的镜像，不需要再通过ConfigMap注入CURRENT_ENV。

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