Как удалить предварительные версии развертываний Vercel из GitHub Actions

Содержание

Шаг 1 - Соберите необходимые идентификаторы
Шаг 1 - Создайте переменные окружения в GitHub Actions
Шаг 2 - Настройка рабочего процесса deploy_preview.yml.
Шаг 3 - Настройка рабочего процесса и сценария remove_deploy_preview.yml
1. Bash-скрипт для удаления сборок из Vercel
2. Рабочий процесс развертывания

Недавно я начал свое путешествие по изучению NextJS и платформы Vercel. Как опытный разработчик React, за последние 6 лет я разработал несколько фронтенд-приложений с использованием этой библиотеки, и очень приятно видеть, как вся экосистема React строится/следует за тем, что говорит компания, и взаимодействует с сообществом. Будущее за React, и любое сходство с PHP - не случайность.

Итак, давайте начнем. Поскольку я строю свой стартап, мы решили создать фронтенд + бэкенд с помощью NextJS. Это лучшее решение для нашего продукта - монолит, включающий бэкенд и фронтенд… и некоторые другие преимущества, такие как SSR и кэширование. Так как мы хотим иметь быструю итерацию в продукте, наличие такого сервиса, как Vercel, помогает нам создавать наш продукт, не заботясь об инфраструктуре (AWS, GCP). Цены очень скромные, честно говоря, я считаю, что заплатить $20 за инфраструктуру полного стека с включенным экземпляром Postgres вполне достойно.

Вместо того чтобы использовать их автоматическую сборку после переноса коммита в ветку, я решил отключить эту функцию и запускать сборку из GitHub Actions.

Шаг 1 - Соберите необходимые идентификаторы

Для взаимодействия с Vercel API вам нужны значения projectId и teamId. Чтобы получить эти значения:

Перейдите на приборную панель Vercel и выберите команду

Нажмите на настройки

Скопируйте идентификатор вашей команды

Выберите проект, над которым вы работаете, нажав на Обзор

Нажмите в настройках

Скопируйте идентификатор вашего проекта

Создайте токен администратора Создайте токен администратора, посетив страницу Tokens. Не забудьте выбрать опцию Full Scope. Это важно, поскольку данный токен будет отвечать за удаление развертываний.

Подводя итог, можно сказать, что вам понадобятся 3 токена от vercel:

Токен	Описание	Имя переменной
VERCEL_ORG_ID	Это идентификатор команды	VERCEL_ORG_ID
VERCEL_PROJECT_ID	Это идентификатор проекта	VERCEL_PROJECT_ID
VERCEL_TOKEN	Это токен ключа API	VERCEL_TOKEN

Шаг 1 - Создайте переменные окружения в GitHub Actions

Зайдите в настройки репозитория и создайте там переменные окружения.

Шаг 2 - Настройка рабочего процесса `deploy_preview.yml`.

Зайдите в свой проект, создайте новый рабочий процесс с именем deploy_preview.yml в папке .github/workflows.
Вставьте следующее содержимое рабочего процесса:

имя: Развертывание предварительного просмотра Vercel

env:
  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

разрешения:
  содержимое: читать
  статусы: запись
  pull-requests: write

на:
  pull_request:
    типы:
      - открытый
      - синхронизировать

задания:
  deploy-preview:
    работает на: ubuntu-latest
    шаги:
      - использует: actions/checkout@v2

      - имя: Извлечь имя ветки
        оболочка: bash
        выполнить: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
        id: extract_branch

      - name: Hash имя ветки
        используется: pplanel/hash-calculator-action@v1.3.1
        id: hash_branch
        с:
          input: ${{ steps.extract_branch.outputs.branch }}
          метод: MD5

      - имя: Установить Vercel CLI
        выполнить: npm install --global vercel@latest

      - название: Зависимости кэша
        используется: actions/cache@v2
        id: cache-npm
        с:
          путь: ~/.npm
          ключ: npm-${{ hashFiles('package-lock.json') }}
          restore-keys: npm-

      - имя: Установить зависимости
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        выполнить: npm ci --ignore-scripts

      - имя: Вытащить информацию об окружении Vercel
        run: vercel pull --yes --environment=preview --token=$VERCEL_TOKEN

      - имя: Развертывание артефактов проекта в Vercel
        id: vercel
        env:
          META_TAG: ${{ steps.hash_branch.outputs.digest }}-${{ github.run_number }}-${ github.run_attempt}}
        run: |
          vercel --version
          vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
          vercel build --token=$VERCEL_TOKEN
          vercel deploy --prebuilt --archive=tgz --token=$VERCEL_TOKEN --meta base_hash=${{ env.META_TAG }}

          vercel ls --token=$VERCEL_TOKEN --meta base_hash=${{ env.META_TAG }} &> vercel-output
          url=$(cat vercel-output | grep http | awk '{print $2}')
          echo "Новый URL-адрес предварительного просмотра: $url"
          echo "META_TAG=$META_TAG"
          echo "VERCEL_URL=$url" >> "$GITHUB_OUTPUT"

      - использует: mshick/add-pr-comment@v2
        с:
          сообщение: |
            Ваша сборка завершена!

            [Предварительное развертывание](${{ steps.vercel.outputs.VERCEL_URL }})

Вход в полноэкранный режим

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

