Эффективное управление артефактами GitHub Actions для развертывания релизов

Вложила ли ваша команда много усилий в ручную упаковку кода? Если да, то пришло время использовать GitHub Actions Artifacts, чтобы ваша команда могла автоматизировать эту процедуру. В то же время вы уменьшите изменчивость выпусков и сэкономите время для работы над другими важными задачами.

GitHub Actions Artifacts позволяет эффективно передавать данные из одного активного задания в другое, исключая повторяющиеся и времязатратные задачи, связанные с развертыванием. В этом руководстве вы узнаете, как использовать и управлять артефактами для развертывания приложения React на Netlify.

Читайте дальше и начинайте создавать последовательные развертывания!

Предварительные требования

Это руководство будет практической демонстрацией. Если вы хотите следовать за ним, убедитесь, что у вас есть простое приложение React и репозиторий GitHub. В этом руководстве используется репозиторий React Counter App.

Создание рабочего процесса непрерывной интеграции и непрерывной поставки (CI/CD)

Когда задание в рабочем процессе GitHub Actions завершается, завершается и обрабатываемые ими данные. Данные, называемые артефактами, могут быть сохранены на странице репозитория после завершения заданий и могут быть загружены с использованием действия upload-artifact.

Но перед использованием артефактов GitHub Actions для развертывания ваших выпусков, вам нужно сначала создать рабочий процесс CI/CD для вашего приложения:

Связано:Как создать конвейер CI/CD с Jenkins

1. Создайте папку .github в корневом каталоге вашего приложения и создайте подпапку под названием workflows.

2. Затем создайте файл рабочего процесса (файл .yml) в папке workflows. Вы можете назвать файл как угодно. Но для этого руководства файл назван ci.yml.

Структура ресурсов файла рабочего процесса должна выглядеть как показано ниже.

3. Добавьте следующий код в файл ci.yml и сохраните изменения. Приведенный ниже код создает рабочий процесс под названием CI с заданием сборки для приложения.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# Рабочий процесс будет запущен при событии push или pull в основную ветку

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# Операционная система для запуска
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# Получить код из репозитория
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. Теперь добавьте и зафиксируйте изменения, а затем отправьте их в ваш удаленный репозиторий GitHub.

Если отправка прошла успешно, вы увидите коммит с янтарно-окрашенным кругом, как показано ниже, указывающим на то, что рабочий процесс запущен.

5. Нажмите на вкладку Actions, чтобы просмотреть рабочий процесс.

6. Нажмите на любые задания сборки на левой стороне и разверните задание Build app. Вы увидите данные задания сборки (статические файлы), которые были сгенерированы. Это файлы, которые вам нужны для развертывания.

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

7. Наконец, добавьте следующий код после выполнения тестов в блоке шагов вашей сборочной задачи.

Ниже приведенный код загружает артефакт с именем production из каталога сборки с использованием действия actions/upload-artifact@v3.

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

# Загрузка артефакта
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

Настройка пользовательского периода хранения артефакта

Артефакты хранятся по умолчанию 90 дней перед стиранием. Но в зависимости от типа репозитория вы можете изменить этот период хранения.

Ниже приведены значения, которые можно установить для настройки пользовательского периода хранения артефакта:

• Частный репозиторий – любое значение от 1 до 400 дней.
• Публичный репозиторий – только значение от 1 до 90 дней.

Чтобы установить пользовательский период хранения артефакта, обновите ваш файл YAML рабочего процесса, включив retention-days: 2 в вашем шаге # Загрузка артефакта.

# Загрузка артефакта
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # Настройка периода хранения артефакта
		retention-days: 2

Альтернативно, настройте период хранения артефакта следующим образом через GitHub:

• Перейдите на вкладку Настройки в репозитории.
• Нажмите на Действие (левая панель), чтобы развернуть выпадающий список, и выберите Общее.
• Введите количество дней, которое вы хотите сохранить артефакт в разделе Сохранение артефакта и журнала, показанном ниже, и нажмите «Сохранить».

Импорт проекта из репозитория Git в Netlify

Теперь сборочный артефакт можно получить в другой задаче в рабочем процессе, загрузив его, так как у вас есть шаг по загрузке артефакта, что сокращает время завершения рабочего процесса. Вы добавите задачу развертывания в свой рабочий процесс, и одним из шагов в этой задаче будет загрузка загруженного элемента.

Но прежде чем обновить свой рабочий процесс, вы настроите Netlify для развертывания приложения:

1. Откройте свой любимый веб-браузер, перейдите по адресу Netlify и войдите в свой аккаунт GitHub.

2. После входа нажмите «Добавить новый сайт» в разделе Сайты и выберите «Импортировать существующий проект», чтобы начать импорт вашего проекта.

3. Нажмите GitHub, так как вы будете использовать репозиторий, созданный для этого учебного пособия на GitHub. Появится всплывающее окно, где вы разрешите доступ Netlify к вашей учетной записи GitHub.

