时间戳

首页 > 解决方案 > Heroku：促进具有不同环境变量的静态反应页面

reactjs - Heroku：促进具有不同环境变量的静态反应页面

问题描述

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

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

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

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

不幸的是（但当然），在升级到生产之后，apiUrl它仍然是 Stage 中的那个。

此外，发布阶段的 hack不起作用，因为不会部署发布阶段的文件系统更改。

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

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

标签： reactjsherokustatic-siteheroku-pipelines

解决方案

您需要在const apiUrl = process.env.API_URL运行时运行，而不是在构建时注入。我在heroku中使用promote函数并让应用程序获取该变量，如果process.env.NODE_ENV === 'production'

推荐阅读