Трубопровод Heroku - постановка переменной env в производство

Я недавно развернул приложение 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 релизы, и поэтому значения API_URL переменная окружения установлена ​​в моей конфигурации Heroku приложения React как 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 существует ли способ принудительно перестроить слаг приложения, чтобы оно могло перехватывать различные переменные среды?

1 ответ

Решение

Вы не можете перестроить слаг, главное в конвейерах - перемещать один и тот же слаг между приложениями.

Что вам нужно сделать, это получить 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';

Решение 2020: используйте publicRuntimeConfig и serverRuntimeConfig. Подробнее здесь: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

Ошибка в том, как вы называете вещи. Если вы, например, назвали бы стадию "рептилия", то уже не имело бы значения, подключается ли она к reptile-api, который теперь является контейнером для продуктов.

Могут возникнуть ситуации, когда вам понадобятся переменные env во время сборки для различных сред, находящихся ниже по конвейеру. Пример такой настройки:

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

Скажем, из соображений SEO вы хотите иметь другой заголовок для США, используя переменные env, и он должен быть доступен в шаблоне сразу, а не через несколько миллисекунд. Это невозможно в конвейере, поскольку слаг создается при тестировании, где может обслуживаться только один клиент, а асинхронная загрузка выполняется слишком медленно. Например, какой-то поисковый робот может выбрать вместо него заголовок-заполнитель.

Обходной путь для этого, помимо полного отказа от конвейера, может заключаться в создании нескольких шаблонов для каждой среды (во время сборки). В этом случае два шаблонаeurope.html а также usa.html. Затем обслуживайте их на основе переменных env во время выполнения веб-сервером. Такif REGION === 'USA', обслуживать usa.html с env vars, запеченными в тестовом env.

Другие вопросы по тегам