Скрыть переменные среды в вашем проекте StencilJS

В предыдущей статье я описал, как я реализовал переменные окружения в моих Stencil’s проектах или в моих проектах, созданных с помощью Ionic PWA toolkit.

После этой публикации мы начали активно работать над нашим новым редактором презентаций PWA, DeckDeckGo, и, поскольку проект имеет открытый исходный код и опубликован на Github, мы подумали, что, возможно, было бы неплохо не публиковать наши ключи API и другие токены Firebase онлайн в нашем публичном репо 😉

По этой причине мне пришлось пойти на шаг дальше, чем в моем предыдущем посте, соответственно, мне пришлось найти и разработать решение для отдельного сохранения наших ключей. Поэтому я рад поделиться своим решением в этом новом сообщении в блоге 😃

Примечание

Да, мы знаем, что наши переменные среды будут содержаться в нашем клиентском пакете и, следовательно, доступны любому, кто имеет немного ретро-инженерии, но мы подумали, что было бы немного чище не помещать их в репозиторий Git.

Начиная

В проектах Stencil используется Rollup, поэтому мы не собираемся изобретать велосипед, мы просто будем использовать подключаемый модуль Rollup rollup-plugin-replace, который мы устанавливаем с помощью следующей командной строки:

npm install rollup-plugin-replace --save-dev

Этот плагин позволит нам заменять значения во время сборки.

Настройка сред

После установки плагина мы могли редактировать нашу конфигурацию в наших классах начальной загрузки, соответственно, мы могли редактировать наш app.ts файл, чтобы заменить значения, которые мы хотим скрыть. В этом конкретном посте мы собираемся скрыть URL-адрес API. Для этого мы собираемся заменить значения уникальным селектором (который будет автоматически заменен реальными значениями во время объединения, как только мы реализуем все решение):

import {setupConfig} from 
                '../app/services/environment/environment-config’;

setupConfig({
    url: '<@API_URL@>',
    production: true
});

В моей предыдущей статье мы определили две разные среды, и поэтому я все равно буду предполагать, что наша цель - обрабатывать две среды, соответственно production и development.

Точно так же мы собираемся заменить URL-адрес API нашим селектором в конфигурации разработки, соответственно, в файле app-dev.ts:

import {setupConfig} from 
                '../app/services/environment/environment-config’;

setupConfig({
    url: '<@API_URL@>',
    production: false
});

Обратите внимание, что мы используем <@ и @>, чтобы сделать наш селектор действительно уникальным. Эти атрибуты не статичны. Если вы предпочитаете использовать другие, это зависит от вас, не проблема. Затем вам следует просто отразить позже в этом руководстве свои изменения при настройке плагина.

Определение значений селекторов

Чтобы завершить настройку, теперь мы должны создать «где-нибудь» файлы, которые будут содержать реальные значения для наших селекторов. Лично я выбрал решение, в котором я обрабатываю значения в json файлах, помещенных в корень моего проекта и исключенных из Git (я добавил их в список файлов Git .ignored). Поэтому мы могли бы, например, создать новый файл config.prod.json в корне проекта и отредактировать его с помощью нашего селектора и реальных значений:

{
  "API_URL": "https://api.production.com"
}

Конечно, теперь мы также должны создать другой файл конфигурации config.dev.json для селектора и значений или нашей среды разработки:

{
  "API_URL": "https://localhost:3002"
}

Запуск приложения

Теперь, когда наша конфигурация готова, нам нужно просто настроить и использовать плагин, который мы установили ранее, чтобы заменить селектор реальными значениями во время сборки. Для этого мы собираемся отредактировать stencil.config.ts следующим образом:

import replace from 'rollup-plugin-replace';
// See my previous article for development detection
const dev: boolean = process.argv && process.argv.indexOf('--dev') > -1;
import devConfig from './config.dev.json';
import prodConfig from './config.prod.json';
const configValues = dev ? devConfig : prodConfig;
export const config: Config = {
    ...
    plugins: [
      replace({
        exclude: 'node_modules/**',
        delimiters: ['<@', '@>'],
        values: configValues
      }),
    ...
};

Вуаля, не больше и не меньше 🎉 С этого момента каждый раз, когда ваше приложение будет объединено, значения конфигурации, которые вы сохранили отдельно или не зафиксировали в своем репо, будут вводиться во время объединения, легко

Вишня на торте 🍒🎂

Как я уже сказал во введении, это решение реализовано в нашем готовящемся к выпуску редакторе презентаций PWA DeckDeckGo, и, поскольку это проект с открытым исходным кодом, мы будем рады вам взглянуть на реализованное мной решение. Вы заметите, что я реализовал тот же код и конфигурацию, что и выше, но вы не найдете ни config.prod.json, ни config.dev.json в нашем репо 😉

https://github.com/deckgo/deckdeckgo/tree/master/studio

До бесконечности и дальше 🚀

Дэйвид