如何在Kubernetes部署React JS应用时覆盖环境变量？

所有REACT_APP_开头的Create React App环境变量是构建阶段硬编码到静态产物中的，打包完成后变量值就已经固定，不会读取容器运行时的操作系统环境变量，因此你在Deployment中配置的env参数无法直接生效。

方案1：构建镜像时注入变量（适合环境镜像绑定场景） #

在Dockerfile的构建阶段通过构建参数接收变量值，打包时直接写入静态产物：

1. 修改Dockerfile如下：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 声明构建参数，接收外部传入的后端地址
ARG REACT_APP_BACKEND_SERVER_URL
# 赋值给构建阶段环境变量
ENV REACT_APP_BACKEND_SERVER_URL=$REACT_APP_BACKEND_SERVER_URL
RUN npm run build

# 运行阶段托管静态文件
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 构建镜像时传入对应环境的参数值：
   docker build --build-arg REACT_APP_BACKEND_SERVER_URL=http://127.0.0.1:59058 -t test-ui:1.0.3 .
3. 替换Deployment中的镜像版本为新构建的版本即可。

方案2：运行时动态注入变量（推荐，单镜像多环境复用） #

通过容器启动脚本动态替换静态文件中的变量占位符，实现一套镜像适配多环境：

1. 在项目public目录下新增config.js，将变量挂载到全局window对象：

window.REACT_APP_CONFIG = {
  BACKEND_SERVER_URL: "REPLACE_BACKEND_URL"
}

2. 在public/index.html的<head>标签最顶部引入该配置文件，确保优先加载：

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

3. 业务代码中优先读取全局配置，兜底用本地.env变量：

const backendUrl = window.REACT_APP_CONFIG?.BACKEND_SERVER_URL || process.env.REACT_APP_BACKEND_SERVER_URL;

4. 项目根目录新增容器启动脚本entrypoint.sh：

#!/bin/sh
# 替换静态配置文件中的占位符为容器环境变量值
sed -i "s|REPLACE_BACKEND_URL|${REACT_APP_BACKEND_SERVER_URL}|g" /usr/share/nginx/html/config.js
# 启动Nginx
exec nginx -g 'daemon off;'

5. 修改Dockerfile引入启动脚本：

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
# 复制启动脚本并授予执行权限
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
EXPOSE 80
ENTRYPOINT ["/entrypoint.sh"]

6. 构建通用镜像后，你原本的Deployment配置即可直接生效，容器启动时会自动替换变量值。

你当前Deployment配置中的"是HTML转义后的引号，需要替换为原生双引号，修正后的env配置如下：

env:
  - name: "REACT_APP_BACKEND_SERVER_URL"
    value: "http://127.0.0.1:59058"

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