如何将docker run时设置的全局环境变量传入React应用？

React项目中以REACT_APP_开头的环境变量是构建时注入的——执行npm run build打包时，这些变量会被直接替换成具体值，打包后的静态文件里已经不存在process.env相关的动态引用。你通过docker run -e传递的是容器运行时的环境变量，此时静态文件早已打包完成，自然读不到这个变量。

方案1：启动时替换静态文件占位符 #

1. 先修改React代码，用占位符替代原本的process.env引用：

// 替换原本的process.env.REACT_APP_BACKEND_WEBSERVICE
console.log(window.REACT_APP_BACKEND_WEBSERVICE);

或者在public/index.html中添加全局占位变量：

<script>
  window.REACT_APP_BACKEND_WEBSERVICE = '__REACT_APP_BACKEND_PLACEHOLDER__';
</script>

2. 构建镜像时保留这个占位符，容器启动前用脚本替换为实际环境变量值（以nginx托管静态文件为例）：

docker run -e REACT_APP_BACKEND_WEBSERVICE="http://webservice-backend:8080" -p 3000:3000 username/webservicename sh -c 'sed -i "s/__REACT_APP_BACKEND_PLACEHOLDER__/$REACT_APP_BACKEND_WEBSERVICE/g" /usr/share/nginx/html/index.html && nginx -g "daemon off;"'

注意：静态文件路径需根据你的镜像实际配置调整。

方案2：用nginx反向代理规避环境变量 #

如果前端容器和后端服务在同一个Docker网络内，直接用nginx反向代理更简洁：

1. 修改React代码中的请求地址为相对路径，比如/api
2. 在nginx配置文件中添加反向代理规则：

location /api {
  proxy_pass http://webservice-backend:8080;
}

前端请求/api时，nginx会自动转发到后端服务，完全不需要传递环境变量。

方案3：启动时生成环境变量配置文件 #

1. 在public/index.html中添加一个动态脚本引用：

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

2. 容器启动时生成包含环境变量的env-config.js文件（仍以nginx为例）：

docker run -e REACT_APP_BACKEND_WEBSERVICE="http://webservice-backend:8080" -p 3000:3000 username/webservicename sh -c 'echo "window.REACT_APP_BACKEND_WEBSERVICE = \"$REACT_APP_BACKEND_WEBSERVICE\";" > /usr/share/nginx/html/env-config.js && nginx -g "daemon off;"'

3. React代码中直接访问全局变量：

console.log(window.REACT_APP_BACKEND_WEBSERVICE);

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