Деплой на 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, зібраний зі ШІ). Часу — хвилин двадцять.

BINANCE COPY TRADINGКопітрейдинг на BinanceВідкрита статистика трейдерів, старт з $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.

BINANCEДосі дивишся збоку?Ринок працює без вихідних. Рахунок на Binance відкривається за 2 хвилини.Почати зараз

За хвилину-дві отримуєте робочу адресу на кшталт ваш-проект.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 розгортання проєкту та 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 секунд).