React应用运行时无法读取Docker传入的环境变量该如何解决

问题根因 #

React 作为纯前端客户端应用，执行 npm run build 打包时会将所有 process.env 前缀的环境变量直接替换为静态字符串，打包后的产物是纯静态的 HTML/JS/CSS 文件，运行在用户浏览器侧，本身无法直接读取容器的系统环境变量。因此你之前在 Dockerfile 中定义的 ARG/ENV 仅会在构建阶段被写入打包产物，运行时修改容器环境变量不会生效。

可行实现方案：运行时注入环境变量 #

核心逻辑是在容器启动时，通过入口脚本将环境变量的值动态替换到静态文件的预留占位符中，具体步骤如下：

1. 前端代码预留占位符 #

在 React 项目的 public/index.html 中新增全局变量定义，使用特殊字符串作为占位符：

<script>
  // 预留占位符，容器启动时会被替换为实际值
  window.MYENV = '__MYENV_PLACEHOLDER__'
</script>

后续在 React 业务代码的任意位置，都可以直接通过 window.MYENV 读取该参数。

2. 调整 Dockerfile 配置 #

保留原有构建逻辑，新增运行阶段的入口脚本配置：

# 构建阶段（原有逻辑无需修改，可直接复用你之前的配置）
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
# 复制构建产物到 Nginx 静态资源目录
COPY --from=builder /app/build /usr/share/nginx/html
# 复制自定义入口脚本到容器内
COPY entrypoint.sh /entrypoint.sh
# 给入口脚本添加执行权限
RUN chmod +x /entrypoint.sh
# 声明可传入的环境变量，设置默认值
ENV MYENV=default_value
# 指定入口脚本
ENTRYPOINT ["/entrypoint.sh"]
# 原有 Nginx 启动命令
CMD ["nginx", "-g", "daemon off;"]

3. 编写入口脚本 #

在项目根目录新建 entrypoint.sh 文件，内容如下：

#!/bin/sh
# 替换index.html中的占位符为实际传入的环境变量值
sed -i "s/__MYENV_PLACEHOLDER__/$MYENV/g" /usr/share/nginx/html/index.html
# 执行后续启动命令
exec "$@"

4. 启动容器 #

你原有的启动命令无需修改，直接运行即可生效：

docker container run -it -p 3001:80 --env MYENV=MYENV myimage

扩展说明 #

如果需要传入多个环境变量，可批量替换占位符：只需要在 index.html 中预留多个对应占位符，在 entrypoint.sh 中添加多条 sed 替换规则，或者写遍历逻辑批量替换即可。

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