Vercel: импорт за минуту
Урок 13 из 26 курса «Вайбкодинг: курс с нуля». Бесплатно, с анимациями и тестом.
Vercel и Next.js
Vercel: хостинг, который особенно любят фронтенд-разработчики. Эта же компания делает Next.js, популярный фреймворк, то есть готовый каркас для сайтов на JavaScript. Многие ИИ-конструкторы и агенты по умолчанию создают проект именно на Next.js. Пример: ты собрал в конструкторе портфолио для поступления на дизайнера и перенёс код на GitHub. Такой проект Vercel понимает с полуслова.
Импорт из GitHub в три шага
Путь на схеме слева направо. Импорт: входишь через GitHub и выбираешь репозиторий с портфолио. Настройки найдены: Vercel сам определяет фреймворк, команду сборки и папку с готовыми файлами, обычно тут ничего трогать не надо. Deploy: запускаешь, идёт сборка. В конце получаешь ссылку на сайт, которую уже можно кидать друзьям. Своё имя сайта подключишь позже, в уроке про домены.
Превью для каждого Pull Request
Дальше всё как в уроке про деплой: push в main обновляет живой сайт. А каждый Pull Request получает свою превью-ссылку, это чип на схеме. Пример: агент в ветке переделал страницу с работами. Ты открываешь превью на телефоне и проверяешь. В Vercel к превью можно оставить комментарий прямо поверх страницы: «эта картинка обрезана». Всё исправлено? Делаешь merge.
Переменные окружения
Переменные окружения (env vars): настройки и ключи, которые хостинг передаёт коду при запуске, вместо того чтобы хранить их в репозитории. В Vercel их задают отдельно для трёх окружений, это панель на схеме. Production: живой сайт. Preview: превью-ссылки. Development: запуск на твоём компьютере. Пример: в Preview тестовый ключ оплаты, в Production настоящий. Поменял переменную: сделай новый деплой.
Откат в один клик
Каждый деплой остаётся в списке, это ряд внизу схемы. Пример: ты сделал merge, а на живом сайте пропали все работы. Не проси ИИ чинить в спешке прямо в main. Жмёшь Rollback у прошлого рабочего деплоя, и он почти сразу снова становится живым сайтом, без новой сборки. Потом спокойно ищешь ошибку в ветке. Короче: сначала откат, потом починка.
Vercel или Cloudflare?
Для первого сайта подойдут оба: подключил GitHub, получил сборку, превью и живой сайт, как на схеме. Vercel: выбор по умолчанию для проектов на Next.js, которые часто делают конструкторы. Cloudflare: сильнее в DNS, защите и Workers. Не уверен? Бери тот, где проект собрался без проблем. Бесплатный тариф обычно есть, лимиты смотри на сайте. Проверь, доступен ли сервис в твоей стране. Потренируйся в симуляторе Vercel.
Проверь себя
- Что Vercel делает сразу после импорта репозитория?
Правильный ответ: Сам находит фреймворк и настройки сборки. Vercel распознаёт фреймворк, команду сборки и папку с файлами. Домен подключают отдельно, когда захочешь. - Новая версия сломала живой сайт. Что сделать первым делом?
Правильный ответ: Откатиться на прошлый рабочий деплой. Rollback почти сразу возвращает рабочую версию без новой сборки. Чинить потом спокойно, в ветке. - Зачем задавать разные env vars для Production и Preview?
Правильный ответ: Чтобы превью не трогало настоящие ключи. В Preview можно держать тестовые ключи, а настоящие только в Production. Тогда проверка в ветке не тратит реальные деньги и данные.