Урок 8

Новоселье

публикуем проект — и вот у него своя ссылка, он живёт в интернете и работает, пока вы спите

Цели урока

К концу этого урока вы:

Подключите проект к Vercel через импорт из git — один раз, потом само.
Поймёте, что происходит во время деплоя: сборка, выкладка, публичная ссылка.
Подключите продовую базу данных через одну настройку в панели Vercel.
Откроете свой проект по настоящей публичной ссылке — и проверите с телефона.
Поделитесь ссылкой и поймёте, почему «у меня работало» ≠ «работает для всех».

Тихо начинаем. Дальше — детали.

Уютный дом с включённым светом в окнах, над воротами — блестящая табличка с адресом, в небе — первые звёзды вечера: новоселье

Нажимаете кнопку. Проходит секунд сорок. Страница открывается по публичной ссылке — и это уже не localhost на вашем компьютере, а настоящий адрес в интернете. Его можно отправить маме в мессенджер, она откроет — и увидит то же самое, что видите вы. Не потому что у неё стоит что-то специальное, а потому что дом теперь стоит.

Весь этот урок — один шаг: переезд. В строительстве этот момент называется «сдача объекта»: бригада уходит, свет включён, ключ передан хозяину. В нашем случае хозяином становится весь интернет.

Где мы сейчас

Урок 1 Пустой участок: что строим, кто такой Claude Code, карта дома

Урок 2–3 Как говорить с ИИ и выбрали инструмент

Урок 4 Каркас: собрали страницу, стены стоят

Урок 5 Git и коммиты — история изменений, страховка

Урок 6 База данных: форма с кладовкой подключена

Урок 7 Выбрали хостинг — Vercel, бесплатный, под наш проект

Урок 8 — сегодня Переезд в прод: публикуем, получаем ссылку, делимся

Что вы возьмёте из этого урока

Подключите проект к Vercel через импорт из git — один раз, потом само.
Поймёте, что происходит во время деплоя: сборка, выкладка, публичная ссылка.
Подключите продовую базу данных через одну настройку в панели Vercel.
Откроете свой проект по настоящей публичной ссылке — и проверите с телефона.
Поделитесь ссылкой и поймёте, почему «у меня работало» ≠ «работает для всех».

Часть 1. Связываем проект с Vercel

В Уроке 7 вы выбрали Vercel как площадку для переезда [см. Урок 7]. Теперь пора сделать это физически. Весь процесс — несколько кликов в браузере, никакого терминала.

Откройте vercel.com, войдите в аккаунт. На главной кнопка «Add New Project» (или «New Project»). Vercel спросит, откуда тащить код — выберите GitHub (или GitLab, или Bitbucket, смотря где лежит ваш репозиторий). Авторизуйте доступ — Vercel получит право читать ваши репозитории. Выберите нужный — тот самый, в который вы делали коммиты в Уроке 5. Нажмите Import [1].

Вот что происходит под капотом в этот момент: Vercel регистрирует в вашем репозитории «хук» — автоматическую зацепку, которая уведомляет его о новых изменениях. Отныне каждый раз, когда вы сделаете новый коммит и отправите его в git — Vercel автоматически подхватит изменения и выложит обновлённую версию. Не надо будет каждый раз заходить на сайт и жать кнопку вручную.

В терминах дома: это как договориться с почтальоном. Как только вы кладёте письмо в ящик — он сам забирает и несёт по адресу. Один раз настроили — работает само.

🤔 Прикиньте до того, как читать дальше

Мы только что связали Vercel с git-репозиторием. Вспомните Урок 5: что такое коммит? Объясните своими словами, как именно коммит связан с тем, что появится в интернете по вашей ссылке.

Подсказка: подумайте о цепочке. Коммит → репозиторий → Vercel видит новый коммит → что происходит дальше? Ответ будет в Части 2.

Часть 2. Деплой — что происходит (без страха)

