Конспект: Claude AI: Как запустить AI-сайт на реальном домене с базой данных за 10 минут — VibCoderZ - VibeCoderz

Загрузка...

🎯 О чём этот конспект: Пошаговое руководство по превращению кода, сгенерированного Claude AI, в полноценный работающий бизнес-сайт. Вы узнаете, как развернуть проект на реальном домене, настроить автоматическое обновление через GitHub и подключить бесплатную базу данных Supabase для сбора лидов.

👤 Кому будет полезно: Вайбкодерам, предпринимателям и разработчикам, которые хотят быстро запускать MVP или клиентские сайты, используя мощь AI-агентов, не погружаясь в ручную настройку серверов.

✨ Что получите: Готовый стек для быстрой разработки: Claude Desktop + GitHub + Hostinger + Supabase. Вы сможете вносить изменения в Claude, и они будут мгновенно отображаться на живом сайте.

1. Подготовка локальной среды разработки

Контекст: Чтобы Claude мог не просто писать код, а создавать полноценные приложения, ему нужен доступ к вашей локальной системе. Установка Node.js необходима для запуска JavaScript/Next.js на вашем компьютере, а Git — для синхронизации кода с облачными сервисами. Это превращает Claude из чат-бота в полноценного инженера, работающего в вашем рабочем пространстве.

Тайминг: [01:32], [01:46], [02:18]

Выгода: Возможность предпросмотра сайта на Localhost перед публикацией и корректная работа AI-агента с файловой системой.

Как применить:

Шаг 1: Установка Node.js — Node.js — Скачайте и установите LTS версию. Это позволит браузеру исполнять код вашего сайта локально.
Шаг 2: Установка Git — Git — Установите со стандартными настройками. Это инструмент для контроля версий, который свяжет ваш ПК с GitHub.
Шаг 3: Claude Desktop — Claude App — Обязательно используйте десктопную версию Claude, так как веб-версия не имеет прямого доступа к локальным файлам и инструментам (Claude Code).

Результат: Ваша система готова к "вайбкодингу" — Claude сможет создавать папки и файлы прямо на вашем диске.

2. Генерация проекта и локальный запуск

Контекст: Автор рекомендует использовать фреймворк Next.js из-за его чистоты и оптимизации. Вместо того чтобы просить Claude просто "написать код", мы сначала генерируем детальный промпт для Claude Code, а затем запускаем процесс сборки в локальной папке.

Тайминг: [02:30], [02:55], [03:26]

Выгода: Профессиональная структура проекта, которую легко масштабировать и поддерживать.

Как применить:

Шаг 1: Создание промпта — В обычном чате Claude попросите создать детальную инструкцию для разработки.

I want to create a modern real estate website using Next.js. Create a prompt for Claude Code to build this website with clean code and modern animations.

Шаг 2: Инициализация в Claude Desktop — Нажмите кнопку "Code" в приложении, выберите пустую папку на рабочем столе и вставьте полученный промпт.
Шаг 3: Запуск Dev-сервера — Чтобы видеть изменения в реальном времени, используйте команду:

I want you to have the dev server running so I can see the application while developing it.

Результат: Работающий сайт на localhost:3000, который можно редактировать командами в чате.

3. Синхронизация с GitHub и деплой на Hostinger

Контекст: Чтобы сайт стал доступен всему миру, код должен храниться в облаке. GitHub выступает мостом между вашим компьютером и хостингом. Hostinger выбран автором из-за наличия специального установщика Node.js приложений, который упрощает деплой до нескольких кликов.

Тайминг: [03:56], [04:28], [05:48], [06:57]

Выгода: Автоматический деплой. Как только вы сохраняете изменения в Claude, они улетают на GitHub, а оттуда — сразу на ваш живой домен.

Как применить:

Шаг 1: Инициализация Git — В Claude Code введите:

I want to initiate a Git repository for this project.

Шаг 2: Связка с GitHub — Создайте пустой репозиторий на GitHub, скопируйте URL и попросите Claude:

Link it with the online repo with the following commands: [Вставьте команды из GitHub, начинающиеся с git remote add origin...]

Шаг 3: Настройка Hostinger — Перейдите в панель Hostinger, выберите план с поддержкой Node.js, подключите свой GitHub аккаунт и выберите нужный репозиторий. Нажмите "Deploy".

