Create-React-App + Heroku：开发、登台和生产环境

Question

我正在开发一个基于 create-react-app 包的应用（使用 API 的前端应用）。我正在使用 Heroku 进行部署，目前有两个基于相同代码库、暂存和生产的部署。这些部署应使用具有不同数据库的不同开发/登台/生产 API。

是否可以根据我运行react-scripts start 的方式告诉 create-react-app 使用不同的环境变量？

• env.development
  • REACT_API: https://localhost/react_api
• env.staging
  • REACT_API: https://myappstagingapi.heroku.com
• env.production
  • REACT_API: https://myappproductionapi.heroku.com

我该怎么做？这是一个好的工作流程吗？

非常感谢！

Answer 1

当部署是从 Github 自动完成时，我遇到了类似的情况，其环境比 production 和 development 更多。

首先，确保您使用的是部署 buildpack，即 https://github.com/mars/create-react-app-buildpack.git

您可以在 Heroku 项目的设置中添加此 URL，例如替换 NodeJS 默认构建包。

完整的文档在这里： https://elements.heroku.com/buildpacks/nhutphuongit/create-react-app-buildpack

如果您点击上面的链接，您可以看到环境变量一章。所以，为了让你的 React App 可以处理自定义变量：

1. 在您的 Heroku 项目环境变量中添加一个适合您的带有 REACT_APP_ 前缀的环境变量（通过 Heroku Dashboard 中的设置）请注意，只有带有此前缀的环境才会在您的 process.env 中可见稍后，您应该相应地修改您的代码
2. 重新部署应用程序。

这应该使事情正常进行。我确信也可以保留 .env 文件，但我更喜欢通过 Heroku Dashboard 进行更多控制。