По мере роста сложности и численности команды проекта становится все более важным убедиться, что разрабатываемый код не нарушает существующий код. Наряду с этим также важно обеспечить соответствие кода стандартам кодирования, определенным для проекта, а также автоматическое развертывание в среду разработки/реализации сразу после слияния кода в ветке по умолчанию. А если в проекте используется Trunk-Based Development, то становится еще более важным убедиться, что все следуют определенным процессам. Именно эту проблему можно решить с помощью Github Actions.
Что такое CI/CD?
CI означает непрерывную интеграцию, когда инкрементные изменения кода выполняются часто и надежно, а CD означает непрерывную доставку / непрерывное развертывание, когда изменения кода доставляются или развертываются в средах разработки или постановки сразу после их слияния.
Что такое Github Actions?
Github Actions — это платформа CI/CD, которая позволяет нам создавать автоматизированные конвейеры для тестирования кода, сборки, развертывания и многого другого. Github Actions не ограничивается приложениями React и может использоваться для приложений на основе других фреймворков. Jenkins — одна из альтернатив Github Actions, которую можно использовать для настройки конвейера CI/CD.
Использование Github Actions для CI/CD
Github Actions можно настроить, добавив yml-файлы для рабочих процессов в каталог .github/workflows в корне проекта. В рамках этой статьи мы будем использовать CI.yml для рабочего процесса непрерывной интеграции и CD.yml для рабочего процесса непрерывного развертывания.
Настройка рабочего процесса CI
CI.yml будет отвечать за выполнение рабочего процесса всякий раз, когда запрос pull или событие push регистрируется в главной ветке (по умолчанию). Рабочий процесс CI будет состоять из выполнения тестовых примеров, проверки линтинга и тестирования сборки. Если вы хотите настроить ESLint и Prettier для линтинга, выполните следующие действия:
Set Up ESLint and Prettier in a React App with Absolute Imports (2022).
В качестве дополнения для повышения эффективности, данный файл рабочего процесса также реализует кэширование зависимостей, чтобы сделать рабочий процесс более эффективным (Caching Dependencies in Github Actions), поскольку по умолчанию действия Github используют свежее виртуальное окружение, которое загружает и заново устанавливает все зависимости при каждом выполнении действий.
Настройка рабочего процесса CD
CD.ymlw будет отвечать за рабочие процессы развертывания, такие как развертывание кода в средах разработки или постановки, а также выполнение рабочего процесса CI. Для сценария развертывания могут потребоваться некоторые секретные переменные окружения, которые можно добавить с помощью Github Encrypted Secrets в разделе Settings > Secrets > Actions.
Вот конфигурация для конвейера CD, который будет выполняться после завершения рабочего процесса CI на основной ветке.
Здесь стоит упомянуть, что если распространение в определенные ветви ограничено только запросом на вытягивание (Github: Require pull request before merging), то нам не нужно будет снова выполнять рабочий процесс CI, а просто установить зависимости и перейти к сборке и развертыванию, но так как большинство из нас не использует это в целом, рабочий процесс CI будет выполнен до шага развертывания.
Добавление значков состояния рабочего процесса
Как насчет отображения значков состояния рабочего процесса в самом Readme? Это можно сделать, добавив приведенный ниже URL в Readme и заменив значения заполнителей нужными значениями.
// Example Workflow Badge Url:
)
После добавления бейджи будут отображать статус Pass/Fail рабочих процессов в самом Readme вместе с названием рабочего процесса, как показано на прикрепленном изображении.
Заключение
После настройки рабочий процесс CI будет выполняться, когда будет поднят запрос на вытягивание в перечисленных ветках или получено событие push; рабочий процесс CD будет выполняться, когда рабочий процесс CI будет завершен в перечисленных ветках, и это можно отслеживать с помощью вкладки Actions на домашней странице репозитория, как показано на изображении ниже.
Как всегда, вот ссылка на полный код настройки на Github.
Спасибо за прочтение. Поделитесь своими мыслями об использовании Github Actions для настройки автоматизированных конвейеров CI/CD.
Хотите пообщаться? Свяжитесь с нами в Twitter, LinkedIn или в комментариях ниже!