20

我最近向 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 本身就是另一个 Heroku 应用程序，staging并且production发布了，因此API_URL环境变量的值在我的 React 应用程序 Heroku 配置中分别设置为https://staging-api-12345.herokuapp.com/api/v1和https://production-api-12345.herokuapp.com/api/v1。

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

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

4

2 回答 2

15

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

您需要做的是API_URL在运行时而不是在构建过程中获取。例如，您可以将所有 envs 放在一个文件中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';
于 2017-07-13T22:39:51.427 回答
0

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

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

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

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

于 2019-08-01T08:44:06.957 回答