GitHub Actions部署Docker版React应用如何读取Secrets与.env环境变量

React 是前端静态应用，你用的 dotenv-webpack 插件只会在代码构建阶段读取本地 .env 文件，将 process.env 对应的变量直接硬编码替换到打包后的 JS 产物中。应用部署到容器运行后，不会再读取容器或者宿主机（droplet）的系统环境变量、本地 .env 文件，你遇到的就是构建阶段变量注入失败/错位的问题。

方案1：沿用当前GitHub Actions构建注入逻辑 #

如果你不需要运行时动态修改变量，直接用构建时注入即可，按以下步骤排查修正：

• 确认GitHub仓库的Secrets配置中，REACT_APP_AXIOS_URL 参数值填写正确，且Actions工作流中 Add environment variables to .env 步骤执行无报错，生成的 .env 文件路径和 webpack.config.js 执行的根目录一致，保证 dotenv-webpack 能正常读取到文件。
• 如果你是在Docker构建阶段打包React代码，需要确保Actions生成的 .env 文件已经被包含到Docker构建上下文中，且Dockerfile里有对应的 COPY 指令将 .env 复制到webpack执行目录，避免构建阶段读空值。
• 构建完成后可以直接解压打包后的 build 目录产物，搜索JS文件里的API_URL对应值，确认已经被替换为目标地址再部署即可。

方案2：运行时读取容器环境变量 #

如果你需要不用重新构建就能修改API_URL，可以改用运行时注入方案，步骤如下：

1. 在项目public目录下新建config.js，内容如下：

window.APP_CONFIG = {
  API_URL: "REPLACE_ME_AXIOS_URL"
}

2. 在项目入口index.html的最顶部引入该文件：

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

3. 业务代码里直接读取全局配置即可，替换之前的process.env写法：

const API_URL = window.APP_CONFIG.API_URL

4. 新增容器启动脚本start.sh，放在项目根目录：

#!/bin/sh
# 启动时用容器环境变量替换占位符
sed -i "s/REPLACE_ME_AXIOS_URL/$REACT_APP_AXIOS_URL/g" /usr/share/nginx/html/config.js
# 启动web服务，这里以nginx为例，如果你用其他服务替换对应启动命令即可
nginx -g 'daemon off;'

5. 修改Dockerfile，将启动命令替换为执行这个脚本即可，这样每次容器启动都会自动读取当前环境的变量值，不需要重新构建镜像。

部署完成后打开应用页面，在浏览器控制台打印对应变量值，确认返回结果和预期一致即可。

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