Деплой в Vercel

В Vercel существует три основных режима развертывания: Production (Продакшн), Preview (Превью) и Development (Разработка). Они представляют собой изолированные среды с разными целями, конфигурациями и жизненным циклом.

Preview Mode (Режим превью)

Это главная особенность рабочего процесса Vercel, предназначенная для проверки изменений до их попадания к пользователям.

Как работает: Каждый раз, когда вы отправляете коммит в ветку, отличную от основной (например, main или production), или создаете Pull Request на GitHub/GitLab/Bitbucket, Vercel автоматически создает полноценное независимое развертывание. Ему присваивается уникальный URL вида https://my-project-git-feature-username.vercel.app.

Особенности интеграции с CMS: Для работы с headless CMS (Contentful, Sanity, Strapi) это критически важно. В настройках проекта можно задать разные переменные окружения:

-- Production: использует токен доступа к опубликованному контенту.

-- Preview: использует токен доступа к черновикам. Это позволяет редакторам открывать ссылку из PR и видеть не только новые компоненты кода, но и неопубликованные статьи прямо в реальном интерфейсе сайта через Draft Mode.

Изоляция: Каждое превью-развертывание имеет свой собственный CDN-кэш, серверные функции и логи. Оно никак не влияет на основную версию сайта и другие открытые PR. Если у вас открыто 10 пулл-реквестов, будет работать 10 независимых версий приложения.

Автоматизация: Ссылки на эти деплои автоматически публикуются в комментариях к вашему Pull Request, что упрощает ревью дизайнерам, тестировщикам и менеджерам продукта.

Production Mode (Продакшн)

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

Как работает: Развертывание срабатывает при слиянии (merge) ветки в основную (по умолчанию — main) или при ручном запуске команды vercel --prod. После успешного билда Vercel атомарно переключает ваш рабочий домен (например, mysite.com) на новую версию.

Производительность: Версия оптимизирована под максимальную скорость. Статические страницы лежат на глобальном Edge-сети Vercel. Время ответа сервера (TTFB) обычно составляет менее 50 мс по всему миру.

Переменные окружения: Используются боевые API-ключи, платежные шлюзы и токены опубликованного контента. Ошибочные данные здесь могут привести к реальным финансовым или репутационным потерям.

Development Mode (Локальная разработка)

Это режим работы на вашем компьютере (localhost).

Как работает: Запускается командой next dev (для Next.js) или vercel dev. Он эмулирует среду выполнения Vercel (серверless-функции, middleware) локально.

Отличия:

-- Код перезагружается мгновенно при сохранении файлов (Hot Reload).

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

-- Переменные подтягиваются из файла .env.local, который никогда не попадает в репозиторий.

Сводная таблица отличий

Параметр	Development	Preview	Production
Где исполняется	Локальный компьютер разработчика	Облако Vercel (изолированный инстанс)	Облако Vercel (основной домен)
Триггер создания	Команда vercel dev / next dev	Пуш в feature-ветку, создание PR	Мерж в main или команда vercel --prod
URL	localhost:3000	Уникальный авто-генерируемый URL	Ваш кастомный домен (yoursite.com)
Цель	Написание и отладка кода	Ревью кода, QA, согласование с заказчиком	Работа реальных пользователей
Переменные env	Локальные (.env.local)	Черновики CMS, песочницы внешних API	Боевые ключи, опубликованный контент CMS
Кэширование	Отключено или минимальное	Полноценный edge-кэш (сбрасывается при новом коммите)	Долговременный агрессивный кэш + ISR

Как они работают вместе (типичный workflow)

1.Разработчик пишет код локально (Development).
2.Закончив задачу, он пушит ветку в GitHub. Vercel тут же строит Preview. Тестировщик проверяет функционал, а редактор контента убеждается, что новая статья выглядит корректно в верстке еще до публикации.
3.После одобрения изменения сливаются в main. Vercel собирает Production и обновляет живой сайт за несколько секунд без простоя.

О режимах деплоя в Vercel