Автоматизация тестирования и деплоя Next.js приложений через GitHub Actions

Зачем нужен CI/CD?

Непрерывная интеграция и доставка (CI/CD) позволяют автоматически запускать тесты после каждого коммита или пул реквеста, что помогает выявлять ошибки до их попадания в продакшн.

Структура пайплайна GitHub Actions

Для настройки CI/CD в проекте Next.js можно использовать следующий базовый шаблон:

name: CI/CD
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm test

Деплой проекта

После успешного прохождения тестов приложение может быть развернуто на платформе Vercel:

deploy:
  needs: test
  if: github.ref == 'refs/heads/main'
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: vercel/action@v3
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
        vercel-args: '--prod'

Миграции базы данных

Если проект использует базу данных Prisma ORM, то миграции также могут выполняться автоматически при каждом пуше в основную ветку:

migrate:
  needs: test
  if: github.ref == 'refs/heads/main'
  runs-on: ubuntu-latest
  environment: production
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: '20'
        cache: 'npm'
    - run: npm ci
    - name: Run migrations
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}
      run: npx prisma migrate deploy

Кэширование зависимостей

Кэширование позволяет значительно сократить время сборки приложения за счет повторного использования уже установленных пакетов:

uses: actions/setup-node@v4
with:
  node-version: '20'
  cache: 'npm'

Кроме того, рекомендуется кэшировать результаты сборки Next.js:

path: |
  ~/.npm
  ${{ github.workspace }}/.next/cache
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
restore-keys: |
  ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

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

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

preview:
  if: github.event_name == 'pull_request'
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: vercel/action@v3
      id: deploy
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}