GitHub Actions + Vercel: CI/CD для новичка пошагово

Что такое CI/CD

CI/CD — это автоматизированный процесс проверки, сборки и деплоя проекта после изменений в репозитории.

Упрощенно: вы пушите код, система выполняет шаги и публикует результат по заданным правилам.

• CI: проверки и сборка
• CD: доставка и деплой
• Контроль качества до production

Как связаны GitHub Actions и Vercel

GitHub Actions отвечает за workflow в репозитории: когда запускать, какие команды выполнять и какие условия применять.

Vercel отвечает за сборку и публикацию Next.js-приложения, включая preview и production окружения.

Когда хватает обычного автодеплоя Vercel

Для простых проектов часто достаточно встроенной интеграции GitHub → Vercel без отдельного workflow.

GitHub Actions становится нужен, когда требуется дополнительный контроль: кастомные шаги, свои проверки и единый pipeline.

Что делает GitHub Actions

• Запуск на push и pull request
• Установка зависимостей
• Запуск lint и build
• Условный deploy по веткам и правилам

Что делает Vercel

• Сборка Next.js-проекта
• Preview Deploy для проверки изменений
• Production Deploy для main-ветки
• Управление окружениями и проектными настройками

Пошаговая настройка для новичка

Лучше начинать с минимального и стабильного пайплайна.

1. Подготовить проект локально

Если локальная сборка нестабильна, CI/CD только зафиксирует эту проблему, но не решит ее.

• npm install
• npm run lint
• npm run build

2. Подключить репозиторий к GitHub

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

3. Создать workflow файл

Workflow хранится в папке `.github/workflows` и описывает, когда и какие шаги запускать.

4. Запустить базовый pipeline

• Trigger: push / pull_request
• Install dependencies
• Run lint
• Run build
• Deploy

5. Подключить Vercel CLI

Для кастомного CI/CD часто используют Vercel CLI, чтобы явно управлять шагами сборки и деплоя в workflow.

6. Настроить GitHub Secrets

Секреты хранятся в настройках GitHub, а не в коде репозитория.

• VERCEL_TOKEN
• VERCEL_ORG_ID
• VERCEL_PROJECT_ID

7. Разделить preview и production

Безопасная схема: ветки и PR деплоятся в preview, а `main` — в production.

8. Добавить обязательные проверки перед деплоем

• Lint
• Build
• Базовые smoke-checks при необходимости

9. Понять схему vercel pull → vercel build → vercel deploy --prebuilt

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

10. Сначала проверить на preview

Перед production важно убедиться, что workflow стабильно проходит на pull request и preview-ссылках.

Пример рабочей логики CI/CD

• Создаете feature-ветку
• Push запускает GitHub Actions
• Workflow делает lint/build и preview deploy
• Проверяете результат
• Merge в main запускает production deploy

Где это применяется

• Next.js проекты на Vercel
• AI и контентные продукты
• Сервисные сайты и блоги
• Командная разработка с pull request-процессом

Частые ошибки

• Собирать сложный pipeline до стабильного проекта
• Не проверять локальный build перед CI/CD
• Хранить токены вне secrets
• Смешивать preview и production
• Деплоить в прод без проверки preview

Почему это важно

GitHub Actions + Vercel дает воспроизводимый процесс: меньше ручных ошибок, быстрее обратная связь и безопаснее выкладка.

Для новичка это лучший переход от хаотичных деплоев к системной разработке.

Вывод

CI/CD — это практичная последовательность шагов, а не сложная DevOps-магия.

Начинайте с простого workflow, отдельно настраивайте preview и production, и усложняйте pipeline только по мере роста проекта.