GitHub Actions и Vercel — быстрое развертывание проектов

Vercel  —  один из лучших хостингов благодаря своей простоте и адаптивности. Он позволяет максимально быстро размещать проекты и практически не требует настройки. Применение Vercel с GitHub для развертывания проектов делает разработку намного более увлекательной. Отправка нового обновления на GitHub позволяет автоматически развертывать код, оптимизируя процесс CI/CD. 

Что такое GitHub Actions?

GitHub Actions  —  это платформа CI/CD для автоматизации рабочих процессов сборки, тестирования и развертывания. С помощью этих процессов вы можете создавать и тестировать пул-реквесты в личном репозитории или развертывать объединенные пул-реквесты в производственном репозитории.

GitHub Actions упрощает автоматизацию всех действий с ПО. В настоящее время эта платформа включает первоклассные технологии CI/CD, позволяющие настраивать ревью кода, управление ветками и сортировку issue.

Как GitHub Actions взаимодействует с Vercel

GitHub Actions автоматически развертывает проекты GitHub с помощью Vercel, предоставляя предварительные URL-адреса развертывания и автоматические обновления пользовательских доменов. Когда вы создаете новый проект Vercel на GitHub и обеспечиваете автоматическое развертывание в каждой ветке, Vercel отслеживает каждую отправку изменений в ветку и развертывает по умолчанию. Если Vercel уже работает с предыдущим коммитом, то текущий процесс отменяется для создания самого последнего коммита. Таким образом, всегда происходит развертывание самых актуальных изменений. 

• 1 вариант для тестирования: модель Fork. 
• 2 вариант для тестирования: tmate.

GitHub Actions в действии

Посмотрим, как развернуть приложение на Vercel с помощью GitHub Actions. Для этой цели я создал и отправил простой проект React в свой репозиторий GitHub. Клонируйте репозиторий на свой компьютер и следуйте описанным инструкциям. 

Настройка Vercel

Для настройки GitHub Actions с Vercel требуются его project ID и org ID. Для этого выполняем следующую команду и действуем согласно указаниям: 

vercel

Эта команда создает файл .vercel/package.json, в котором генерируются projectId и orgId. 

Вы можете указать Vercel не запускать развертывание проекта при отправке кода на GitHub. Тогда рабочий процесс GitHub Actions начнет выполняться только в случае релиза, отправки изменений в конкретную ветку или ручного запуска рабочего процесса. С этой целью создаем файл vercel.json в корневой директории проекта и добавляем следующие конфигурации: 

{
 "github": {
   "enabled": false,
   "silent": true
 }
}

Теперь необходимо сгенерировать токен на Vercel для использования CLI на GitHub Actions. После этого копируем его и сохраняем в надежном месте для последующего применения. 

Отправляем проект на GitHub и по завершении отправки переходим в него. Во вкладке настроек нажимаем Secrets > Actions и добавляем учетные данные Vercel в проект. На странице Actions нажимаем кнопку Create repository secret и добавляем секретные ключи.

• VERCEL_ORG_ID: orgId в файле .vercel/package.json в корневой директории проекта. 
• VERCEL_PROJECT_ID: projectId в файле .vercel/package.json в корневой директории проекта. 
• VERCEL_TOKEN: сгенерированный токен Vercel.

Создав учетные данные, переходим к настройке рабочего процесса. 

Настройка рабочего процесса GitHub 

После добавления учетных данных Vercel в проект приступаем к настройке рабочего процесса GitHub для обеспечения непрерывного развертывания. С этой целью создаем файл .github/workflows/deploy.yml в корневой директории проекта и добавляем нижеуказанные конфигурации: 

# Данный рабочий процесс выполняет чистую установку зависимостей, кэширует/восстанавливает их, создает исходный код и запускает тесты на разных версиях узла. 
# Дополнительная информация предоставлена по ссылке: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
name: "Deploy CI"
 
on:
 release:
   types:
     - published
 push:
   branches:
     - main
 workflow_dispatch:
 
jobs:
 vercel:
   runs-on: ubuntu-latest
   name: "Deploy application"
  
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
         node-version: '14'
         registry-url: https://registry.npmjs.org/
 
     - name: "Deploy application"
       run: |
         prodRun=""
         if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
           prodRun="--prod"
         fi
 
         npx vercel --token ${VERCEL_TOKEN} $prodRun
       env:
         VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Теперь фиксируем изменения и отправляем код на GitHub. Как только код отправлен, GitHub Actions запускает автоматическое развертывание. 

Заключение

Из статьи вы узнали, как настроить GitHub Actions для развертывания проекта на Vercel. Теперь вы имеете представление о GitHub Actions и взаимодействии этой платформы с Vercel. С дополнительными конфигурациями для проекта можно ознакомиться по этой ссылке. 

Читайте также:

• 3 верных способа оптимизировать ревью на GitHub
• Новичок! Ты должен был выучить Git ещё вчера
• Основы CI/CD

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Arctype: How to Create GitHub Actions for Vercel Deployment