4.2: Деплой и запуск

Ключевое: Деплой -- это момент, когда твой проект перестаёт быть «файлами на компьютере» и становится настоящим сайтом в интернете. В этом уроке ты пройдёшь весь путь: от localhost до production-сайта с собственным доменом, HTTPS и мобильной адаптацией.

Обзор

До этого момента ты видел свой проект только на localhost -- локальном сервере, который работает на твоём компьютере. Набрал localhost:3000 в браузере -- сайт открылся. Выключил сервер -- сайт исчез. Никто в мире, кроме тебя, не может его увидеть. Это нормально для разработки, но бесполезно для бизнеса.

Деплой (deployment) -- это процесс размещения проекта на удалённом сервере, доступном из любой точки мира. После деплоя у твоего сайта появляется публичный адрес, по которому его может открыть кто угодно -- потенциальные клиенты, инвесторы, друзья, которым ты хочешь показать свой продукт.

Раньше деплой был мучительным процессом. Нужно было арендовать сервер (VPS), настраивать операционную систему, устанавливать веб-сервер (nginx), настраивать SSL-сертификат, создавать скрипты для обновления... Это занимало часы и требовало глубоких технических знаний. Одна ошибка -- и сайт лежит. Сегодня всё изменилось. Платформы вроде Vercel, Netlify и Railway автоматизировали весь процесс. Деплой нового сайта на Vercel занимает буквально 2 минуты.

Vercel -- наш выбор по нескольким причинам. Он создан командой, которая разработала Next.js (фреймворк, на котором работает твой проект). Это означает идеальную совместимость. Бесплатный тариф покрывает все потребности стартапа: 100 ГБ трафика в месяц, автоматический HTTPS, мгновенный деплой, preview deployments для каждого коммита. Для соло-фаундера, запускающего MVP, этого более чем достаточно.

В этом уроке мы пройдём весь путь от localhost до полноценного production-сайта. Ты научишься деплоить проект, подключать собственный домен, настраивать переменные окружения и отлаживать типичные ошибки. К концу урока у тебя будет работающий сайт, доступный всему миру.

Чему научишься

Разница между localhost и production

Когда ты запускаешь npm run dev, на твоём компьютере стартует локальный сервер разработки. Он доступен только тебе, по адресу localhost:3000. Это идеальная среда для разработки: изменения применяются мгновенно, ошибки подробно описаны, можно экспериментировать без последствий.

Production (продакшен) -- это совершенно другая среда. Сайт работает на удалённом сервере, доступен по публичному адресу, обслуживает реальных пользователей. В production код оптимизирован: файлы сжаты, изображения оптимизированы, кэширование включено. Сайт работает быстрее, но ошибки менее подробны (чтобы не показывать внутренности системы пользователям).

Ключевые различия, которые важно понимать:

Эти различия объясняют, почему проект может работать на localhost и ломаться на production. Самая частая причина -- переменные окружения: на локальном компьютере они читаются из файла .env, а на сервере их нужно настроить отдельно. Об этом -- ниже.

Деплой на Vercel: пошаговый процесс

Деплой на Vercel -- один из самых простых процессов в современной веб-разработке. Вот что нужно сделать:

Шаг 1: Регистрация на Vercel. Заходишь на vercel.com и нажимаешь «Sign Up». Лучший вариант -- авторизация через GitHub. Это сразу свяжет аккаунты и упростит настройку деплоя.

Шаг 2: Импорт репозитория. После авторизации Vercel покажет список твоих GitHub-репозиториев. Выбираешь нужный и нажимаешь «Import». Vercel автоматически определит, что это Next.js-проект, и предложит правильные настройки.

Шаг 3: Настройка проекта. Vercel покажет несколько параметров: название проекта, корневую директорию (если код не в корне репозитория), команды для сборки. Обычно всё определяется автоматически, но иногда нужно указать корневую директорию -- например, website, если код в подпапке.

Шаг 4: Деплой. Нажимаешь «Deploy», и Vercel начинает сборку. Процесс занимает 30-90 секунд. В реальном времени ты видишь логи: установка зависимостей, сборка проекта, оптимизация. Если всё прошло успешно -- поздравляю, твой сайт в интернете.

После деплоя Vercel выдаёт URL вида your-project.vercel.app. Это уже рабочий сайт, который можно отправить кому угодно. Позже мы подключим собственный домен.

Переменные окружения (Environment Variables)

Переменные окружения -- это настройки, которые различаются между средами. Например, API-ключ для платёжной системы: на localhost ты используешь тестовый ключ (чтобы не списывать реальные деньги), а на production -- боевой.

В локальной разработке переменные хранятся в файле .env.local:

NEXT_PUBLIC_SITE_URL=http://localhost:3000
PAYMENT_API_KEY=test_key_12345
ANALYTICS_ID=UA-000000-0