Результат: Ваш AI-сайт работает на реальном домене (например, wilsonai.com) с бесплатным SSL и защитой.

4. Подключение базы данных Supabase через MCP

Контекст: Большинство сайтов бесполезны без возможности сохранять данные (лиды, контакты). Supabase — это Open Source альтернатива Firebase. С помощью протокола MCP (Model Context Protocol) Claude может напрямую подключаться к вашей базе данных и создавать таблицы.

Тайминг: [09:11], [09:57], [10:54], [11:43]

Выгода: Полноценный бэкенд без написания SQL-запросов вручную.

Как применить:

Шаг 1: Подключение коннектора — В настройках Claude Desktop перейдите в Connectors -> Browse -> Supabase и авторизуйте доступ.
Шаг 2: Установка агента — В Supabase выберите Connect -> MCP -> Claude Code и скопируйте команду установки. Выполните её в Claude.
Шаг 3: Интеграция базы — Используйте "Золотой промпт" для настройки (замените URL и KEY на свои из панели Supabase):

I want to implement Supabase into this application to make the Next.js dynamic. I don't want authentication for now. Allow every user to access our application and submit forms. Make sure you install the following libraries: npm install @supabase/supabase-js. And these are the environmental variables that you need to connect locally to the database:
NEXT_PUBLIC_SUPABASE_URL=your_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key
Make sure you add these variables to the .env file.

Результат: Формы на вашем сайте теперь сохраняют данные в таблицу Supabase в реальном времени.

5. Перенос переменных окружения в Production

Контекст: Локальные настройки базы данных не работают на живом сервере автоматически. Нужно явно указать Claude, чтобы он прописал ключи доступа для "боевой" версии сайта.

Тайминг: [12:50], [13:12]

Выгода: Работающая форма обратной связи на опубликованном сайте.

Как применить:

Шаг 1: Команда на перенос — Введите в Claude:

Adjust the .gitignore to allow environmental production. Add environmental production with the two variables, commit and push:
NEXT_PUBLIC_SUPABASE_URL=your_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key

Шаг 2: Проверка — Зайдите на свой живой сайт, заполните форму и проверьте раздел Table Editor в Supabase. Данные должны появиться там мгновенно.

Результат: Полностью завершенный цикл разработки: от идеи до работающего веб-сервиса с базой данных.

FAQ

В: Почему нельзя просто скопировать код из чата Claude в файл index.html? О: Современные сайты используют фреймворки (Next.js), которые требуют сборки. Метод из видео позволяет создавать сложные многостраничные приложения с анимациями и логикой, которые невозможно запустить простым открытием HTML-файла.

В: Сколько стоит такой стек технологий? О: Claude (есть бесплатный лимит), GitHub (бесплатно), Supabase (бесплатно до определенного объема данных). Единственная платная часть — хостинг и домен (Hostinger), что составляет около $3-5 в месяц.

В: Что делать, если при деплое на Hostinger возникает ошибка "Failed"? О: Нажмите на стрелочку рядом со статусом ошибки в панели Hostinger, скопируйте текст ошибки (лог) и вставьте его в Claude с вопросом: "Я получил эту ошибку при деплое, как её исправить?". AI сам поправит код и предложит сделать новый push в GitHub.

В: Можно ли добавить регистрацию пользователей (Auth)? О: Да, Supabase поддерживает аутентификацию. Вы можете попросить Claude: "Add Supabase Auth to this project so users can sign up and log in", и он обновит логику приложения.

В: Безопасно ли хранить ключи Supabase в коде? О: В видео используется NEXT_PUBLIC_ префикс для анонимных ключей, которые предназначены для доступа из браузера. Для критических данных автор рекомендует настраивать политики доступа (RLS) в самой Supabase.

Ресурсы и ссылки

Claude AI — Основной AI-инструмент для кодинга — https://claude.ai
Node.js — Среда выполнения JavaScript — https://nodejs.org
Git — Система контроля версий — https://git-scm.com
GitHub — Облачное хранилище кода — https://github.com
Hostinger — Хостинг с поддержкой Node.js и автоматическим деплоем — упомянут в видео (скидка по коду DARYL10)
Supabase — Облачная база данных (альтернатива Firebase) — https://supabase.com

Конспект создан на основе видео «How To Launch An AI Website On A Real Domain (Claude AI)» канала Daryl Wilson. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/MQk8xyZEKYg