После нажатия Import Vercel сразу запустит первый деплой. На экране побегут строчки лога. Не надо их читать — они для того, чтобы было на что смотреть, пока идёт процесс. Но понять, что там происходит, полезно: тогда не будет страшно, когда что-то пойдёт не так.

Три фазы деплоя: Vercel сам проходит через все три при каждом обновлении кода.

Если на этапе сборки что-то пошло не так — Vercel покажет красный значок и лог с ошибкой. Это не катастрофа. Предыдущая версия продолжает работать: Vercel не трогает её, пока новая не готова [1]. Это как ремонт в одной комнате: гости спокойно сидят в гостиной, пока рабочие возятся в кухне.

⏱️

— Деплой занял 40 секунд. Я всё время думал, что это будут часы настроек и боль.
— Это и были часы настроек и боль — их просто сделали за вас заранее.
Весь «магический» деплой — это не магия. Это кто-то раньше вас прошёл через боль и автоматизировал её. Вам достался результат.

Часть 3. Дом с адресом — он живёт

Уютный домик светится изнутри, над дверью — блестящая табличка с адресом: metaphor момента, когда проект получил публичную ссылку — Момент переезда — дом получил адрес и открыл двери.

Когда деплой завершится — на экране появится ссылка вида https://ваш-проект.vercel.app. Это настоящий публичный адрес. Нажмите на него. Откроется ваш проект — тот самый, что вы строили с первого урока.

Здесь стоит остановиться на секунду. Вспомните Урок 1: там на карте дома был пункт «адрес — ссылка, где вас найдут в интернете», и «переезд — момент, когда дом становится живым». Именно это и случилось только что. Не метафора — настоящий переезд [см. Урок 1].

Что это значит технически: проект теперь запущен на серверах Vercel — компьютерах, которые работают 24 часа в сутки, 7 дней в неделю, независимо от того, включён ли ваш ноутбук. Когда кто-то откроет ссылку — отвечает их сервер, не ваш компьютер. Именно поэтому «он работает, пока вы спите» [1].

Часть 4. База в проде: одна настройка

Если в вашем проекте есть форма, которая сохраняет данные (вы делали это в Уроке 6 — «кладовка»), то локально она работала с вашей локальной базой. В проде нужна продовая база — та, что всегда онлайн, а не только когда включён ваш компьютер.

Здесь не надо уходить в дебри. Claude Code помогает подключить всё за один шаг: скажите ему «помоги подключить продовую базу данных к Vercel» — он проведёт через настройку переменной окружения в панели Vercel (это секретная настройка, куда вы вставляете адрес вашей базы) и проверит, что всё работает. Vercel хранит эту настройку в зашифрованном виде и не показывает посторонним [2].

Про бесплатные базы для пет-проекта: прямо в дашборде Vercel есть раздел Marketplace, откуда в пару кликов подключается бесплатная база Postgres — её даёт сервис Neon. Это самый простой путь — база и хостинг рядом, в одном кабинете. Claude Code поможет настроить подключение, если скажете ему, что взяли Postgres из Vercel Marketplace [3].

✋ Самопроверка

В Уроке 6 вы подключали базу данных локально. Теперь она нужна в проде. Почему нельзя просто использовать ту же самую базу, что работала на вашем компьютере? Дайте ответ своими словами, прежде чем читать дальше.

Вспомните: кто отвечает на запросы по вашей публичной ссылке? Vercel-сервер где-то в дата-центре. Может ли он дотянуться до базы, которая живёт только когда включён ваш ноутбук?

Часть 5. Открываем ссылку — оно ЖИВЁТ

Теперь — самое важное. Возьмите телефон. Откройте браузер. Вставьте вашу ссылку vercel.app. Нажмите.

Это другое ощущение, чем смотреть на localhost. На телефоне нет никаких «ваших файлов», никакой установленной программы. Он просто идёт в интернет и находит ваш дом — потому что у него теперь есть адрес, и по этому адресу кто-то всегда дома.

Это первый раз, когда проект живёт без вас. Не на вашем компьютере, не только для вас — просто в интернете.

