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



Книга 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/[email protected]
- uses: actions/[email protected]
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. С дополнительными конфигурациями для проекта можно ознакомиться по этой ссылке



147   0  
    Ничего не найдено.

Добавить ответ:
Отменить.