Извлечение содержимого PR в рабочую директорию.
Получите имя ветки.
Создайте уникальный хэш для имени ветки. Это важно, потому что Vercel разрешает использовать мета-теги в сборках, это поможет нам позже определить, когда нужно будет удалить все предварительные развертывания из определенной ветки.
Установите Vercel CLI.
Проверьте кэш для модулей npm (ускорение сборки).
Установите зависимости, если необходимо
Извлеките переменные окружения, определенные в Vercel
Сборка и развертывание артефактов. Обратите внимание на переменную META_TAG. Это важно, так как она будет использоваться в качестве метаданных для идентификации каждого развертывания превью.
Прокомментируйте URL-адрес предварительного просмотра.

В рамках этого шага вы создадите автоматические ссылки на предварительный просмотр при каждом запуске в вашу ветку.

Шаг 3 - Настройка рабочего процесса и сценария `remove_deploy_preview.yml`

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

Bash-скрипт для удаления сборок из Vercel

В корневой папке проекта создайте файл scripts/delete-deployment-preview.sh.

#!/bin/bash
# Установите опцию pipefail.
set -o pipefail

# Получение конечных точек API Vercel.
GET_DEPLOYMENTS_ENDPOINT="https://api.vercel.com/v6/deployments"
DELETE_DEPLOYMENTS_ENDPOINT="https://api.vercel.com/v13/deployments"

# Создайте список развертываний.
deployments=$(curl -s -X GET "$GET_DEPLOYMENTS_ENDPOINT/?projectId=$VERCEL_PROJECT_ID&teamId=$VERCEL_ORG_ID" -H "Authorization: Bearer $VERCEL_TOKEN ")

# Отфильтруйте список развертываний по meta.base_hash === meta tag.
filtered_deployments=$(echo $deployments | jq --arg META_TAG "$META_TAG" '[.deployments[] | select(.meta.base_hash | type == "string" and contains($META_TAG)) | .uid] | join(",")')
filtered_deployments="${filtered_deployments//\"/}" # Удалите двойные кавычки

# Очистите значения из filtered_deployments
IFS=',' read -ra values <<<"$filtered_deployments"

echo "META_TAG ${META_TAG}"
echo "Отфильтрованные развертывания ${filtered_deployments}"

# Итерация по списку отфильтрованных развертываний.
for uid in "${values[@]}"; do
    echo "Удаление ${uid}"

    delete_url=${DELETE_DEPLOYMENTS_ENDPOINT}/${uid}?teamId=${VERCEL_ORG_ID}
    echo $delete_url

    # Выполните DELETE-запрос к конечной точке /v13/deployments/{id}.
    curl -X DELETE $delete_url -H "Authorization: Bearer $VERCEL_TOKEN"

    echo "Удалено!"
done

Вход в полноэкранный режим

Не забудьте запустить chmod: chmod a+x ./scripts/delete-deployment-preview.sh.

Рабочий процесс развертывания

Создайте файл remove_deploy_preview.yml в папке .github/workflows и вставьте в него следующее содержимое:

имя: Удалить предварительный просмотр развертывания

разрешения:
  содержимое: читать
  статусы: запись
  pull-requests: write

env:
  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  pull_request:
    типы:
      - закрытый

задания:
  delete-deployments:
    работает на: ubuntu-latest
    шаги:
      - uses: actions/checkout@v2

      - имя: Извлечь имя ветки
        оболочка: bash
        выполнить: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
        id: extract_branch

      - name: Hash имя ветки
        используется: pplanel/hash-calculator-action@v1.3.1
        id: hash_branch
        с:
          input: ${{ steps.extract_branch.outputs.branch }}
          метод: MD5

      - имя: Вызов скрипта delete-deployment-preview.sh
        env:
          META_TAG: ${{ steps.hash_branch.outputs.digest }}
        run: |
          bash ./scripts/delete-deployment-preview.sh

Вход в полноэкранный режим

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

Рабочий процесс состоит из следующих шагов:

Загрузите содержимое PR в рабочее пространство.
Получение имени ветви запроса.
Создайте для нее хэш.
Выполните скрипт bash, который мы создали ранее с переменной окружения META_TAG.

Сценарий выполнит GET-запрос к конечной точке https://api.vercel.com/v6/deployments и получит все имеющиеся у вас предварительные развертывания. Затем мы используем jq для создания списка uid, который совпадает с meta.base_hash, который мы передали ранее при создании нового превью.

Если есть свободные развертывания, мы удаляем их. Если нет, то все в порядке, не стоит беспокоиться (если только у вас вообще ничего нет).

На этом все, надеюсь, вы разберетесь с этим. Оставляйте комментарии, если вам понравилось, и следите за мной (за моими жалобами) в Twitter.

dev_reis on Twitter dev_reis on Instagram

Поделиться:

Шаг 1 - Соберите необходимые идентификаторы

Шаг 1 - Создайте переменные окружения в GitHub Actions

Шаг 2 - Настройка рабочего процесса deploy_preview.yml.

Шаг 3 - Настройка рабочего процесса и сценария remove_deploy_preview.yml

Bash-скрипт для удаления сборок из Vercel

Рабочий процесс развертывания

Поделиться:

Шаг 2 - Настройка рабочего процесса `deploy_preview.yml`.

Шаг 3 - Настройка рабочего процесса и сценария `remove_deploy_preview.yml`