Пройдитесь по проекту с телефона: нажмите кнопки, заполните форму, посмотрите, как всё выглядит на маленьком экране. Скорее всего, найдётся что-нибудь, что хочется подправить — и это нормально. Именно для этого существует следующий шаг: поправить, сделать коммит — и через минуту Vercel автоматически выложит обновлённую версию.

Часть 6. «У меня работало» ≠ «работает для всех»

Пока проект жил у вас на компьютере, вы никогда не сталкивались с одним классическим парадоксом. Называется он «works on my machine» — «у меня работало». Это когда разработчик говорит: «у меня всё нормально открывается!» — а у всех остальных ошибка.

Локально

Ваш ноутбук, ваши настройки, ваша база, ваш браузер. Всё идеально подходит друг другу — вы сами всё настроили. Как примерка костюма в ателье: на вас сидит идеально.

В проде

Чужой сервер в дата-центре, чужой браузер, чужой телефон, медленный интернет, другая страна. Именно здесь и выяснится, хорошо ли сшит костюм на самом деле.

Деплой — это первая настоящая проверка. Не потому что что-то обязательно сломается, а потому что только здесь условия реальные. Если что-то не работает в проде — это не провал, это информация. Берёте Claude Code, описываете: «на телефоне кнопка не нажимается» — и чините. Именно так и работает нормальная разработка: выложил, посмотрел, поправил.

Поделитесь ссылкой с кем-нибудь, кому доверяете — другом, коллегой, членом семьи. Попросите открыть и сказать, что видят. Это лучший тест: другой человек, другой экран, другая скорость интернета. Их обратная связь — ценнее любого автоматического теста.

Резюме

Git → Vercel → ссылка

Подключили репозиторий к Vercel один раз. Теперь каждый коммит автоматически выкладывает новую версию — без ручного деплоя.

Деплой = три фазы

Сборка → выкладка → живая ссылка. Занимает минуту. Если что-то сломалось — старая версия продолжает работать.

База в проде

Одна настройка в панели Vercel: вставили адрес базы. Claude Code помогает. Данные теперь хранятся не на вашем ноутбуке.

Оно живёт

Проект работает круглосуточно. Его видит кто угодно по ссылке. «У меня работало» ≠ «работает для всех» — деплой это и выясняет.

Что дальше, в Уроке 9 — «Бригада помощников»: проект живёт, ссылка есть. Теперь — как работать быстрее: давать Claude Code несколько задач разом, использовать субагентов, и самое главное — что делать, когда ИИ ошибся. Четыре хода, которые покрывают 95% ситуаций.

Источники / Sources

docs Vercel. «Deploying to Vercel» — обзор деплоя: импорт git-репозитория, автоматические деплои при коммитах, три фазы (build, deploy, live URL), атомарные деплои (предыдущая версия не ломается при ошибке новой). vercel.com/docs/deployments · accessed 2026-06-02
docs Vercel. «Managing environment variables» — как добавить переменную окружения (в т.ч. DATABASE_URL) через панель Vercel; шифрование at rest; разграничение prod/preview/development. vercel.com/docs/environment-variables/managing-environment-variables · accessed 2026-06-02
docs Vercel. «Postgres on Vercel» — бесплатную базу Postgres для проекта подключают через Vercel Marketplace (её предоставляет сервис Neon); подключение из дашборда проекта. vercel.com/docs/postgres · accessed 2026-06-02
articles Atwood, J. (2007). «The Works on My Machine Manifesto» — классическая заметка Джеффа Этвуда о расхождении локальной и продовой среды; термин «works on my machine» как общепринятое обозначение проблемы. blog.codinghorror.com/the-works-on-my-machine-manifesto/ · accessed 2026-06-02

Все утверждения о поведении Vercel (автодеплой, атомарные версии, Hobby plan) опираются на официальную документацию Vercel, актуальную на июнь 2026. Vercel регулярно обновляет планы — при расхождении доверяйте странице vercel.com/pricing.