На Vercel переменные настраиваются в панели управления: Settings --> Environment Variables. Для каждой переменной можно указать, в какой среде она действует: Production, Preview или Development.

Важное правило: переменные с префиксом NEXT_PUBLIC_ доступны в браузере (на клиенте). Переменные без этого префикса -- только на сервере. API-ключи для платежей и других чувствительных сервисов никогда не должны иметь префикс NEXT_PUBLIC_.

Подключение собственного домена

Сайт на your-project.vercel.app работает, но для бизнеса нужен собственный домен. Это вопрос доверия: пользователи и инвесторы воспринимают flowai.ru серьёзнее, чем flowai-landing.vercel.app.

Где купить домен:

Для российского рынка рекомендуем reg.ru и домен в зоне .ru -- привычно для аудитории и дёшево. Для международного -- Namecheap и зона .com.

Настройка DNS

DNS (Domain Name System) -- это система, которая связывает доменное имя (flowai.ru) с сервером, где расположен сайт. Когда пользователь вводит адрес в браузере, DNS «переводит» его в IP-адрес сервера.

Для подключения домена к Vercel нужно добавить две DNS-записи у регистратора домена:

A-запись -- указывает на IP-адрес Vercel (76.76.21.21) CNAME-запись -- для поддомена www, указывает на cname.vercel-dns.com

Процесс выглядит так:

1. В панели Vercel заходишь в Settings --> Domains
2. Вводишь своё доменное имя
3. Vercel показывает, какие DNS-записи нужно добавить
4. Заходишь в панель регистратора домена и добавляешь эти записи
5. Ждёшь 5-30 минут, пока DNS обновится (иногда до 48 часов, но обычно быстрее)

После обновления DNS Vercel автоматически выпустит HTTPS-сертификат через Let's Encrypt. Это означает, что твой сайт будет работать по защищённому протоколу (https://) без каких-либо дополнительных действий с твоей стороны. HTTPS важен не только для безопасности -- Google понижает в выдаче сайты без HTTPS, а браузеры показывают предупреждение «Небезопасный сайт».

Мобильное тестирование

Более 70% трафика в России приходит с мобильных устройств. Если твой сайт плохо выглядит на телефоне, ты теряешь большинство потенциальных клиентов. Тестирование на мобильных -- обязательный шаг после деплоя.

Есть несколько способов протестировать:

Реальное устройство -- лучший вариант. Открой URL на своём телефоне и пройди весь пользовательский путь: прочитай текст, нажми все кнопки, заполни формы. Обрати внимание на размер шрифта (не слишком мелкий?), размер кнопок (можно ли попасть пальцем?) и горизонтальную прокрутку (её не должно быть).

DevTools в браузере -- быстрый способ проверить разные размеры экрана. В Chrome нажми F12, затем иконку телефона в верхней панели. Можно выбрать конкретные устройства (iPhone 14, Samsung Galaxy S21) или задать произвольный размер экрана.

Lighthouse -- встроенный инструмент Chrome для оценки качества сайта. Открой DevTools --> вкладка Lighthouse --> нажми «Analyze page load». Получишь оценки по производительности, доступности, SEO и лучшим практикам. Для MVP целься в 80+ баллов по каждому параметру.

Типичные ошибки деплоя и как их исправить

Даже когда на localhost всё работает идеально, на production могут возникнуть ошибки. Вот самые частые и их решения:

Build failed: Module not found -- Vercel не может найти модуль. Обычно причина в том, что зависимость не указана в package.json или есть опечатка в имени импорта. Проверь, что npm install проходит без ошибок локально.

Error: Environment variable not found -- переменная окружения не настроена на Vercel. Зайди в Settings --> Environment Variables и добавь все переменные из .env.local.

404 на страницах -- страницы работают на localhost, но возвращают 404 на production. Для статических сайтов (static export) убедись, что output: 'export' указан в next.config.js и файл _redirects или конфигурация маршрутов настроена корректно.

Изображения не загружаются -- пути к изображениям могут отличаться на production. Используй относительные пути (/images/logo.png), а не абсолютные (C:\Users\...). Также проверь регистр файлов: macOS не различает Logo.png и logo.png, а Linux (на котором работает Vercel) -- различает.

Сайт выглядит иначе -- кэш браузера может показывать старую версию. Попробуй жёсткое обновление (Ctrl+Shift+R) или открой в режиме инкогнито. Если проблема сохраняется -- проверь, что все стили подключены корректно.

Что ты создашь

• Production-деплой на Vercel -- рабочий сайт, доступный по публичному URL
• Настроенные переменные окружения -- все API-ключи и настройки для production
• Подключённый домен -- собственный адрес вместо *.vercel.app (если есть домен)
• HTTPS-сертификат -- автоматически выпущенный через Let's Encrypt
• Чеклист мобильного тестирования -- проверенный сайт на реальном устройстве и DevTools
• Документ с настройками деплоя -- все URL, настройки DNS и переменные в одном месте

