React 在 docker, buildkite 部署，如何读取不同的 staging, qa 环境文件

[gamesover]

现在 deployment 一般都是 docker 或者类似系统 在生产环境之外，都会有不同的测试环境，比如 staging,qa 等 假设 build 好的 image 都是一样的，你只要通过设置不同的当前 environment ，app 就会读取对应的环境文件

比如在 rails 下，设置当前 environment = staging,rails 就会读取.env.staging + .env 当前 environment = production,rails 就会读取.env.production + .env

但是 react 太怪了，只有 3 种环境，而且你不能自己修改 NODE_ENV 我看了好多种办法，比较经典比如 https://www.codingdeft.com/posts/react-environment-variables/,利用 env-cmd 读取一些 custom env file

但是 env-cmd 有个大问题，这是在 build image 阶段执行的，本来一模一样的 image ，仅仅是环境文件的不同 我要生成不同的 image 吗？比如弄个 staging image ，跑 yun run build-staging; qa image 运行 yun run build-qa ？

本来明明只要一个 image ，pass 不同的当前 env 过去就可以了。另一种奇淫技巧是，在一个 image 内生产不同 build 放在不同的 folder 下，然后制定读取不同 folder ，这个办法被我们 ops team 骂半死

我想因为各种环境都会读取.env ，有没有办法在 deploy image 前，弄个脚本，比如当前是 staging env ，执行 .env.staging >> .env

这样可行吗？或者大家有其他好办法？

[7anshuai]

迫于上条及上上条都答非所问，午休时间琢磨了下
react app 从 html script 里读取环境变量的配置吧，docker nginx image （ 1.19 版本开始） 支持使用 /etc/nginx/templates/*.template 模板文件来提取环境变量到 /etc/nginx/conf.d 中，所以你可以试试在启动 nginx 时把想要的环境变量动态的通过 nginx http_sub_filter 指令，注入到 index.html 中

[arischow]

@7anshuai #21 我碰到和楼主一样的问题，现方法是 build N 个环境，等我来研究下你说的，多谢~

[7anshuai]

@arischow 我也是刚去看了下 nginx image 的文档，发现可以这么搞 差不多就是利用 nginx 来做动态化下发页面配置了吧 😂

[gamesover]

@7anshuai 我看了下，这个方法也是厉害，code + server 配置

但是还要我之前说的，前端是没有任何秘密的
用户无论如何都是可以看到想看的变量和密码，如果你植入了前端的话

我们老大弄环境变量的一大原因是，想影响前端调用位于环境变量的 password 和 key ，这其实是暴露于用户的

[arischow]

@gamesover #24 抱歉。我想了想，跟你不一样的情况应该是我只需要在 index.html 有不同的 baseUrl 就可以了，因为到生产环境的时候静态文件会经过 CDN

[CodingNaux]

需求:
1. 打包一次
2. 每个环境变量不同

所以打包永远都是 webpac production mode, 环境变量通过 nodejs,通过模版写入全局变量.这样代码就能读取不同环境的变量

[CodingNaux]

#26 如果有 node 层,可以用这个

[jessynt]

https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers#rebuild_your_image_and_start_the_server

[jessynt]

参考： https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers

在容器启动时，替换环境变量到打包好的 js 文件中

[leoskey]

react build 后的文件是无法修改配置的，建议一下两种
1.在 docker build 时指定参数，--build-arg host=https:// 参考 #3
2.利用环境域名不同，react 里加载相对路径的配置文件 /config.js ,实际路径是 http://stg/config.js 或 http://pd/config.js

[walpurgis]

仔细想想，容器注入的环境变量是给谁看的？是容器内启动的进程，前端代码想得到这些变量就必须通过它们来传递

[7anshuai]

@gamesover 正如 create-react-app 文档中说的那样：WARNING: Do not store any secrets (such as private API keys) in your React app!
API 的密钥应该存在服务器，React app 通过服务端接口再去调用第三方服务
@arischow 晚上闲着没事，写了篇博客记录一下上面提到的思路，供参考 https://7anshuai.js.org/blog/add-react-app-env-vars-by-nginx/