Create-React-App + Heroku：开发，分期和生产环境

Question

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

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

• 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默认的buildpack。

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

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

1. 在您的Heroku项目环境变量中添加一个REACT_APP_前缀的前缀（通过Heroku仪表板中的 Settings ）。请注意，只有带有此前缀的env在{ {1}}，因此您应该相应地修改代码
2. 重新部署应用程序。

这应该使事情正常。我相信也可以保留process.env文件，但我更希望通过Heroku信息中心进行更多控制。