Как это работает на практике

Шаг 1: Подготовка к деплою

Claude проверит, что проект готов к деплою: все зависимости установлены, package.json корректен, сборка (npm run build) проходит без ошибок локально. Это важно -- если сборка падает на твоём компьютере, она упадёт и на Vercel.

Шаг 2: Первый деплой на Vercel

Подключаем GitHub-репозиторий к Vercel, настраиваем параметры проекта и запускаем первый деплой. Claude проведёт тебя через каждый шаг и поможет разобраться с настройками.

Шаг 3: Настройка переменных окружения

Переносим все переменные из .env.local в панель Vercel. Claude поможет определить, какие переменные нужны для production и какие значения использовать.

Шаг 4: Подключение домена (опционально)

Если у тебя уже есть домен или ты готов его купить, настроим DNS и подключим его к Vercel. Если домена пока нет -- не проблема, *.vercel.app прекрасно работает для MVP.

Шаг 5: Мобильное тестирование

Проверяем сайт на мобильных устройствах и в DevTools. Исправляем найденные проблемы с отображением. Запускаем Lighthouse и работаем над улучшением оценок.

Шаг 6: Документирование

Создаём документ с настройками деплоя: URL production-сайта, URL панели Vercel, список переменных окружения, настройки DNS. Этот документ сэкономит время, когда нужно будет что-то проверить или изменить.

Лучшие практики

• Всегда проверяй сборку локально перед push. Команда npm run build должна проходить без ошибок на твоём компьютере. Если она падает локально -- она упадёт и на Vercel. Чини локально, потом пушь.

• Используй preview deployments. Vercel создаёт отдельный деплой для каждого коммита. Это значит, что ты можешь проверить изменения на реальном сервере, не затрагивая production. URL вида your-project-abc123.vercel.app -- это preview, и он доступен только тебе.

• Храни переменные окружения в безопасности. Не записывай production-ключи в заметки или мессенджеры. Используй менеджер паролей (1Password, Bitwarden) или хотя бы отдельный документ с защитой. Потеря API-ключа платёжной системы -- это серьёзная проблема.

• Настрой уведомления о деплое. В Vercel можно подключить Telegram-бота или email-уведомления. Ты будешь знать, когда деплой прошёл успешно, а когда -- упал. Это особенно важно, если ты пушишь из Claude Code и не заходишь в панель Vercel.

• Тестируй на медленном интернете. В DevTools можно включить Network Throttling (вкладка Network --> Throttle --> Slow 3G). Если сайт загружается дольше 5 секунд на медленном соединении -- нужно оптимизировать.

• Проверяй OG-теги после деплоя. Когда кто-то делится ссылкой на твой сайт в Telegram или Twitter, показывается превью (заголовок, описание, картинка). Это определяется OG-тегами. Проверь их через ogp.me или шаринг в Telegram.

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

Частые вопросы

Сколько стоит хостинг на Vercel? Бесплатный тариф (Hobby) включает 100 ГБ трафика в месяц, неограниченные деплои, автоматический HTTPS и один домен. Этого хватит на тысячи посетителей в день. Платный тариф (Pro, $20/месяц) нужен только для коммерческих проектов с большим трафиком или если нужна командная работа.

Что такое preview deployment и зачем он нужен? Каждый раз, когда ты пушишь коммит на GitHub, Vercel создаёт отдельный деплой с уникальным URL. Это позволяет проверить изменения на реальном сервере, не затрагивая production. Если всё выглядит хорошо -- мержишь в main, и production обновится. Если нет -- исправляешь и пушишь снова.

Мой сайт работает на localhost, но не работает на Vercel. Что делать? В 90% случаев причина -- переменные окружения. Проверь, что все переменные из .env.local добавлены в Vercel. Затем проверь логи сборки на Vercel (Deployments --> нажми на деплой --> Logs). Там будет точная ошибка. Claude поможет расшифровать и исправить.

Нужно ли мне покупать домен для MVP? Нет. your-project.vercel.app -- вполне рабочий URL для MVP. Но если ты хочешь выглядеть профессиональнее и собираешься показывать продукт клиентам или инвесторам -- домен стоит 200-900 рублей в год, и это одна из лучших инвестиций на старте.

Как откатить деплой, если новая версия сломала сайт? В панели Vercel зайди в Deployments, найди последний рабочий деплой и нажми «Promote to Production». Сайт мгновенно откатится к этой версии. Это одно из главных преимуществ Vercel -- откат занимает секунды, а не минуты.

Как долго обновляется DNS при подключении домена? Обычно 5-30 минут, но может занять до 48 часов. Это зависит от регистратора домена и настроек TTL. Если через час DNS не обновился -- проверь правильность записей через сервис dnschecker.org. Частая ошибка -- добавление лишней точки в конце CNAME-записи.

Запуск

/start-4-2

Следующий урок: Лендинг, который продаёт -->