Рубрики
Uncategorized

Действия GitHub: Скрыть и Установить переменные угловой среды

Как скрывать угловые среды переменные из вашего репо и установите их в строю время, используя действия GitHub. Теги с угловым, дежоптом, Github, JavaScript.

Один трюк в день (35 части серии)

Я делюсь Один трюк в день До первоначальной запланированной даты окончания карантина COVID-19 в Швейцарии, 19 апреля 2020 года. Восемь Дни осталось до этого первого этапа. Надеюсь, лучшие дни впереди.

Вчера я вдруг вспомнил, что я все еще должен был создать Действия GitHub Для создания и развертывания редактора нашего проекта Deckdeckgo Отказ

Несмотря на то, что большинство интеграций уже автоматизированы, эта функция по-прежнему в моем списке Todo, потому что мне придется запугивать некоторые производственные токены, прежде чем иметь возможность должным образом закончить эту задачу.

Когда я подумал об этом, я спросил себя, если бы я не уже не решил такую функцию в другом проекте недавно? Угадай, что, действительно, у меня есть 😉, но в Угловой прототип. Небольшой проект, который я разработал для себя, чтобы помочь мне найти квартиру в Цюрихе пару недель назад ( Watamato Если интересно, проверьте его).

Вот почему я делюсь с вами сегодня эти новые хитрости.

Концепция

Угловой, из коробки, давайте обрабатывать переменные среды благодаря собственности FileReplacements нашего angular.json Отказ По умолчанию, скорее всего, ваш проект содержит два файла, а окружающая среда И еще один для вашей продуктивной сборки окружающая среда Отказ

Идея следующая: в окружающая среда Мы собираемся определить ключи без каких-либо ценностей, позволяя нам толкать их в нашу публику Github refo безопасно. Затем, с помощью системных переменных, установите их перед сборкой в наших действиях GitHub.

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

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

Для начала, давайте сначала настроим нашу окружающая среда файлы. Наша цель состоит в том, чтобы запустить токен, скажем, например, мы хотим скрыть наши Firebase API ключ.

Не совсем связан с решением, но скажем, мы также вводим Версия и Имя нашего приложения в вашей конфигурации. Обратите внимание, что это требует активации вариантов компилятора ResolvejsonModule к правда В вашем tsconfig.json.

Наше окружающая среда: 

import {name, version} from '../../package.json';

export const environment = {
  production: false,
  firebase: {
    apiKey: 'the-key-you-can-expose',
  },
  name,
  version
};

И наше окружающая среда который содержит «неопределенный» для скрытого значения. Причиной этой строки является тот факт, что наш предстоящий парсер собирается ввести такое значение, если ключ не определен в Stroce Time. 

export const environment = {
   production: true,
   firebase: {
        apiKey: 'undefined'
    },
    name: 'enviro-replace',
    version: '0.0.1'
};

Скрыть переменные разработки

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

Например, скажем, мы создаем новый файл firebase.environment.ts В котором мы перемещаем нашу конфигурацию, и которые добавляем в список GIT игнорируемых файлов.

export const firebase = {
    firebase: {
        apiKey: 'the-key-you-can-expose',
    }
};

Тогда мы можем обновить наше окружающая среда как следующее: 

import {firebase} from './firebase.environment';

import {name, version} from '../../package.json';

export const environment = {
  production: false,
  ...firebase,
  name,
  version
};

Обновить переменные перед сборкой

Наша продуктивная среда содержит в данный момент скрытое значение «неопределенный» Что мы должны заменить перед созданием нашего приложения.

Для такой цели мы можем использовать «Magic File», описанный в Статья Ричкардо Андреата 👍.

Мы создаем новый скрипт ./config.index.ts. . В основном то, что он делает перезаписи нашего окружающая среда Файл с новыми значениями и, в частности, мы собираемся определить в вашей среде или Gihub Actions Secret Store.

В этом парсеме мы замечаем два интересных веща:

  1. Он также содержит переменные среды. Это означает, что если вы добавите новую клавишу в вашу конфигурацию, вам придется обновить сценарий тоже.
  2. Мы используем процесс окружающей среды Process.env. Firebase_api_key. Чтобы ввести значение, которое мы бы побуждаем от нашей среды или от действий GitHub, чтобы перезаписать окружающую среду с эффективным ключом, мы стремились спрятаться.
import {writeFile} from 'fs';

import {name, version} from '../package.json';

const targetPath = './src/environments/environment.prod.ts';

const envConfigFile = `export const environment = {
   production: true,
   firebase: {
        apiKey: '${process.env.FIREBASE_API_KEY}'
    },
    name: '${name}',
    version: '${version}'
};
`;

writeFile(targetPath, envConfigFile, 'utf8', (err) => {
  if (err) {
    return console.log(err);
  }
});

Наконец мы можем добавить выполнение скрипта нашего package.json :

"scripts": {
  "config": 
     "ts-node -O '{\"module\": \"commonjs\"}' ./config.index.ts",
  "build": "npm run config && ng build --prod",
}

Тестирование

Мы все набор, теперь мы можем попробовать. Давайте сначала заберим сборку, не делая ничего.

Как вы можете заметить, наши Apikey остается равна «неопределенный» И поэтому не действителен для вашей сборки.

Давайте теперь попробуем определить переменную среды ( Export ) и снова запустить нашу сборку.

TADA, наша переменная окружающей среды была установлена и использоваться для нашей сборки 🎉.

На данный момент вы можете спросить себя «Да» Но Дэвид, если мы сделаем это, то каждый раз, когда мы запускаем нашу окружающая среда Файл будет изменен ». На что я бы ответил «Да, вы правы ... Но наша цель - это автоматизировать сборку с действиями GitHub, чтобы не запускать продуктивную сборку локально, поэтому модификация не в том, что проблема для нашего ежедневного рабочего процесса 😇».

Действия GitHub

Очень окончательный кусок, автоматизация с действиями GitHub.

Я не собираюсь покрывать, как можно создать такой скрипт, Julien Renaux. Хорошо обложки предмета в одном из его Блог пост или в качестве альтернативы вы можете проверить из моего углового цвета app.yml Действия GitHub.

Я предполагаю, что ваш сценарий готов и что вы определили Firebase_api_key. в секретах ваших репо

Соответствующая последовательность сборки вашего приложения, вероятно, выглядит следующим образом:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm ci
      - name: Build
        run: npm run build

Для чего мы сейчас «только» нужно добавить следующее:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm ci
      - name: Build
        run: npm run build
        env:
          FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}

Это уже это. Итак, Действия GitHub установит связанную переменную среды для нашего сборки, и наш вышеуказанный скрипт и конфигурация позаботится о остальных.

Резюме

Действия GitHub настолько удобны, были и являются большим активом для моего постоянного рабочего процесса интеграции.

Остановитесь дома, оставайся в безопасности!

Дэйвид

Обложка фото Jae Bano. на Бессмысленно

Один трюк в день (35 части серии)

Оригинал: «https://dev.to/daviddalbusco/github-actions-hide-and-set-angular-environment-variables-1o21»

Читайте ещё по теме: