Деплой на Vercel через GitHub: как выложить проект по шагам

Коротко (TL;DR)

Выложить проект в интернет через связку GitHub + Vercel — дело двадцати минут и без единой оплаты. Опаснее не сам деплой, а два шага вокруг него: не слить секреты в публичный репозиторий и правильно задать переменные окружения. Это гайд к результату — живой URL вашего приложения, — а не обзор возможностей.

Что важно знать сразу:

• Vercel Hobby (бесплатный тариф) не требует карты — вход через GitHub-аккаунт, никакого эквайринга. Для украинской аудитории это снимает главный барьер на старте.
• Каждый git push автоматически передеплоивает сайт. Это удобно и это же ловушка: то, что попало в репозиторий, уходит в прод. Секреты — мимо репозитория, в переменные окружения Vercel.
• Свой домен и HTTPS доступны бесплатно даже на Hobby — частое заблуждение, что за это надо платить.
• У Vercel есть официальный плагин для Claude Code — деплой можно вести прямо из терминала командами. Разберём в конце.

Данные по тарифам и лимитам — на 16 июня 2026; сверяйте актуальные на официальной странице лимитов, они меняются.

Что понадобится и как устроен деплой

Нужны три вещи: аккаунт GitHub, аккаунт Vercel и готовый проект (например, приложение на Next.js или React, собранное с ИИ). Времени — минут двадцать.

BYBIT COPY TRADINGКопитрейдинг на BybitОткрытая статистика трейдеров, старт с $10, отключение в один клик.Выбрать трейдера

Логика связки простая. Ваш код лежит в репозитории на GitHub. Vercel подключается к этому репозиторию и при каждом изменении (push) сам собирает и публикует свежую версию. Вам не нужен отдельный сервер, ручная загрузка файлов или настройка HTTPS — всё это Vercel берёт на себя. Один раз связали — дальше просто пушите код.

Монтаж видео кодом: пайплайн из Deepgram, FFmpeg и Remotion

Supabase и Stripe за вечер с Claude Code — и три вещи, которые агент сделает не так

Spec-driven development: от идеи до архитектуры продукта с ИИ

AWS Continuum придёт в Claude Code и Codex: поиск дыр прямо в редакторе

OpenClaw на Claude отменил чужую бронь, чтобы поднять хозяина с 4-го места на 3-е

Регистрация. На Vercel заходим через «Continue with GitHub» — это сразу связывает аккаунты и не требует банковской карты. Hobby-тариф активируется автоматически.

Шаг 1 — Готовим репозиторий и не сливаем секреты

Здесь — самый важный момент всего гайда, который новички пропускают. Файл .gitignore должен появиться в проекте ДО первого git add. В него обязательно входит .env (и любые файлы с ключами). Если этого не сделать, ваши секреты уедут в репозиторий, а если он публичный — станут доступны всему интернету.

Масштаб проблемы не абстрактный: по отчёту GitGuardian за 2024 год на публичном GitHub за год утекло около 23,8 млн секретов. Отдельный скан (исследование Cremit, 2025, выборка около 6,7 тыс. сайтов) нашёл, что примерно 0,45% проверенных Vercel-сайтов светили валидными секретами. Это две разные метрики — общий масштаб утечек и доля реально уязвимых сайтов, — но обе про одно: секрет в git = секрет в чужих руках.

Если код пишет Claude Code (на моделях уровня Claude Sonnet 5), у него есть полезная страховка: он git-aware и перед git push всегда спрашивает подтверждение. Это шанс глазами проверить, что уходит в коммит. Просьба к агенту «добавь .env и ключи в .gitignore до первого коммита» — обязательный первый промпт. Дальше просим создать репозиторий и запушить проект на GitHub.

Практический нюанс: если вы создаёте репозиторий внутри рабочей или учебной GitHub-организации, а не на личном аккаунте, — бесплатная Hobby-команда Vercel не подключится к репозиторию, принадлежащему организации. Для личного проекта держите репозиторий на своём аккаунте.

Шаг 2 — Импорт проекта в Vercel и первый деплой

В панели Vercel нажимаем «Add New… → Project», выбираем нужный репозиторий из списка GitHub. Vercel сам определяет фреймворк (Next.js, Vite, и т.д.) и подставляет команды сборки. Для стандартного Next.js менять ничего не нужно — жмём Deploy.

BYBIT COPY TRADINGКопитрейдинг на BybitОткрытая статистика трейдеров, старт с $10, отключение в один клик.Выбрать трейдера

Через минуту-две получаете рабочий адрес вида ваш-проект.vercel.app. Это и есть деплой на Vercel: деплой Next.js на Vercel — путь наименьшего сопротивления, потому что и Vercel, и Next.js делает одна компания, и интеграция «просто работает».

Дальше каждый push в основную ветку обновляет прод, а каждая ветка/пул-реквест получает свой preview-деплой — отдельный URL, где можно проверить изменения до выката в прод.

Что вы увидите после первого деплоя. В панели Vercel появляется карточка проекта с зелёным статусом Ready, скриншотом главной страницы и кнопкой Visit. По клику открывается ваш живой сайт на домене *.vercel.app — уже с HTTPS. В разделе Deployments — история сборок: видно, какой коммит выкатан в прод, сколько шла сборка и лог, если что-то упало. Если сборка «красная» (Error), первым делом смотрите этот лог: чаще всего причина — отсутствующая переменная окружения или ошибка сборки, которую видно локально командой сборки проекта. Это удобно доверить Claude Code: покажите ему лог ошибки сборки, и он подскажет, чего не хватает.

