раздел 01

Деплой из Git за минуты

Что это

Деплой - это выкладка кода на хостинг, чтобы он стал живым сайтом. На Vercel деплой завязан на Git: вы подключаете репозиторий (GitHub, GitLab или Bitbucket), и дальше каждое изменение в коде Vercel сам забирает, собирает и публикует. Руками ничего копировать не надо.

Зачем это вам

  • Автоматизм. Сделали git push - через минуту сайт обновился. Без отдельного шага «выложить».
  • История и откат. Каждый деплой привязан к коммиту. Что-то сломалось - откатываетесь на прошлый деплой в один клик.
  • Ничего не забудете. Источник правды - репозиторий, а не файлы, которые вы куда-то скопировали.

Как это сделать

  1. Залейте код в Git (GitHub проще всего). Если работали с AI-инструментом - у проекта уже есть репозиторий.
  2. Зайдите на Vercel и войдите через аккаунт GitHub.
  3. Import Project - выберите свой репозиторий из списка.
  4. Vercel сам определит фреймворк (Next.js, Vite и т.п.) и подставит настройки сборки. Обычно менять ничего не нужно.
  5. Нажмите Deploy - подождите сборку. Получаете ссылку на живой сайт.

Дальше каждый push в основную ветку запускает новый деплой автоматически.

Preview против production

Ключевая вещь Vercel:

  • Production - боевой деплой основной ветки (например, main). Это сайт, который видят пользователи.
  • Preview - отдельный деплой для каждой другой ветки или pull request. Своя временная ссылка, на которой можно проверить изменения, не трогая боевой сайт.

То есть на каждую фичу вы получаете отдельный «черновой» сайт по ссылке. Проверили, всё хорошо - влили в main, и оно поехало в production.

Пример

Вы собрали лендинг с AI, залили в GitHub. Импортировали в Vercel, нажали Deploy - через минуту получили ссылку проект.vercel.app, отправили клиенту. Клиент попросил поменять заголовок - вы создали ветку, поправили, запушили. Vercel дал preview-ссылку с новым заголовком. Клиент одобрил - влили в main, боевой сайт обновился сам.

Антипаттерны

  • Деплоить, перетаскивая файлы вручную. Теряете историю и откат; смысл Vercel - в Git.
  • Проверять рискованные изменения сразу на production. Для этого есть preview-ветки.
  • Коммитить сломанную сборку в main. Боевой сайт тут же обновится на нерабочий. Проверяйте на preview.

Подразделы