4.5: Запуск

• Час на виконання: 15 хвилин

Інтерактивний урок: Запустіть /start-4-5 в Claude Code

В цьому уроці: Розгорніть ваш проект та отримайте живу URL-адресу для поширення.

Що таке розгортання?

Розгортання — це взяття коду з вашого комп'ютера та розміщення його в інтернеті.

Ваш код переходить з вашої машини → серверів до яких будь-хто може отримати доступ → реальна URL-адреса.

Розробники постійно кажуть "деплоїти", "шипити" або "запускати". Це момент коли ваша річ стає реальною.

Що таке хостинг?

Хостинг — це сервери які запускають ваш код 24/7 та обробляють трафік від відвідувачів.

Ви не управляєте серверами самостійно — хостинговий сервіс обробляє все це. Ви просто надаєте їм ваш код.

Що таке Vercel?

Vercel — це хостинговий сервіс для веб-сайтів. Він:

• Безкоштовний для особистих проектів (щедрий безкоштовний рівень)
• Створений творцями Next.js — вони бездоганно працюють разом
• Підключений до GitHub — автоматично деплоїть коли ви надсилаєте зміни

Надайте Vercel ваш репозиторій GitHub → він збирає ваш код → ви отримуєте реальну URL-адресу типу yourproject.vercel.app.

Як працює авто-деплой

Ось де магія:

1. Ви надсилаєте код на GitHub
2. Vercel виявляє зміну
3. Vercel автоматично перезбирає та перерозгортає
4. Ваш живий сайт оновлюється приблизно за ~1 хвилину

Немає ручних кроків після початкового налаштування. Змінюйте код → надсилайте → він живий.

Що таке Vercel CLI?

Vercel CLI — це інструмент командного рядка для розгортання безпосередньо з вашого терміналу.

Claude використовує його для деплою без того щоб ви залишали Claude Code. Він автентифікується через ваш браузер, подібно до GitHub.

Усунення несправностей

"vercel: command not found"

Vercel CLI не встановлений. Запустіть npm i -g vercel

Автентифікація не вдалась

Запустіть vercel login знову та завершіть авторизацію браузера.

Збірка не вдалась

Перевірте дашборд Vercel на наявність журналів помилок. Зазвичай це проблема з кодом — скажіть Claude що написано в помилці і він може допомогти її виправити.

"Project not found"

Переконайтесь що ви знаходитесь у правильній папці проекту коли запускаєте команду деплою.

Сайт показує стару версію

Розгортання може ще будуватись. Перевірте дашборд Vercel на стан — зазвичай це займає близько хвилини.

Працює локально але не на Vercel

Різниця середовищ. Перевірте журнали збірки Vercel на підказки про те, що відрізняється.

Після розгортання

Коли ви онлайн:

1. Тестуйте на вашому телефоні — та сама URL-адреса працює на будь-якому пристрої
2. Діліться з друзями — надішліть посилання, спостерігайте за їхньою реакцією
3. Майбутні оновлення: змінюйте код → надсилайте на GitHub → автоматично деплоїться

Ось весь потік. Тепер ви знаєте як будувати та шипити речі.

Повний цикл

Ви дізнались:

Цей цикл працює для будь-якого проекту. Лендингові сторінки, інструменти, застосунки, прототипи — той самий процес.

Що далі

Модуль 4 завершено!

Тепер у вас є повний робочий процес вайб-кодингу. Спробуйте побудувати щось інше — почніть нову папку проекту та слідуйте тому ж циклу. Найкращий спосіб навчитися — зробити щось що ви насправді хочете.

Спільнота та зворотний зв'язок

Залишайтесь на зв'язку: Приєднуйтесь до розсилки на ccforpms.com для нових модулів, посібників та контенту Claude Code орієнтованого на ПМів.

Автор курсу: Carl Vellotti (X) — зворотний зв'язок завжди вітається!

Сподобалось? Поділіться з друзями яким можуть знадобитись ці навички.