Шаг 3 — Переменные окружения (то, что не должно быть в коде)

Ключи API, строки подключения к базе, токены — всё это переменные окружения Vercel, а не строки в коде. Задаются они в панели проекта: Settings → Environment Variables. Это конфликтует с привычкой скопировать локальный .env в репозиторий — так делать нельзя, значения вносим в панель руками (или командой плагина, см. ниже).

Важное после инцидента: в апреле 2026 у Vercel был инцидент безопасности (официальный бюллетень от 24 апреля 2026, подтверждённый независимым разбором GitGuardian), при котором оказались доступны несекретные переменные окружения. Прямая рекомендация Vercel по итогам — помечать чувствительные переменные как sensitive (write-only): такое значение нельзя прочитать обратно из панели, только перезаписать. Доступно для production/preview окружений. Пользуйтесь этим для настоящих секретов.

Переменные можно задавать по отдельности для production, preview и development — например, тестовые ключи в preview и боевые в production.

Шаг 4 — Свой домен бесплатно, с HTTPS

Купленный домен подключается бесплатно даже на Hobby. Как подключить домен Vercel: Settings → Domains, добавляем домен и прописываем у регистратора DNS-записи, которые Vercel показывает. HTTPS-сертификат Vercel выпускает и продлевает автоматически — отдельно платить или настраивать SSL не нужно. Заблуждение «свой домен = обязательно платный план» — неверно.

Типичные ошибки и лимиты Hobby

Бесплатный тариф щедрый, но у него есть границы и грабли, о которых стоит знать заранее (данные на 16 июня 2026):

Две частые ошибки помимо лимитов:

• Белый экран или 404 на чистом React/Vite SPA. У одностраничных приложений при обновлении внутренней страницы Vercel отдаёт 404. Лечится файлом vercel.json с правилом rewrites на index.html. У Next.js этой проблемы нет.
• Ошибка 504 на API-роуте. Обычно это упор в таймаут функции: запрос к внешнему сервису не уложился в лимит. Оптимизируйте запрос или выносите долгую работу из серверной функции.

Ещё живой сигнал из сообщества (июнь 2026): вокруг WebSocket на Vercel идёт активное обсуждение — поддержка на платформе появилась, но вопросы к её работе в связке с Next.js остаются. Если ваше приложение держит постоянные соединения (чат, реалтайм), уточните актуальное состояние до выбора Vercel. В таком случае честно посмотрите и на альтернативы того же класса — Netlify, Cloudflare Pages или GitHub Pages: связка с GitHub и авто-деплой у них устроены похоже, а ограничения бесплатных тарифов отличаются.

Продвинутое: деплой из терминала через плагин Claude Code

Здесь наш information gain: у Vercel есть официальный плагин для Claude Code (и редактора Cursor) — не общий CLI, а именно интеграция с агентом. Ставится командой:

npx plugins add vercel/vercel-plugin

После установки в Claude Code появляются namespaced слэш-команды: /vercel-plugin:bootstrap (связать проект), /vercel-plugin:deploy prod (задеплоить в прод), /vercel-plugin:env (управлять переменными окружения) и /vercel-plugin:status. Это превращает claude code деплой на github и Vercel в разговор в терминале: попросили — агент запушил и выкатил, а секреты добавил командой без открывания панели. Почти ни один типовой туториал по деплою этот плагин пока не упоминает — а он снимает половину ручных кликов.

Риски и безопасность

• Секреты в публичном репозитории — главный риск. .gitignore до первого коммита, .env мимо git, чувствительные переменные — как sensitive в Vercel. Проверяйте, что именно уходит в push (Claude Code показывает это перед подтверждением).
• Несекретные переменные — тоже данные. Инцидент апреля 2026 показал, что даже «несекретные» env-переменные могут стать видимыми. Не храните в них ничего, что не должно утечь.
• Коммерческий проект на Hobby. Как только появляется монетизация, тариф Hobby формально не подходит — это вопрос соблюдения условий, а не техники.

FAQ

Нужна ли банковская карта для Vercel? Нет. Hobby-тариф активируется через вход по GitHub, карта не требуется. Это удобно для украинских пользователей — не нужно решать вопрос с эквайрингом на старте.

Можно ли задеплоить не Next.js, а обычный React или Vite? Да. Vercel их поддерживает. Для одностраничных приложений добавьте vercel.json с rewrites на index.html, иначе внутренние страницы будут отдавать 404. У Next.js такой настройки не требуется.

Мой сайт не обновился после изменения кода — почему? Проверьте, что изменения запушены в подключённую ветку: Vercel деплоит по git push. Если пуша не было — не будет и нового деплоя. Статус сборки виден в панели Vercel.

Свой домен обязательно платный? Нет. Домен подключается и работает с автоматическим HTTPS даже на бесплатном Hobby. Платить нужно только за сам домен у регистратора, не за подключение к Vercel.

Что делать с ключами API — они же нужны приложению? Заносите их в переменные окружения Vercel (Settings → Environment Variables), а не в код. Настоящие секреты помечайте как sensitive. В репозиторий ключи не попадают — их там быть не должно.

Хватит ли бесплатного тарифа? Для личного проекта — почти всегда да: 100 ГБ трафика в месяц с запасом. Ограничения появляются при коммерческом использовании, тяжёлом трафике или долгих серверных функциях (таймаут 10 секунд).