🎯 О чём этот конспект: Пошаговое руководство по публикации веб-приложений, созданных с помощью AI (на примере Lovable.dev), на различные платформы. Разбираются способы от простейшего бесплатного хостинга до профессиональной настройки собственного виртуального сервера (VPS).
👤 Кому будет полезно: Вайбкодерам и разработчикам, которые создают продукты на Cursor, Lovable, Bolt или Windsurf и хотят вывести их в продакшн с рабочими доменами и формами.
✨ Что получите: Вы научитесь привязывать GitHub-репозиторий к сервисам деплоя, настраивать кастомные домены, обходить ограничения доступа из РФ без VPN и автоматизировать обновление сайта при изменении кода.
1. Подготовка: Связка Lovable (AI) → GitHub
Контекст: Прежде чем публиковать сайт, его исходный код должен находиться в системе контроля версий. Инструменты генерации (как Lovable) позволяют экспортировать код напрямую в GitHub. Это создает «фундамент» для автоматизации: как только AI вносит правку, она улетает в репозиторий, а оттуда — сразу на работающий сайт.
Выгода: Полный контроль над кодом и возможность мгновенного обновления сайта без ручной перезаливки файлов.
Как применить:
- Шаг 1: Авторизация — Зайдите на GitHub.com и создайте аккаунт, если его нет.
- Шаг 2: Коннект в Lovable — В интерфейсе Lovable.dev нажмите на иконку котика (GitHub) в правом верхнем углу.
- Шаг 3: Экспорт — Нажмите
Connect Project, выберите свой аккаунт и создайте новый репозиторий. Теперь ваш код живет на GitHub.
Результат: У вас есть репозиторий с файлами проекта, готовый к деплою на любой сервис.
2. Деплой на Vercel: Быстрый старт и нюансы с VPN
Контекст: Vercel — это стандарт индустрии для фронтенд-фреймворков (Next.js, React, Vite). Он максимально прост в настройке: достаточно выбрать репозиторий, и через минуту сайт в сети. Однако есть критическая проблема для пользователей из РФ: сайты на Vercel с кастомными доменами часто не открываются без VPN.
Выгода: Бесплатный SSL, автоматический деплой, лимит до 200 000 посещений в месяц на бесплатном тарифе (Hobby).
Как применить:
- Шаг 1: Импорт проекта — Зайдите на Vercel.com через GitHub. Нажмите
Add New->Project. - Шаг 2: Сборка — Найдите свой репозиторий, нажмите
Importи затемDeploy. Настройки сборки для проектов из Lovable (Vite) подтягиваются автоматически. - Шаг 3: Настройка домена — В панели проекта перейдите в
Settings->Domains. Введите свой домен (например,mysite.ru). - Шаг 4: DNS-записи — В панели регистратора доменов (например, Reg.ru) добавьте A-запись:
Type: A
Name: @
Value: 76.76.21.21 (IP Vercel)Результат: Сайт доступен по технической ссылке .vercel.app (работает везде) и по вашему домену (может требовать VPN).
3. Кастомизация: Замена Favicon через GitHub
Контекст: При экспорте из AI-инструментов на сайте часто остается логотип сервиса (например, сердечко Lovable). Чтобы сделать проект профессиональным, нужно заменить иконку во вкладке браузера.
Выгода: Уникальный брендинг вашего продукта.
Как применить:
- Шаг 1: Подготовка — Создайте иконку в Figma/Photoshop и сконвертируйте её в формат
.ico(через любой онлайн-конвертер "PNG to ICO"). - Шаг 2: Замена в GitHub — В репозитории зайдите в папку
public. Удалите старый файлfavicon.ico. - Шаг 3: Загрузка — Нажмите
Upload filesи загрузите свой файл с тем же названиемfavicon.ico. НажмитеCommit changes.
Результат: Vercel/Netlify автоматически пересоберут сайт, и через минуту на нем появится ваша иконка.
4. Netlify: Альтернатива для простых лендингов
Контекст: Netlify похож на Vercel, но имеет другую систему лимитов (кредиты). Он отлично подходит для простых HTML/JS сайтов. Основной минус тот же — проблемы с доступностью кастомных доменов в РФ без VPN.
Выгода: Бесплатный тариф включает 300 кредитов сборки и 100 Гб трафика.
Как применить:
- Шаг 1: Подключение — На Netlify.com выберите
Import from GitHub. - Шаг 2: Авторизация — Разрешите доступ к конкретному репозиторию.
- Шаг 3: Деплой — Нажмите
Deploy [название проекта]. - Шаг 4: Домен — В
Domain settingsдобавьте свой домен и обновите A-запись у регистратора на IP, который укажет Netlify.
Результат: Работающий сайт с автоматическим обновлением при каждом пуше в GitHub.
5. Профессиональный деплой на VPS (Beget + Docploy)
Контекст: Это "ультимативный" способ для вайбкодеров. Собственный виртуальный сервер (VPS) позволяет сайту открываться в РФ БЕЗ VPN на кастомном домене. Использование связки Docker + Docploy превращает голый сервер в удобную панель управления, похожую на Vercel.
Выгода: Сайт работает везде, фиксированная цена (от ~400-900 руб/мес), нет лимитов на количество посещений (ограничено только мощностью железа).
Как применить:
- Шаг 1: Аренда сервера — На Beget.com создайте виртуальный сервер (Cloud). Выберите Ubuntu 22.04/24.04. Для лендинга хватит 2 CPU / 2 RAM.
- Шаг 2: Подключение — Используйте Termius (или любой SSH-клиент). Введите IP сервера, логин
rootи ваш пароль. - Шаг 3: Установка Docker и Docploy — Выполните команды в терминале:
# Обновление системы
apt update && apt upgrade -y
# Установка Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
# Установка Docploy (инструмент управления деплоем)
curl -sSL https://docploy.io/install.sh | sh- Шаг 4: Настройка Docploy — Перейдите по ссылке, которую выдаст терминал (ваш-ip:порт). Создайте проект, привяжите GitHub и выберите репозиторий.
- Шаг 5: Конфигурация порта — В настройках сервиса в Docploy укажите порт
5173(стандарт для Vite/Lovable). - Шаг 6: Домен и SSL — В настройках Docploy добавьте свой домен и выберите
Let's Encryptдля бесплатного HTTPS. Не забудьте направить A-запись домена на IP вашего сервера.
Результат: Профессионально настроенный сервер с автоматическим деплоем, который работает стабильно и быстро в любой точке мира.
FAQ
В: Почему мой сайт на Vercel не открывается у друзей из России?
О: Vercel использует IP-адреса, которые часто блокируются или плохо маршрутизируются в РФ для кастомных доменов. Технические домены *.vercel.app обычно работают, но для серьезного проекта лучше использовать VPS с российским IP (например, Beget или Timeweb).
В: Сколько стоит содержать свой сервер для AI-приложения?
О: Минимальный комфортный сервер обойдется в 400–600 рублей в месяц. Это покроет нужды лендинга с трафиком до 10-20 тысяч человек в день. Если проект вырастет, можно просто передвинуть ползунки мощности в панели провайдера.
В: Что такое порт 5173 и почему он важен?
О: Это порт по умолчанию для инструмента сборки Vite, который используют Lovable и многие современные AI-генераторы. Если в настройках деплоя (например, в Docploy) указать неправильный порт, сервер не поймет, куда направлять трафик, и сайт выдаст ошибку 502.
В: Как обновлять сайт после правок в Cursor или Lovable?
О: Если вы настроили связку с GitHub, вам ничего не нужно делать вручную. Как только изменения попадают в ветку main, Vercel или Docploy увидят это и автоматически запустят пересборку (процесс занимает 1-2 минуты).
В: Можно ли на одном VPS держать несколько разных сайтов?
О: Да, с помощью Docploy или Docker вы можете запустить десятки разных лендингов на одном сервере, пока хватает оперативной памяти (RAM). Это гораздо выгоднее, чем платить за каждый проект отдельно.
Конспект создан на основе видео «Как опубликовать свой сайт в интернет? Деплой сайта на Vercel, Netlify, GitHub Pages и свой VPS» канала The_S_A_V. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=e6ory8G7o3s
Vercel
Lovable