Kubernetes环境下React应用无法读取配置的环境变量问题求助

问题根因 #

是的，该问题完全是Create React App（CRA）的默认打包机制导致的。

CRA在执行npm run build打包操作时，会将所有前缀为REACT_APP_的环境变量直接替换为对应静态值，嵌入到最终生成的JS静态资源中。打包完成后产出的是纯静态文件，运行在用户浏览器侧时不会再读取服务端/容器侧的系统环境变量。

你当前配置失效的原因 #

你使用的Dockerfile是直接将提前打包完成的build目录复制到Nginx镜像中，打包阶段没有传入对应的环境变量，此时代码里的process.env.REACT_APP_GHOST_API_KEY已经被替换为空值。后续不管是在Dockerfile中定义ENV参数，还是在K8s Deployment中注入环境变量，都属于容器运行时的系统级配置，对已经生成的静态资源没有任何作用，浏览器侧的前端代码也不可能直接读取到Pod容器的系统环境变量。

可行解决方案 #

方案1：构建阶段传入环境变量（适合单环境部署） #

将Dockerfile改为多阶段构建，在前端代码打包阶段就传入对应的环境变量，适合不需要复用镜像、单环境部署的场景：

# 构建阶段
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 接收构建参数并赋值给环境变量
ARG REACT_APP_GHOST_API_KEY
ENV REACT_APP_GHOST_API_KEY=$REACT_APP_GHOST_API_KEY
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html

构建镜像时传入参数即可：

docker build --build-arg REACT_APP_GHOST_API_KEY=你的实际API密钥 .

方案2：运行时动态注入环境变量（适合多环境部署、镜像复用） #

通过启动脚本在容器启动时替换静态文件中的占位符，实现同一个镜像在不同K8s环境中使用不同配置：

1. 在项目public目录下新增config.js文件：

window.REACT_APP_CONFIG = {
  GHOST_API_KEY: "__REACT_APP_GHOST_API_KEY__"
}

2. 在public/index.html的head标签中引入该配置文件：

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

3. 业务代码中修改取值方式，不再使用process.env：

const api = new GhostContentAPI({
  url: "https://dockuser.com",
  key: window.REACT_APP_CONFIG.GHOST_API_KEY,
  version: "v3",
});

4. 新增Nginx启动脚本start-nginx.sh：

#!/bin/sh
# 替换配置文件中的占位符为实际环境变量值
sed -i "s/__REACT_APP_GHOST_API_KEY__/$REACT_APP_GHOST_API_KEY/g" /usr/share/nginx/html/config.js
# 启动Nginx
nginx -g 'daemon off;'

5. 修改Dockerfile配置：

FROM nginx:alpine
COPY build/ /usr/share/nginx/html
COPY start-nginx.sh /start-nginx.sh
RUN chmod +x /start-nginx.sh
CMD ["/start-nginx.sh"]

该方案下你原有K8s Deployment中注入环境变量的配置可以完全保留，容器启动时会自动将环境变量值写入到静态配置文件中，前端可正常读取。

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