Выбираем адрес
что такое хостинг, что значит «бесплатно» и на что смотреть — Vercel и альтернативы
Цели урока
К концу этого урока вы:
- Поймёте, что такое хостинг и деплой — своими словами, без технического словаря.
- Разберётесь, что именно входит в «бесплатный тариф» у Vercel — и какое честное ограничение там есть.
- Узнаете, почему мы начинаем с Vercel, и коротко познакомитесь с двумя реальными альтернативами.
- Составите чек-лист готовности к переезду — чтобы в Уроке 8 идти без сюрпризов.
Давай по-честному, без воды: вот как это работает.
Выбираем адрес
Есть устойчивое убеждение: «свой сайт» — это дорого. Серверы, провода, системный администратор в подвале, ежемесячные счета. Что-то из мира корпораций и стартапов с инвестициями, но точно не для человека, который делает первый проект.
Это было правдой лет двадцать назад. Сегодня — нет. Поставить проект в интернет так, что любой человек откроет его по ссылке, стоит ноль рублей и занимает около трёх минут. Без серверов, без подвалов, без администраторов. Несколько компаний построили бизнес именно на том, чтобы дать разработчикам (и теперь — всем, кто строит с Claude Code) бесплатный старт.
Сегодня разберёмся: что такое хостинг и деплой на практике, что именно эти компании дают бесплатно, где честный предел — и с чего начать именно нам. В Уроке 8 мы переедем по-настоящему; здесь — выбираем участок и изучаем условия.
Из Урока 4 (три урока назад): страница-визитка собрана и видна в браузере. Но видна она только вам, локально. Что именно мешает вашему соседу открыть её прямо сейчас?
Из Урока 2 (пять уроков назад): вы ставили задачу Claude Code. Вспомните — из каких частей должна состоять хорошая инструкция, чтобы прораб не переспрашивал?
Что вы возьмёте из этого урока
- Поймёте, что такое хостинг и деплой — своими словами, без технического словаря.
- Разберётесь, что именно входит в «бесплатный тариф» у Vercel — и какое честное ограничение там есть.
- Узнаете, почему мы начинаем с Vercel, и коротко познакомитесь с двумя реальными альтернативами.
- Составите чек-лист готовности к переезду — чтобы в Уроке 8 идти без сюрпризов.
Где мы сейчас
Часть 1. Что такое хостинг и деплой
В Уроке 1 мы назвали деплой «переездом» — домик с вашего компьютера переезжает на участок с публичным адресом [см. карту Урока 1]. Теперь разберём это подробнее, потому что сам процесс многих пугает именно от незнания.
Пока проект живёт только у вас на компьютере — он виден только вам. Открываете браузер, набираете localhost:3000 — страница есть. Выключаете компьютер — страницы нет. Ваш сосед набирает localhost:3000 — видит ошибку, потому что у него на компьютере нет вашего проекта. Это и есть проблема: дом стоит на вашем участке, но ворот с улицы к нему нет.
Хостинг — это арендованный участок в интернете, где ваш проект живёт на чужом компьютере (называемом сервером), который работает круглосуточно и подключён к сети с публичным адресом. Любой человек, знающий этот адрес, открывает браузер — и видит вашу страницу.
Деплой (от английского deploy — развернуть) — это сам процесс переезда: вы отправляете код проекта на хостинг, и он там запускается. В современных платформах это сделано так, что вам не нужно знать ничего про серверы: нажали кнопку или сделали коммит — платформа сама забрала код и запустила его.
Ваш проект сейчас — как домик, который вы построили у себя во дворе и смотрите на него в одиночестве. Хостинг — это публичный участок с адресом на улице. Переезд (деплой) — это когда дом перевезли туда и прикрутили табличку с номером.
Часть 2. Что значит «бесплатный тариф» и где честный подвох
Когда несколько компаний говорят «бесплатно» — у них разные значения этого слова. Некоторые дают бесплатно на три месяца, потом — карта. Некоторые дают бесплатно, но при превышении трафика списывают деньги автоматически. Третьи дают бесплатно навсегда, но с условиями. Разберём, как устроено у каждого из хостингов, о которых говорим сегодня.
Vercel, Netlify и Cloudflare Pages — все три дают реальный бесплатный тариф без ограничения по времени. Ни у одного нет пробного периода, по окончании которого начинают считать деньги. Это не маркетинговый приём. Им выгодно: человек бесплатно осваивает платформу, вырастает — и уже платит за расширенный план.
Честный предел Vercel Hobby. Tариф называется Hobby — и это не случайно. В условиях Vercel прямо написано: personal, non-commercial use only [1]. Это значит: личные проекты, личные страницы, пет-проекты для портфолио — всё хорошо. Но если вы захотите принимать оплату, продавать что-то, или проект станет частью вашего коммерческого бизнеса — нужен платный план ($20/мес на старте).
Для нашего курса это не ограничение, а норма: мы строим пет-проект. Но честно предупреждаем: Hobby — не для бизнеса.
Что входит в Hobby бесплатно [1]: до 100 развёртываний в день, 6000 минут сборки в месяц, 1 млн вызовов функций в месяц, 100 ГБ быстрой передачи данных, автоматический HTTPS на каждом проекте, превью-деплой на каждый коммит. Для пет-проекта — с огромным запасом. Тысяча посетителей в день не уложится даже в разумную долю этих лимитов.
Часть 3. Vercel — почему начнём с него
Из трёх платформ, о которых говорим сегодня, мы выбираем Vercel как стартовую — и вот почему это не произвольный выбор.
В Уроке 6 мы подключили базу данных через Vercel Marketplace [см. Урок 6]. База уже привязана к Vercel-аккаунту — это одна из причин: меньше отдельных аккаунтов и настроек. Но главное другое.
Наш проект построен на Next.js [2] — фреймворке, который создала сама команда Vercel. Поэтому поддержка Next.js у Vercel образцовая: нет ничего, что нужно настраивать вручную, нет неожиданных несовместимостей. Загружаете проект — платформа понимает, что это Next.js, и сама делает всё правильно.
Три особенности, которые важны нам
Авто-HTTPS
Каждый проект на Vercel автоматически получает HTTPS — защищённое соединение. Вам не нужно разбираться с сертификатами. Это важно: современные браузеры предупреждают пользователей о сайтах без HTTPS. Vercel решает это молча, сам [1].
Превью на каждый коммит
Помните, в Уроке 5 мы делали коммиты? Каждый коммит в git, связанный с Vercel, автоматически разворачивается как отдельный превью-адрес. Сделали изменение — получили ссылку на черновик, можно проверить, не трогая основную версию [1].
CI/CD из коробки
CI/CD — это когда push в GitHub автоматически запускает обновление на хостинге. Вы не нажимаете кнопку «задеплоить» каждый раз вручную. Связали репозиторий — и дальше просто пишете код и делаете коммиты [1].
Первый раз деплоить «по-старому»: зарегистрировался на хостинге, залогинился по SSH, настроил nginx, выяснил что нет Node, установил nvm, выяснил что не та версия…
Часть технического прогресса — это когда скучная работа исчезает, и остаётся только нужная.
Часть 4. Альтернативы честно и кратко
Vercel — не единственный вариант. Две реальных альтернативы с бесплатными тарифами для личных проектов:
| Платформа | Что хорошего | На что обратить внимание |
|---|---|---|
| Netlify [3] | Бесплатно навсегда (Free план). 100 ГБ трафика, 300 минут сборки в месяц. Простой интерфейс, хорошо работает со статическими сайтами и формами. Авто-HTTPS включён. | Для Next.js нужен адаптер: не такая «родная» поддержка, как у Vercel. Некоторые Next.js-функции работают с ограничениями. Функциям (API-маршруты) — 125 000 вызовов в месяц на Free. |
| Cloudflare Pages [4] | Безлимитная пропускная способность (без ограничений по трафику) даже на бесплатном тарифе — редкость. 500 сборок в месяц. Всемирная CDN-сеть, быстрая отдача контента. | Workers (серверные функции) — 100 000 запросов в день, после — пауза. Экосистема Next.js поддерживается, но через адаптер; не всё работает из коробки. Интерфейс немного технічніший. |
Когда выбирать альтернативы. Если ваш проект — полностью статический сайт (без серверной части, без базы), Netlify и Cloudflare Pages работают отлично и могут быть даже лучше. Для нашего проекта с Next.js и базой данных — Vercel даёт наименьший путь сопротивления. Если вам по какой-то причине нужны альтернативы — и Netlify, и Cloudflare Pages реальны и надёжны; просто будьте готовы чуть больше разбираться с конфигурацией.
Часть 5. Что понадобится для переезда
Деплой — это три вещи: аккаунт на хостинге, проект в git-репозитории и связь между ними. Всё остальное делает платформа. Пройдёмся по каждому пункту — без действий пока, просто понять, что нужно.
1. Аккаунт на Vercel
Зарегистрироваться на vercel.com — это одно из заданий этого урока. Аккаунт бесплатный, достаточно почты или аккаунта GitHub.
2. Проект в GitHub
В Уроке 5 мы делали коммиты в git. Теперь этот git-репозиторий нужно опубликовать на GitHub — там он станет доступен Vercel. GitHub тоже бесплатен для личных проектов. Если не сделали ещё — это тоже задание к Уроку 8.
3. Связать проект с Vercel
В дашборде Vercel — кнопка «Add New Project». Выбираете репозиторий с GitHub — и всё. Vercel сам определит, что это Next.js, и предложит правильные настройки. Первый деплой запустится автоматически. Через пару минут у вас будет ссылка вида moy-proekt.vercel.app.
База данных из Урока 6, подключённая через Vercel Marketplace, уже ассоциирована с вашим Vercel-аккаунтом. При связывании проекта настройки подключения к базе передадутся автоматически — это одно из главных удобств экосистемы. В Уроке 8 пройдём по этому маршруту шаг за шагом.
Про переменные окружения. Из Урока 6 помните «переменную окружения» с адресом и паролем базы? На Vercel она живёт в настройках проекта — туда не нужно ничего вносить вручную, если подключали базу через их же Marketplace. Если же вы используете другую базу — в Уроке 8 покажем, как добавить переменную через интерфейс.
Часть 6. Чек-лист готовности к переезду
Прежде чем в Уроке 8 нажимать кнопки — убедитесь, что всё на месте. Это тот самый момент, когда прораб делает обход перед переездом: всё ли упаковано, все ли вещи на месте.
Проект запускается локально
npm run dev — страница открывается в браузере без ошибок. Форма из Урока 6 работает, данные сохраняются в базу и остаются после перезагрузки.
Последний коммит сделан
Из Урока 5: все изменения зафиксированы в git. Vercel разворачивает именно то, что в репозитории. Незафиксированные изменения туда не попадут.
Аккаунт на Vercel заведён
Задание этого урока. Зарегистрироваться на vercel.com (бесплатно, можно через GitHub-аккаунт).
Репозиторий на GitHub опубликован
Vercel получает код только из репозитория. Если проект ещё не на GitHub — попросите Claude Code помочь: «Опубликуй проект на GitHub в новый репозиторий» [см. Урок 2: как говорить с Claude Code].
База подключена через Vercel Marketplace
Если база — через Neon в Vercel Marketplace (Урок 6), настройки передадутся автоматически. Если база в другом месте — приготовьте строку подключения: она понадобится как переменная окружения.
Все пять пунктов зелёные — можно переезжать. Не все — разберёмся в Уроке 8, там есть место для устранения затруднений.
Резюме
Хостинг — участок с адресом, деплой — переезд
Пока проект на вашем компьютере — он невидим миру. Хостинг даёт ему адрес в интернете. Деплой — момент, когда код туда отправляется и запускается.
Vercel Hobby: бесплатно навсегда, но только для личного
Никакого таймера, никаких автосписаний. Ограничение одно: non-commercial, personal use. Для пет-проекта — идеально. Для коммерции — нужен платный план.
Альтернативы реальны
Netlify и Cloudflare Pages — надёжные платформы с бесплатными тарифами. Для статических сайтов — отличный выбор. Для Next.js с базой — Vercel даёт меньше трений на старте.
Для переезда нужны три вещи
Аккаунт Vercel + репозиторий на GitHub + связать их. Платформа дальше сделает сама: определит фреймворк, задеплоит, выдаст ссылку.
Что дальше, в Уроке 8 — «Новоселье»: переезжаем по-настоящему. Шаг за шагом: публикуем репозиторий на GitHub, связываем с Vercel, смотрим как проходит первый деплой, открываем ссылку — и видим наш проект живым в интернете. Если что-то пойдёт не так — разберёмся вместе: у каждой типичной ошибки первого деплоя есть решение.
Источники / Sources
- docs Vercel. «Vercel Hobby Plan» — описание бесплатного тарифа: ограничение personal, non-commercial use only; лимиты (100 развёртываний/день, 6000 мин сборки, 1M вызовов функций, авто-HTTPS, превью на коммит).
- docs Vercel. «Next.js Documentation» — документация по фреймворку Next.js: деплой на Vercel, серверные компоненты, API-маршруты.
- docs Netlify. «Pricing and Plans» — условия бесплатного плана: 100 ГБ трафика, 300 минут сборки, 125 000 вызовов функций в месяц; отсутствие ограничения по сроку.
- docs Cloudflare. «Limits · Cloudflare Pages docs» — лимиты бесплатного плана: безлимитный трафик, 500 сборок в месяц, 20 000 файлов на сайт; лимиты Functions (100 000 запросов/день).