Как выложить сайт на Vercel
Vercel — один из самых удобных способов опубликовать сайт, лендинг, блог, Next.js-проект или AI MVP. В этом гайде разберём полный путь: как импортировать проект из GitHub, проверить build settings, добавить environment variables, запустить deploy, подключить домен и откатиться на стабильную версию, если production сломался.
Когда Vercel подходит для публикации сайта
Vercel хорошо подходит для фронтенд-проектов, Next.js-приложений, лендингов, блогов, документации и MVP.
Главная идея Vercel — связать проект с GitHub и автоматически публиковать новую версию после изменений в коде.
Для AIWEBNET workflow Vercel удобен тем, что позволяет быстро запускать проекты, проверять preview deployments и откатывать неудачные изменения.
- Подходит для Next.js, React, лендингов, блогов и frontend-heavy проектов.
- Удобен для MVP и быстрых тестов гипотез.
- Хорошо работает со связкой GitHub → Vercel → production domain.
- Позволяет смотреть build logs и быстро находить ошибки.
- Даёт preview deployments для проверки изменений до production.
Что подготовить перед deploy
Перед импортом проекта в Vercel нужно убедиться, что проект можно собрать локально и что все важные настройки готовы.
Если проект использует API-ключи, базу данных, Telegram-бота, OpenAI API или CMS, переменные окружения нужно будет добавить в Vercel отдельно.
- GitHub repository с проектом.
- package.json с командами запуска и сборки.
- Рабочая production-сборка локально.
- Список environment variables.
- Понимание, какая branch будет production.
- Домен, если сайт должен открываться на своём адресе.
Шаг 1. Проверьте проект локально
Не стоит отправлять проект в Vercel, если он не проверен локально. Ошибка, которая есть в проекте до deploy, почти всегда проявится и в production.
Особенно важно проверить production-сборку, а не только режим разработки.
- Запустите установку зависимостей.
- Проверьте локальный запуск проекта.
- Запустите production build.
- Исправьте ошибки TypeScript, import, lint и routing.
- Проверьте, что главная и внутренние страницы открываются.
- Убедитесь, что секреты не попали в код.
Шаг 2. Импортируйте проект из GitHub
Основной сценарий деплоя на Vercel — импорт проекта из GitHub. После подключения репозитория Vercel сможет автоматически запускать сборку при новых commit.
В интерфейсе Vercel названия кнопок могут немного отличаться, но логика обычно одна: New Project → Import Repository → Deploy.
- Откройте Vercel Dashboard.
- Нажмите New Project.
- Выберите GitHub как источник.
- Найдите нужный repository.
- Нажмите Import.
- Проверьте, что выбрана правильная branch.
- Перейдите к настройкам проекта перед первым deploy.
Шаг 3. Проверьте Build Settings
Vercel часто сам определяет framework preset, но настройки всё равно нужно проверить. Неправильная build command — одна из частых причин failed deployment.
Команды зависят от package.json. Если в проекте нет нужного script, Vercel не сможет собрать сайт корректно.
- Проверьте Framework Preset.
- Проверьте Build Command.
- Проверьте Install Command.
- Проверьте Output Directory, если проект не стандартный.
- Убедитесь, что package.json есть в корне проекта.
- Если проект в monorepo, проверьте Root Directory.
Шаг 4. Добавьте environment variables
Environment variables — это значения, которые нужны проекту в production: API keys, URL базы данных, токены, секреты интеграций.
Файл .env.local обычно используется только локально. Vercel не берёт его автоматически, поэтому production-переменные нужно добавить в настройках проекта.
- Откройте Project Settings в Vercel.
- Найдите раздел Environment Variables.
- Добавьте нужные ключи и значения.
- Проверьте, для какой среды они добавлены: Production, Preview или Development.
- После изменения переменных сделайте redeploy.
- Никогда не вставляйте секретные ключи прямо в публичный код.
Шаг 5. Запустите первый deploy
После проверки build settings и environment variables можно запускать deploy. Если всё настроено правильно, Vercel соберёт проект и выдаст production URL.
Если deploy упал, не нужно угадывать причину. Сначала откройте build logs: там обычно видно, на каком шаге произошла ошибка.
- Нажмите Deploy.
- Дождитесь окончания сборки.
- Если build успешен, откройте production URL.
- Если build failed, откройте build logs.
- Найдите первую реальную ошибку в логах.
- Исправьте код или настройки.
- Сделайте новый commit и повторите deploy.
Шаг 6. Подключите домен к Vercel
После успешного deploy сайт можно оставить на адресе Vercel, но для проекта, бренда и SEO лучше подключить собственный домен.
Vercel покажет, какие DNS-записи нужно добавить у регистратора домена. После этого нужно дождаться обновления DNS.
- Откройте Project Settings.
- Перейдите в Domains.
- Добавьте домен.
- Скопируйте DNS-записи, которые предлагает Vercel.
- Добавьте их у регистратора домена.
- Проверьте www и non-www версии.
- Дождитесь активации HTTPS.
- Проверьте, что домен открывает production-сайт.
Как проверить Production Deployment
Успешный deploy в интерфейсе Vercel ещё не гарантирует, что сайт полностью готов. Нужно проверить сайт как пользователь и как SEO-инженер.
Особенно важно открыть не только главную страницу, но и несколько внутренних страниц.
- Откройте production URL в режиме инкогнито.
- Проверьте главную страницу.
- Проверьте внутренние страницы.
- Проверьте мобильную версию.
- Проверьте меню, кнопки и CTA.
- Проверьте console errors.
- Проверьте network errors.
- Проверьте sitemap и robots.txt, если они есть.
- Проверьте canonical на production-домен.
Частые ошибки Vercel deploy
Ошибки Vercel обычно делятся на три группы: проект не собирается, проект собирается, но ломается в runtime, или сайт работает, но домен/DNS настроены неправильно.
Разбирать проблему нужно по логам, а не по догадкам.
- Build failed: проверьте первую ошибку в build logs.
- Module not found: проверьте import, имя файла, регистр букв и наличие зависимости.
- Missing environment variable: добавьте переменную в Vercel и сделайте redeploy.
- Wrong build command: проверьте scripts в package.json.
- 404 после deploy: проверьте route, slug, static params и redirects.
- 500 после deploy: проверьте server logs, API, env и runtime-ошибки.
- Domain not verified: проверьте DNS-записи у регистратора.
- GitHub repository не подключается: проверьте права доступа Vercel к GitHub.
Rollback flow: как откатить неудачный deploy
Если после нового deploy production сломался, сначала нужно быстро вернуть стабильную версию, а уже потом спокойно разбирать ошибку.
Vercel хранит историю deployments, поэтому обычно можно выбрать рабочую версию и вернуть её в production.
- Откройте раздел Deployments.
- Найдите последний стабильный deployment.
- Откройте его детали.
- Используйте Promote to Production или доступный rollback-механизм, если он есть в интерфейсе.
- Проверьте production URL после отката.
- Зафиксируйте причину поломки.
- Исправьте проблему в новой branch или commit.
- Не делайте повторный deploy без проверки build.
Production checklist для Vercel
Этот чек-лист стоит проходить перед тем, как отправлять сайт пользователям или добавлять его в Google Search Console.
Если проект связан с SEO, контентом или заявками, проверка production должна быть обязательной частью workflow.
- Deploy успешен.
- Production URL открывается.
- Домен подключён.
- HTTPS активен.
- Environment variables добавлены.
- Нет 404 на важных страницах.
- Нет 500 на production.
- Мобильная версия читаемая.
- Canonical указывает на production URL.
- Sitemap доступен.
- robots.txt не блокирует важные страницы.
- Последняя стабильная версия известна для rollback.
Связанные гайды AIWEBNET
После деплоя важно подключить домен и проверить production-ошибки.
Что делать дальше
После публикации сайта на Vercel следующий этап — подключить домен, проверить индексацию, добавить аналитику и выстроить безопасный workflow обновлений.
Для AI-проектов важно не только выложить сайт, но и быстро обновлять его без страха сломать production.
- Подключите домен.
- Настройте Google Search Console.
- Проверьте sitemap.
- Добавьте аналитику.
- Настройте процесс commit → preview → production.
- Используйте rollback при неудачных изменениях.
- Усильте SEO-структуру сайта.