+ Запитати

Як налаштувати GitHub Actions для автоматичного деплою Next.js на Vercel?

Вирішено115 переглядівПрограмуванняcicd devops git nextjs
0
0 коментарів

Маю Next.js 14 проект на GitHub. Хочу, щоб при push в main автоматично виконувались тести і — якщо вони пройшли — деплой на Vercel. Як правильно налаштувати workflow?

Питання закрите для нових відповідей.
Експерт обрав найкращою

1 Відповідь

0
denys_itpedia102 0 Коментарі

Vercel і так автоматично деплоїть з GitHub, але якщо хочете додати тести як gate — використайте GitHub Actions перед деплоєм.

Крок 1: відключити автодеплой Vercel на main

У Vercel Dashboard → Project → Settings → Git → Ignored Build Step поставте exit 1 для main branch. Тоді деплой буде тільки з нашого Action.

Крок 2: створіть .github/workflows/deploy.yml

name: Test & Deploy

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: "--prod"

Крок 3: додайте секрети

GitHub → Repo → Settings → Secrets and variables → Actions:

  • VERCEL_TOKEN — згенеруйте на vercel.com/account/tokens
  • VERCEL_ORG_ID — з файлу .vercel/project.json (зʼявиться після vercel link)
  • VERCEL_PROJECT_ID — там же

Що отримуєте

  • Push у main → запускаються тести
  • Тести впали → деплой не йде, ви бачите ❌ у GitHub
  • Тести пройшли → деплой автоматично на production

Бонус: для PR можна додати окремий job, що деплоїть preview-середовище і додає коментар з посиланням.

Експерт обрав найкращою
You are viewing 1 out of 1 answers, click here to view all answers.
Запитати