Трубопровод 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.