Heroku pipeline - 暂存环境变量进入生产环境

Question

我最近向 Heroku 部署了一个 React/Express 应用程序，但我遇到了环境变量的问题，这些环境变量是内置应用程序和 Heroku 部署管道的一部分 - 简而言之，值应用 staging 版本的环境变量在升级到 production 时被继承 - 我可以正确设置环境变量的唯一方法是将应用直接推送到 production，这首先确实违背了部署管道的目的。以下是场景摘要：

有问题的环境变量是 API_URL，它在 webpack.config.js 中引用如下：

plugins: [
    new webpack.DefinePlugin({
        'API_URL': JSON.stringify(process.env.API_URL || 'http://localhost:4000/api/v1')
    })
]

API 本身是另一个具有 staging 和 production 版本的 Heroku 应用程序，因此 API_URL 环境变量的值是在我的 React 应用程序 Heroku 中设置的配置分别为 https://staging-api-12345.herokuapp.com/api/v1 和 https://production-api-12345.herokuapp.com/api/v1。

当我将我的 React 应用程序提升到 staging 时，它运行良好 - 但是，当我将应用程序提升到 production 并首次调用 API 时，它仍然指向 https://staging-api-12345.herokuapp.com/api/v1。好吧，我明白为什么会这样——应用程序是在被推送到 staging 时构建的...所以我尝试在提升到 production 后重建应用程序，但这没有用，它仍然使用了 staging 环境变量。

使用 Heroku 部署管道时，有没有办法强制重建 app slug 以便它捕获不同的环境变量？

Answer 1

您无法重建 slug，管道的要点是在应用程序之间移动相同的 slug。

您需要做的是在运行时而不是在构建过程中获取 API_URL。您可以将所有环境放在一个文件中，例如 env.js

export const API_URL = process.env.API_URL;
export const OTHER_VAR = process.env.OTHER_VAR;

然后只需在其他文件中导入您需要的内容

import { API_URL, OTHER_VAR } from 'env.js';

Answer 2

在某些情况下，您可能需要在构建期间为管道下游的不同环境提供环境变量。例如这样的设置：

Test |--> Prd Europe
     |--> Prd USA

比如说，出于 SEO 的原因，您想通过使用环境变量为美国设置不同的标题，并且它应该立即在模板中可用，而不是在几毫秒之后。这在管道中是不可能的，因为 slug 是在测试时构建的，其中只能为单个租户提供服务，并且异步加载太慢。例如，某些抓取工具可能会选择占位符标题。

除了完全不使用管道之外，解决此问题的方法可能是为每个环境生成多个模板（在构建时）。在本例中，有两个模板 europe.html 和 usa.html。然后由 Web 服务器在运行时基于环境变量为它们提供服务。因此 if REGION === 'USA'，使用在测试环境中烘焙的环境变量服务 usa.html。

Heroku pipeline - 暂存环境变量进入生产环境

Heroku pipeline - staging env variable carried into production

heroku

webpack

heroku-pipelines