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儀表板中的“設置” ）。請注意，只有具有此前綴的env才會在process.env可見，因此您應該相應地修改代碼
2. 重新部署應用程序。

這應該使事情起作用。 我確定也可以保留.env文件，但我更希望通過Heroku儀表板進行更多控制。