Vue. js, GitHub, Heroku - Как динамически и безопасно устанавливать переменные среды?

Question

У меня есть приложение, написанное на Vue. js, а исходный код хранится в GitHub. У меня также есть этот исходный код, связанный с конвейерами в Heroku. Я пытаюсь выяснить, как лучше управлять безопасными переменными среды с помощью этой настройки.

В настоящее время я использую файлы .env.local, .env.dev и .env.prod в моем приложении Vue для управления средой переменные. Тем не менее, мне нужно иметь возможность управлять некоторыми из этих настроек в другом месте, например, ключами, которые я не хочу видеть / доступными на стороне клиента. Я пытался использовать настройки переменных среды Heroku, но они, кажется, не доступны или не подтверждены моим приложением Vue, что, я полагаю, имеет смысл. Я просто не уверен, где отсюда go. Это похоже на довольно основную проблему c, которую кто-то должен был решить раньше.

РЕДАКТИРОВАТЬ: я исправляю свои переменные с помощью VUE_APP_, например VUE_APP_API. Затем я получаю доступ к этому значению в приложении с помощью следующего синтаксиса: process.env.VUE_APP_API.

Answer 1

Вы можете использовать библиотеку dotenv для загрузки переменных окружения из одного файла .env.

Вы можете определить переменные окружения в файле с именем .env

VUE_APP_SOME_VAR=someVARvalue
VUE_APP_SOME_OTHER_VAR=someOTHERVARValue

Затем вы можете загрузить эти переменные из .env в любой файл, подобный этому

require('dotenv').config()

//...
//...

process.env.VUE_APP_SOME_VAR

//...
//...

Вы можете узнать больше здесь

Кроме того, вы можете не следует фиксировать файл .env в программном обеспечении для контроля версий, поскольку он может содержать конфиденциальные ключи аутентификации. Вы можете настроить Heroku для использования тех же переменных окружения, задав переменные конфигурации на странице настроек приложений.