reactjs - Heroku:使用不同的环境变量提升静态 react 页面

Question

我们使用 Heroku 管道部署了静态 React 站点。

代码在舞台上自动推送和构建。为了推送到生产环境，我们希望使用 Heroku 提升功能，因此我们确信我们使用的是我们在舞台上测试过的相同构建。

Stage 和 Production 有不同的 API，我们希望通过 Heroku 的环境变量进行配置。

在 Stage 上的 npm run build 期间 const apiUrl = process.env.API_URL 被替换为 const apiUrl = "https://stage-api .example.com"

不幸的是(但当然)，在提升到生产环境之后，apiUrl 仍然是 Stage 中的那个。

此外，发布阶段的破解 does not work ，因为不会部署发布阶段的文件系统更改。

有没有办法将 Heroku 的升级功能与静态构建和环境变量一起使用(我知道我们可以按阶段进行重建或基于域加载配置)？

使用 Heroku 管道部署静态站点有什么好的做法吗？

Answer 1

您需要在运行时运行 const apiUrl = process.env.API_URL，而不是在构建时注入(inject)。我在 heroku 中使用 promote 函数，让应用程序在 process.env.NODE_ENV === 'production'

时获取该变量