Пост о том, что такое Github Actions, чем он полезен, как заставить его работать в вашем проекте!

вступление

Недавно я играл с Github Actions и теперь смог интегрировать его с Wrapper.js.

Это очень круто и открывает множество захватывающих возможностей для ускорения развертывания приложений за счет автоматизации функций скрипта-оболочки!

В этом посте я объясню, что такое Github Actions и как он работает, чтобы вы могли потом понять, как это реализовано в Wrapper.js (чтобы вы могли взять то, что вам нравится, и реализовать это в своих проектах) :D

Что такое действия Github

Github Actions — это платформа непрерывной интеграции и непрерывной доставки (CI/CD), которая позволяет автоматизировать конвейер тестирования, сборки и развертывания.

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

Чем полезны Github Actions

Теперь я интегрировал Github Actions с Wrapper.js, это полезно, потому что если вы хотите развернуть приложение (например, шаблон WebXR) вот так 👇

Вы можете автоматизировать это развертывание и, что еще лучше, развернуть несколько сред (dev/stage/prod и т. д.), просто отправив код в свой репозиторий git — вот так 👇

С точки зрения разработчиков, они разрабатывают функцию и передают свою работу в ветку в своей кодовой базе — конвейер требует развертывания ее в среде, которую затем можно просмотреть по ее собственному URL-адресу!

Как это работает

В следующих шагах я покажу, как все это собирается вместе.

Я продемонстрирую это на примере шаблона Wrapper.js, вы можете извлечь из него то, что хотите, в свою собственную настройку.

Настройка проекта и пайплайна

Первый шаг — настроить Шаблон Wrapper.js и репозиторий Github для доступа к вашей учетной записи AWS.

Добавление сведений об AWS и секретах в Github

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

Вы найдете это в разделе «Настройки» > «Секреты» > «Действия», затем нажмите зеленую кнопку «Новый секрет репозитория», чтобы добавить свои данные AWS_REGION, AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY.

Обратите внимание, что вы получаете эти данные из своих учетных данных AWS IAM — никогда не делитесь ими с кем-либо и не публикуйте их в Интернете.

Наконец, добавьте имя вашего секрета wrapper.js в качестве секрета репозитория с именем WRAPPERJS_SECRET_NAME.

Настройка проекта Wrapper.js

Настройте свой проект, следуя шагам, описанным на этой странице инструкций, пока не дойдете до конца шага 3.

Это будет означать, что вы выбрали шаблон wrapper.js и использовали команду unwrap CLI, настроив собственные параметры проекта (доменное имя и т. д.), с которыми вы хотите, чтобы ваше приложение было развернуто.

Запустите автоматизацию конвейера

Теперь у вас есть базовый проект и репозиторий github. Следующий шаг — запустить развертывание и посмотреть, как автоматизация делает свою работу!

Поднимите PR и активируйте автоматизацию

В этом примере я объясню это так, как если бы вы подняли запрос на слияние (PR) в репозиторий github. Обратите внимание, что этот процесс также работает с отправкой в ​​мастер и созданием «релиза».

Когда PR поднимается, конвейер активируется, и происходит несколько автоматизаций:

  • Github запускает временную виртуальную машину (ВМ) для запуска автоматизации
  • Все необходимые библиотеки (например, Wrapper.js) установлены на эту виртуальную машину.
  • В процессе установки учетные данные AWS настраиваются
  • Wrapper.js использует этот доступ к AWS для получения секрета, который вы настроили для своего проекта.
  • Затем Wrapper.js пытается создать дубликат этого секрета (если он еще не существует), изменяя значения для среды PR.

После выполнения всех вышеперечисленных шагов процесс развертывания готов к развертыванию вашей среды с использованием нового продублированного секрета Wrapper.js!

Получить секреты

Затем Github Actions запускает команду gobble secrets, чтобы получить дублированный секрет и создать временный файл .env.

Динамически создавать ресурсы Terraform

Затем с этим файлом .env (сохраненным как terraform.tfvars.json) запускается:

  • сожрать tf init
  • сожрать tf план
  • сожрать tf подать заявку

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

Получение секретов из ресурсов Terraform

После завершения работы Terraform конвейер Github Actions запускает команду gobble secrets, чтобы получить только что сгенерированный файл секретов, созданный Terraform.

Это обновляет локально сгенерированный файл .env с новыми данными из облачных ресурсов, таких как API Gateway и S3 и т. д., чтобы клиентский и серверный интерфейсы могли использовать их как часть своих процессов настройки (следующие).

Развертывание серверных конечных точек в API

С новыми сведениями, обновленными в локальном файле .env, конвейер Github Actions затем запускает gobble sls deploy, который затем развертывает конечные точки лямбда на шлюзе API.

Как и в случае с предыдущими командами terraform, эти команды gobble вводят детали .env (переменные шлюза API) в файлы конфигурации Serverless Framework, чтобы лямбда-функции можно было развернуть в правильных конечных точках шлюза API.

Развертывание статического внешнего интерфейса

Наконец, Github Actions затем запускает gobble next export, который затем создает новую статическую сборку приложения Next.JS и экспортирует ее в корзину S3, данные которой изначально были сгенерированы из Terraform.

Вот и все, автоматизация конвейера завершена, и приложение развернуто! :D

Пример конфигурации конвейера

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

Вот файл yaml, который превращает эти диаграммы в реальную пригодную для использования конфигурацию Github Actions :)

Заключение

Это был длинный пост в блоге!

Если повезет, теперь вы понимаете, что такое Github Actions, почему это полезно и как здорово, что оно может автоматизировать развертывание вашего приложения!

Если вы хотите поиграть, не стесняйтесь взглянуть на эти шаблоны Wrapper.js и вперед :D

А пока получайте удовольствие, создавая вещи!

Больше контента на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.

Хотите масштабировать свой технический стартап с помощью контента? Посмотрите Цирк.

Мы предлагаем бесплатные консультации экспертов и индивидуальные решения, которые помогут вам повысить осведомленность о вашем технологическом продукте или услуге и принять их.