Question

我最近在Heroku上部署了一个React / Express应用程序，但是我遇到了环境变量的问题，这些环境变量是构建应用程序和Heroku部署管道的一部分 - 简而言之，它的价值观促销到staging时，应用程序production版本中的环境变量正在被转移 - 我可以正确设置环境变量的唯一方法是将应用程序直接推送到{{ 1}}，它首先真正击败了部署管道的目的。以下是该方案的摘要：

有问题的环境变量是production，在API_URL中引用，如下所示：

webpack.config.js

API本身是另一个带有plugins: [ new webpack.DefinePlugin({ 'API_URL': JSON.stringify(process.env.API_URL || 'http://localhost:4000/api/v1') }) ]和staging版本的Heroku应用程序，因此production环境变量的值在我的React应用程序Heroku配置中设置为{{1}分别和API_URL。

当我将我的React应用推向https://staging-api-12345.herokuapp.com/api/v1时，它运行正常 - 但是，当我将应用推广到https://production-api-12345.herokuapp.com/api/v1并首次调用API时，它仍指向{{ 1}}。好吧，我理解为什么会这样 - 应用程序是在推送到staging时构建的...所以我尝试在升级到production之后重建应用程序，但这不起作用，它仍然使用了https://staging-api-12345.herokuapp.com/api/v1环境变量。

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

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

Answer 2

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

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

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

一种解决方法，除了完全不使用管道外，还可以在环境中（在构建时）生成多个模板。在这种情况下，两个模板europe.html和usa.html。然后在运行时由Web服务器基于环境变量为它们提供服务。因此，if REGION === 'USA'和usa.html一起在测试环境中加入环境变量。

Answer 3

错误在于您如何命名事物。例如，如果您将登台命名为“爬行动物”，则连接到现在是prod容器的reptile-api不再重要。

Answer 4

2020解决方案：使用publicRuntimeConfig和serverRuntimeConfig。更多信息，请点击：https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

Heroku管道 - 暂存env变量进入生产

4 个答案: