Heroku管道 - 暂存环境变量被带入生产环境

Question

我最近将一个React/Express应用部署到了Heroku，但是我遇到了一个问题：环境变量被包含在构建后的应用和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是另一个Heroku应用程序，具有“staging”和“production”版本。因此，在我的React应用程序的Heroku配置中设置了API_URL环境变量的值，分别为“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部署管道时，是否有办法强制重新构建应用程序slug，以便它能够捕获不同的环境变量？

- skwidbreth

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';

- Michał Młoźniak

---

对于一个不使用Express的静态应用程序呢？ - morrislaptop

你的设置是什么？我相信你可以使用相同的方法。你所需要做的就是确保在运行时获取 ENV 而不是在构建过程中获取。 - Michał Młoźniak

当我使用这种方法时，我的环境变量未定义。有任何想法为什么？ - mastercool

Answer 2

在编程中可能会出现这样的情况，即您需要在构建时间内为下游管道中的不同环境获取环境变量。例如，可以设置如下：

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

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

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

- Chris Jager