4. После авторизации найдите и выберите репозиторий, из которого вы хотите импортировать проект.

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

Щелкните по кнопке “Развернуть сайт” после настройки параметров сборки, и вы увидите, что сайт разворачивается. После развертывания будет сгенерирована ссылка на живой сайт.

Если вы оставили поле команды сборки пустым, переход по ссылке приведет к отображению страницы 404, так как приложение не было собрано.

6. Затем щелкните на “Настройки сайта”, чтобы просмотреть информацию о сайте (шаг шестой).

7. Наконец, на странице с подробной информацией о сайте запишите ID сайта ниже в разделе “Информация о сайте” для последующего использования.

Создание персонального токена доступа

Теперь, когда у вас есть идентификатор сайта, вам нужно получить токен доступа. Персональный токен доступа предоставит доступ к вашей учетной записи Netlify, чтобы действия GitHub могли выполнять развертывание на Netlify.

1. Щелкните на значке профиля (в правом верхнем углу) и выберите “Настройки пользователя”, чтобы получить доступ к настройкам своего профиля.

2. На новой странице нажмите “Приложения” (в левой панели) → “Новый токен доступа” (в разделе “Персональные токены доступа”), чтобы начать создание нового токена доступа.

3. На новой странице введите описательное имя для токена и нажмите “Сгенерировать токен”.

4. Теперь скопируйте токен в надежное место.

Защита идентификатора сайта и токена доступа путем создания секретов

Теперь, когда у вас есть идентификатор сайта и токен доступа от Netlify, вы можете добавить их в свой репозиторий для использования в рабочем процессе. Но сначала вам нужно защитить свой идентификатор сайта и токен доступа, создав секреты.

Связано:Запуск переменных среды и секретов GitHub Actions

1. Перейдите в свой репозиторий GitHub в вашем браузере.

2. Затем перейдите на вкладку “Settings” → “Secrets” (левая панель) → “Actions” (под “Secrets”), чтобы получить доступ к списку доступных действий в вашем репозитории.

3. Нажмите “New repository secret” на странице секретов Actions, чтобы начать добавление секрета.

4. Теперь укажите описательное имя для нового секрета. В данном руководстве используется имя секрета NETLIFY_AUTH_TOKEN.

Добавьте свой токен доступа в качестве значения и нажмите “Add secret”, чтобы создать новый секрет.

5. Наконец, повторите четвертый шаг, но на этот раз добавьте секрет для идентификатора вашего сайта.

После добавления вы увидите секреты в разделе “Repository secrets”, как показано ниже.

Загрузка и развертывание артефакта в Netlify

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

1. Обновите свой рабочий процесс, добавив код ниже, содержащий задание развертывания.

Следующий код содержит шаги для загрузки загруженного артефакта и еще один шаг для его развертывания на Netlify.

Вы можете найти полный код файла ci.yml в репозитории GitHub ATA.

deploy:
  name: Deploy #Имя работы
  needs: build # Для успешного выполнения сборочной задачи необходимо успешное выполнение задачи развертывания
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# Загружает загруженные файлы
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# Шаги для развертывания на Netlify
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# Секреты для аутентификации
    with:
      args: deploy --dir=build --prod

2. Затем добавьте и отправьте изменения в удаленный репозиторий.

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

После фиксации нажмите на последний запуск, чтобы просмотреть более подробную информацию.

Если задачи выполняются успешно, вы увидите зеленую отметку рядом с задачами и производственный артефакт внизу страницы.

3. Теперь перейдите на задачу развертывания (левая панель) и разверните задачу развертывания на Netlify. Вы увидите вывод шага, который содержит URL веб-сайта.

Щелкните по URL веб-сайта, чтобы проверить, работает ли сайт и доступен ли он.

URL автоматически открывается в новой вкладке вашего веб-браузера, как показано ниже. Этот вывод указывает на то, что ваш сайт работает правильно.

Удаление неиспользуемых артефактов для экономии места

После каждого выпуска вы используете больше дискового пространства при загрузке и загрузке новых версий. Как можно сэкономить место? Удаление неиспользуемых артефактов – наиболее жизнеспособное решение. Необходимо ограничивать количество артефактов выпуска, находящихся на каждом сервере, чтобы предотвратить накопление тысяч выпусков и заполнение диска.

Помимо использования настройки периода хранения для удаления артефактов через некоторое время, вы также можете удалить артефакт со страницы рабочих процессов на GitHub:

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

Теперь нажмите OK в окне (верхнее), чтобы подтвердить удаление артефакта.

Обратите внимание, что артефакт больше не отображается на странице, что подтверждает его успешное удаление.

Заключение

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

Владея этими новыми знаниями, почему бы не воспользоваться действиями GitHub для автоматизации рабочего процесса вашего следующего проекта?