如何让Cloud Foundry部署的React应用读取指定.env环境变量文件

核心问题原因 #

React CRA 体系下process.env开头的环境变量是构建时静态注入的，执行npm run build命令时默认会将NODE_ENV设为production，自动加载.env.production的配置值打进最终的静态资源包，后续部署到 Cloud Foundry 任何空间都不会再改变这个值，和部署阶段的配置无关。

问题1解决方法 #

要让部署到dev空间的应用加载.env.test或.env.development的配置，有两种常用方案：

1. 修改构建命令指定环境配置
   先安装环境变量管理工具env-cmd，执行npm install env-cmd -D安装到开发依赖。
   然后在package.json的scripts节点新增对应环境的构建命令：

   "scripts": {
     // 原有其他命令
     "build:test": "env-cmd -f .env.test react-scripts build",
     "build:dev": "env-cmd -f .env.development react-scripts build"
   }
   

   要部署到dev空间前，执行对应环境的构建命令，比如要加载test配置就执行npm run build:test，构建完成后再执行cf push即可。
2. 运行时动态注入（适配多环境共用构建包场景）
   如果希望同一个构建包可以适配不同环境，不需要重复构建，可以在入口index.html中留占位符，搭配Cloud Foundry启动脚本替换变量：
   • 在public/index.html中添加全局变量声明：

     <script>
       window.REACT_APP_PROFILE = '__REACT_APP_PROFILE__'
     </script>
     

   • 业务代码中用window.REACT_APP_PROFILE替代process.env.REACT_APP_PROFILE读取
   • 在CF的manifest中添加启动命令，部署时自动替换占位符为CF空间设置的环境变量值

问题2解答 #

• 推荐为每个环境创建独立的Cloud Foundry空间，不同环境的资源、配置、路由完全隔离，避免配置串用、测试流量影响生产的问题。
• 完全支持定义多套manifest配置文件，你可以根据环境命名为manifest-dev.yml、manifest-test.yml、manifest-prod.yml，不同文件中可以配置对应环境独有的路由、实例数、资源限额、环境变量等。部署时用-f参数指定对应配置文件即可，比如推送到测试环境执行cf push -f manifest-test.yml。

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