Как интегрировать Vercel и Heroku с GitHub Actions для приложений Next.js

Вы когда-нибудь задавались вопросом, как интегрировать Vercel или Heroku с GitHub Actions для приложений Next.js? Не ищите дальше, вы попали по адресу!

В этой статье мы рассмотрим, как создать базовый рабочий процесс GitHub Actions для приложений Next.js, и как интегрировать Vercel и Heroku в GitHub Actions, чтобы развертывание на Vercel и Heroku стало возможным через GitHub Actions. Обратите внимание, что в этом руководстве мы будем использовать приложение Next.js.

Настройка

В этом учебнике мы будем использовать следующее приложение: https://github.com/ShehanAT/NextJs-GitHub-Actions-CI-Testing-App.

Вы можете начать с форка этого приложения на GitHub, а затем клонировать его локально.

Просто импортируйте папку проекта в свое рабочее пространство и выполните команду npm install, как только вы cd войдете в него.

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

Теперь, когда мы закончили с настройкой проекта, давайте перейдем к основной теме.

Разработка

Этот учебник будет разделен на три основные темы:

1. Как настроить базовый конвейер Next.js GitHub Actions
2. Как интегрировать Vercel с GitHub Actions для приложений Next.js
3. Как интегрировать <add_interesting_feature_here> с помощью GitHub Actions для приложений Next.js

Как настроить базовый конвейер GitHub Actions для Next.js

Настройка базового конвейера GitHub Actions довольно проста. Ниже приведены необходимые шаги:

1. Перейдите на вкладку «Действия» на странице репозитория GitHub. Вот скриншот того, как она должна выглядеть:

Рисунок 1: Вкладка «Действия» GitHub

1. Нажмите на ‘Новый рабочий процесс’
2. Выберите ‘Node.js’ и нажмите кнопку ‘Настроить’.
3. В следующем виде страницы редактирования единственное изменение, которое необходимо сделать, это установить первую команду run на npm install. Это гарантирует, что зависимости проекта будут собраны перед запуском приложения:

...
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
    uses: actions/setup-node@v3
    with:
    node-version: ${{ matrix.node-version }}
    cache: 'npm'
- run: npm install
- run: npm run build --if-present
- run: npm test
...

1. После внесения вышеуказанных изменений нажмите ‘Start Commit’ -> ‘Commit new file’.
2. Вернитесь в IDE, откройте терминал, cd в корневой каталог проекта и выполните команду pull из удаленного репозитория: git pull origin master.
3. Теперь вы увидите файл .github/workflows/node.js.yml, созданный в папке проекта. Для того чтобы запустить это действие GitHub Action, нам необходимо выполнить push в удаленный репозиторий. Для этого выполните следующие команды:

git add * // or `git add .github/workflows/node.js.yml` if your workflow file is not being added by Git
git commit -m 'added GitHub Actions workflow file'
git push origin master

1. Перейдите на вкладку «Действия» репозитория GitHub. Подождите пару минут, пока рабочий процесс GitHub Actions завершится, и вы должны увидеть страницу успеха, как показано ниже:

Рисунок 2: Страница GitHub Actions, показывающая успешное завершение рабочего процесса

Рисунок 3: Детальная страница GitHub Actions, показывающая успешное завершение рабочего процесса

Вот так можно настроить базовый рабочий процесс GitHub Actions для приложений Next.js!

Как интегрировать Vercel с GitHub Actions для приложений Next.js

Существуют также способы интеграции Vercel с GitHub Actions. Вот шаги одного из таких способов:

1. Сначала войдите в Vercel и откройте панель инструментов. Нажмите «Новый проект».

Рисунок 4: Страница приборной панели Vercel, выделяющая кнопку ‘Новый проект’

1. На следующей странице выберите репозиторий GitHub, содержащий приложение вашего проекта. Если вы только клонировали приложение GitHub, о котором я говорил в разделе «Настройка», то просто создайте форк этого репозитория под своей учетной записью GitHub, клонируйте этот репозиторий и используйте его для целей этого шага.
2. На следующем экране нажмите ‘Deploy’.
3. Теперь, в окне терминала (или командной строки, если вы используете Windows), вам нужно установить пакет vercel-cli, выполнив следующую команду: npm install vercel -g.
4. Затем выполните команду vercel, чтобы завершить интеграцию Vercel с только что созданным проектом Vercel. Ниже приведен снимок экрана этого процесса:

Рисунок 5: Процесс интеграции проекта Vercel CLI

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

Как интегрировать Heroku с помощью GitHub Actions для приложений Next.js

1. Добавьте этот фрагмент кода в yaml-файл рабочего процесса

    steps:
    - uses: actions/checkout@v3
    - name: Deploy to Heroku
      uses: akhileshns/heroku-deploy@v3.7.8
      with:
        args: deploy --dir=build --prod
        heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
        heroku_app_name: 'nextjs-github-actions-heroku'
        heroku_email: '<enter_your_email>@gmail.com'

Чтобы общий файл рабочего процесса выглядел следующим образом:

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
    - uses: actions/checkout@v3
    - name: Deploy to Heroku
      uses: akhileshns/heroku-deploy@v3.7.8
      with:
        args: deploy --dir=build --prod
        heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
        heroku_app_name: 'nextjs-github-actions-heroku'
        heroku_email: '<enter_your_email>@gmail.com'

1. Создайте новый проект Heroku на сайте Heroku. Следуйте приведенным шагам для создания проекта Heroku. Здесь показан снимок кнопки ‘Создать новое приложение’:

Рисунок 6: Приборная панель Heroku Кнопка создания нового проекта

1. Скопируйте ключ API Heroku со страницы настроек аккаунта Heroku и задайте его в качестве переменной env в разделе Actions secrets на GitHub repo. Вы можете найти свой ключ API Heroku, перейдя на страницу настроек аккаунта и найдя раздел API Key. Затем на вкладке Settings репозитория GitHub вы найдете ссылку Secrets -> Actions. Перейдите на эту страницу и добавьте новую пару ключ-значение. Ключ должен быть 'HEROKU_API_KEY', а значение — скопированное значение из Heroku.
2. Теперь вернитесь в терминал (или командную строку, если вы работаете в Windows). Если у вас не установлен Heroku CLI, вы можете установить его, следуя инструкциям, приведенным в этой ссылке: https://devcenter.heroku.com/articles/heroku-cli. Теперь введите heroku login в локальном Терминале и завершите процесс входа.
3. Теперь вам нужно добавить удаленный Git URL Heroku в ваш локальный репозиторий с помощью команды:

heroku git:remote -a name-of-your-heroku-app

Вы можете найти название вашего приложения Heroku в Heroku Dashboard

1. Затем выполните следующие команды, чтобы отправить обновленный yaml-файл рабочего процесса в удаленный репозиторий GitHub

git add *
git commit -m 'Added akhileshns/heroku-deploy step to node.js.yml GA workflow'
git push origin master

1. Наконец, перейдите на вкладку «Действия» на веб-странице вашего репозитория GitHub, и вы должны увидеть успешное завершение рабочего процесса и успешное развертывание на Heroku, как показано на следующих скриншотах:

Рисунок 7: Страница GitHub Actions, показывающая успешное завершение рабочего процесса

Рисунок 8: Приборная панель Heroku показывает успешное развертывание

Ну вот и все! Надеюсь, теперь вы сможете заставить эту функцию работать.

Заключение

Спасибо, что прочитали эту статью!

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

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею и не забудьте следить за мной в Twitter и GitHub, связаться со мной в LinkedIn и подписаться на мой канал YouTube.