Heroku 管道 - 将环境变量暂存到生产环境中答案

【问题标题】：Heroku pipeline - staging env variable carried into productionHeroku 管道 - 将环境变量暂存到生产环境中
【发布时间】：2017-12-17 07:18:22
【问题描述】：

我最近向 Heroku 部署了一个 React/Express 应用程序，但我遇到了作为已构建应用程序和 Heroku 部署管道一部分的环境变量的问题 - 简而言之，环境变量的值来自升级到production 时，应用程序的staging 版本被延续——我可以正确设置环境变量的唯一方法是将应用程序直接推送到production，这确实违背了部署管道的目的第一名。以下是该场景的摘要：

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

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

API 本身是另一个 Heroku 应用程序，具有 staging 和 production 版本，因此 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 后尝试重建应用程序，但这不起作用，它仍然使用 @987654337 @ 环境变量。

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

【问题讨论】：

标签： heroku webpack heroku-pipelines

【解决方案1】：

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

您需要做的是在运行时而不是在构建过程中获取API_URL。您可以将所有 env 放在一个文件中，例如 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';

【讨论】：

如果只是一个不使用 Express 的静态应用程序呢？
您的具体设置是什么？我相信您可以使用相同的方法。您需要做的就是确保在运行时而不是在构建过程中获取 ENV。
当我使用这个方法时，我的环境变量是未定义的。知道为什么吗？

【解决方案2】：

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

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

假设，出于 SEO 的原因，您希望通过使用 env var 为 USA 设置一个不同的标题，并且它应该在模板中立即可用，而不是在几毫秒之后。这是不可能的，因为 slug 是在测试中构建的，只能为单个租户提供服务，并且异步加载太慢。例如，某些爬虫可能会选择占位符标题。

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

【讨论】：