使用Create-React-App和Heroku：开发、预览和生产环境

Question

我正在开发一个应用程序(基于create-react-app包的前端应用程序，它使用API)。我正在使用Heroku进行部署，并且目前有两个基于相同代码库的部署，即staging和production。这些部署应该使用具有不同数据库的不同开发/暂存/生产API。

是否有可能告诉create-react-app根据如何运行react-scripts start来使用不同的环境变量？

以下是需要使用的不同环境变量：

- env.development

- REACT_API: https://localhost/react_api - env.staging

- REACT_API: https://myappstagingapi.heroku.com - env.production

- REACT_API: https://myappproductionapi.heroku.com 我该如何做？这是一个好的工作流程吗？

非常感谢！

- pmqa

Answer 1

我曾经遇到过类似的情况，即在从Github自动部署时，有比production和development更多的环境。

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

您可以将此URL添加到Heroku上项目的设置中，例如替换NodeJS默认的buildpack。

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

如果您遵循上面的链接，您会看到章节环境变量。因此，为了使您的React应用程序能够处理自定义变量：

1. 使用REACT_APP_前缀向您的Heroku项目环境变量中添加适合您的变量（通过Heroku仪表板中的设置）。请注意，只有具有此前缀的envs才会在process.env中可见，因此您应相应地修改代码
2. 重新部署应用程序。

这样应该可以解决问题。我相信也可以保留.env文件，但我更喜欢通过Heroku仪表板来控制。

- Greg Wozniak