Создаём веб-приложение с Claude Code: деплоим проект в Галактику Битрикс24

Привет! Продолжаем серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.

Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб-приложения. В туториалах мы будем использовать ИИ-агента для работы с приложениями на React — Claude Code.

Сами не программируем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат.

В прошлых статьях мы развернули сайт в интернете на сервере Битрикс24. Сегодня разберём этот вариант немного подробнее. Вместо отдельной виртуальной машины разместим приложение в изолированном контейнере внутри общей Галактики. Несколько приложений используют ресурсы одного хоста, поэтому такое размещение обходится дешевле.

Что сделаем и о чём расскажем сегодня

У нас есть IT-проект. Он несложный и служит только для учебных целей — мы показываем, как работать с агентом, чего ожидать и какие команды давать.

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

Следующий шаг на сегодня — разобраться с дополнительным способом деплоя. Сейчас мы используем сервер Black Hole. Это фиксированный объём мощностей, предназначенный для развитого мощного сервиса. Для небольших простых приложений это слишком много: гораздо выгоднее размещать их на небольших контейнерах гибкого объёма. Для такой задачи лучше подходят Галактики — эту технологию разбираем сегодня.

Что понадобится

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

Какие программы использует наш проект:

• Node.js для сборки сайта. Скачать можно на официальной странице: nodejs.org.

• Git Bash понадобится пользователям Windows: через него можно запускать команды из статьи. Скачать на официальной странице: git-scm.com/download/win
  На macOS и Linux те же команды выполняются во встроенном терминале.

• Язык программирования Python не нужен для самого сайта, потому что сайт будет написан на другом языке, JavaScript. Но Python полезен при разработке: ИИ-ассистент часто пишет на нём небольшие вспомогательные скрипты и быстро проверяет идеи. Скачать: python.org/downloads.

• Для деплоя в интернете нужен сервер. Мы используем серверы платформы вайб-кодинга Битрикс24 Вайбкод. Для их использования (и для большинства других серверов) нужна платная подписка на виртуальный сервер или собственный сервер.

Некоторые основные термины, которыми мы будем пользоваться

Это цикл статей о создании фронтенд-проекта на React.

Есть несколько основных терминов и технологий, которые появляются в нашем проекте. Если вам интересно, что это такое, вот краткий словарь-глоссарий:

Словарь терминов // спойлер

Сайт — это набор связанных между собой страниц в браузере. На сайте пользователь может читать информацию, нажимать кнопки, переходить между разделами и выполнять другие действия. Сайт состоит из страниц, интерфейсных элементов и кода.

Фронтенд — это только видимая часть сайта или веб-приложения. То есть страницы, кнопки, меню, формы для заполнения, с которыми может взаимодействовать пользователь — это всё фронтенд.

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

Компонент — отдельная часть интерфейса, из которой собирается страница. Компонентом может быть кнопка, карточка товара, всплывающее окно. Разработчик может использовать один и тот же готовый компонент в нескольких местах сайта.

JavaScript — язык программирования, который помогает делать страницы интерактивными. Благодаря JavaScript сайт может реагировать на действия пользователя, например открывать меню или показывать уведомления.

TypeScript — это расширение JavaScript, которое добавляет более строгую проверку кода. Это помогает раньше находить ошибки и делает проект понятнее, даже для ИИ-агента.

React — это инструмент для создания интерфейсов из готовых компонентов. Он помогает разработчику описать, из каких частей состоит страница и как она должна меняться при действиях пользователя.

Vite — технология для запуска и сборки фронтенд-проекта. Vite помогает быстро открыть проект на компьютере во время разработки, а потом подготовить его к публикации.

Tailwind нужен для настройки внешнего вида интерфейса. С его помощью разработчик устанавливает для компонентов отступы, цвета, размеры, шрифты и другие визуальные свойства.

API — набор команд, через которые одна программа управляет возможностями другой.

Репозиторий — папка проекта, размещённая в системе хранения кода, например на GitHub.

Скрипт — файл кода с последовательностью команд, которые выполняются автоматически.

Порт — условный номер канала, через который программа принимает обращения внутри сервера. В нашем случае Nginx слушает порт 3000.

На какой стадии проект сейчас и как его повторить

Мы работаем с агентом Claude во вкладке Code:

Ниже перечисляем все запросы к агенту с пояснениями, чтобы довести чистый проект примерно до того состояния, в котором он находится сейчас у нас.

Промпт 1. Создаём основу проекта

Создай минимальный пустой сайт на React, Vite и Tailwind CSS. Подключи компоненты shadcn/ui. TypeScript пока не используй — мы добавим его отдельно.

Промпт 2. Добавляем навигацию и форму заявки

Веб-приложение может содержать разные элементы интерфейса. Чтобы лучше понимать, что вообще можно добавить на свой сайт, мы сделали для вас сайт с визуальной библиотекой самых популярных фронтенд-компонентов shadcn/ui. Посмотреть это можно по адресу: app-117900122a91.vibecode.bitrix24.tech/. Выглядит примерно так:

Выбрав компоненты для своего сайта, их можно запросить у Claude обычным языком:

Добавь компонент Menubar с разделами «Главная», «О компании» и «Заявка».На странице «Заявка» создай форму с помощью компонента Form. После отправки формы показывай окно Dialog с подтверждением.

Промпт 3. Ваша кастомизация. Превращаем каркас в полноценный сайт

На этом этапе нужно описать тематику проекта, название компании, содержание страниц, язык интерфейса и требования к оформлению. В нашем примере это сайт студии JRPG-игр Tojita-Hon-Games.

Преобразуй текущий проект в сайт японской компании Tojita-Hon-Games, которая занимается разработкой JRPG-игр.Подбери бесплатное изображение для фона. Добавь на главную страницу раздел с сотрудниками компании: для каждого сотрудника укажи имя, должность, возраст и краткую биографию, а также добавь фотографию из бесплатного источника.Подбирай изображения, фон и цвета так, чтобы текст оставался хорошо читаемым. Весь текст на сайте должен быть на русском языке.

Промпт 4. Настраиваем сборку готовой версии сайта

Сборка сайта — это готовая версия проекта, подготовленная для запуска и публикации.

Во время разработки сайт состоит из исходных файлов, которые разработчику и агенту удобно редактировать. Команда сборки обрабатывает их, объединяет нужные части, уменьшает размер файлов и создаёт отдельную папку с готовым сайтом. Потом эту папку загружают на сервер.

Настрой процесс сборки проекта для публикации. После создания сборки запускай её локальный предпросмотр в браузере.

Промпт 5. Создаём документацию проекта

Команда ниже создаёт файл CLAUDE.md с основными сведениями о проекте. Ассистент сможет использовать его в следующих сессиях, чтобы учитывать структуру проекта, команды запуска и принятые правила работы.

/init

Промпт 6. Готовимся к деплою в режиме чтения

Даём агенту указания подготовиться и собрать всю информацию, чтобы сразу сделать работу максимально правильно.

Будем разворачивать статический сайт на платформу Битрикс24 Вайбкод. Изучи процесс по документации https://vibecode.bitrix24.tech/v1/me и по дополнительной инструкции https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy.Ключ для чтения: vibe_api_ВАШ_КЛЮЧ Скопируй папку deploy из этого репозитория в проект, задай имя приложения <имя-проекта> и выбери самый дешёвый тариф сервера, которого достаточно для статики. Сам деплой пока не запускай.

Промпт 7. Деплой и публикация

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

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

Промпт 8. После следующих правок — обновление опубликованного сайта 

Деплой — это фиксация, слепок кода на момент публикации. Сервер отдаёт ровно те файлы, что мы залили, и сам не обновляется, когда мы правим проект дальше. Поэтому, когда мы заменим что-то в коде, на живом сайте изменения отобразятся не сразу. Чтобы правки попали в интернет, нужно пересобрать и залить заново.

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

Промпт 9. Создаем репозиторий и первый коммит

Подключи Git к проекту, проверь .gitignore и создай первый коммит.

После следующих изменений используем один и тот же запрос для добавления коммитов:

Сохрани текущие изменения отдельным коммитом.

Промпт 10. Проверяем историю версий

Покажи историю коммитов.

Промпт 11. Отправляем проект на GitHub

Сначала нужно зарегистрироваться на GitHub и создать там пустой репозиторий — как это сделать, мы описали в предыдущей статье. Затем нужно скопировать адрес репозитория и передать агенту:

Подключи проект к этому репозиторию и отправь туда все коммиты:<ссылка на репозиторий>

Что такое Галактика

Мы проводим деплой нашего веб-приложения на мощностях Битрикс24 и используем платформу для вайбкодинга Битрикс24 Вайбкод.

Для деплоя через Вайбкод есть два варианта:

• Отдельный сервер в режиме Black Hole. Это собственная виртуальная машина приложения. Она закрыта от прямого доступа из интернета, а приложение открывается через защищённый адрес платформы.

• Галактика — общий большой сервер, внутри которого размещается несколько приложений. Каждому приложению выделяется своё отдельное пространство, поэтому приложения не смешиваются и не мешают друг другу.

В чём тут разница: сервер — это компьютер, на котором работают приложения. Виртуальная машина — виртуально созданный отдельный компьютер внутри более мощного физического сервера. У неё есть собственная операционная система, память и диск. Для приложения она выглядит почти как обычный отдельный сервер. 

Ещё есть контейнер. Это изолированное пространство для запуска приложения внутри уже работающего сервера или виртуальной машины. Вот Black Hole выдаёт приложению целую виртуальную машину. А Галактика состоит из контейнеров внутри виртуальной машины, и каждое приложение получает контейнер.

Это не значит, что любое приложение может уместиться в контейнер. Но чаще всего простому небольшому приложению таких объёмов хватает. Размер кода здесь почти ни на что не влияет. Например, приложение может занимать 20 МБ и при этом сильно нагружать процессор, а архив на 300 МБ может быть обычным сайтом с картинками.

Поэтому с точки зрения расхода ресурсов лучше начинать с Галактики — а если программе станет тесно в маленьком контейнере, её можно перенести на более вместительный Black Hole. 

Как выбрать деплой через Галактики

Стандартный вариант — выбрать тип размещения на странице Галактик:

Но надёжнее всё делать через агента — он занимается деплоем, поэтому его можно попросить использовать Галактику.

Деплоим приложение заново через Галактику с агентом 

У нас есть специальная документация, которую мы подготовили для агента:
https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy

Документация поможет ИИ разобраться, как правильно деплоить. Отдаём эту инструкцию агенту примерно в таком промпте:

Скопируй отсюда скрипт деплоя в Галактику deploy-galaxy.sh:
https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy

В предыдущей статье мы уже копировали инструкции из этого репозитория, поэтому агент отвечает, что у нас уже есть всё для деплоя. Единственное, что можно поменять — имя приложения.

Попробуем заменить имя приложения и запросить агента провести деплой в Галактику:

Поменяй имя на tojita-hon-games-galaxy-v1 и разверни сайт в Галактике

Нейросеть может снова запросить у вас API-ключ для платформы. Как это сделать, мы подробно рассказывали в статье про деплой на Black Hole в разделе Как авторизоваться на платформе и получить ключ для ИИ-агента.

После окончания деплоя в рабочем пространстве появляется Галактика и задеплоенное на ней приложение:

Добавляем линтер

Это один из этапов вайб-кодинга, который стоит добавлять в любой работе.

В статье про подготовку дистрибутива мы рассказывали про короткие команды в терминале, которые начинаются со слов npm run. Команда npm run lint запускает программу-линтер, которая проверяет код на наиболее подозрительные конструкции и нарушения стиля, которые стоит переписать. Линтер самостоятельно ничего не меняет, но он может указать ИИ на то, что следует исправить. 

Попробуем проверить наш проект и посмотреть, сколько ошибок найдёт линтер:

Сейчас у нас показаны 3 предупреждения. Добавим инструкцию агенту: запускать линтер перед каждым коммитом и деплоем. Вот точный технический промпт, который заставит агента проверять всю работу и поможет сократить количество ошибок:

После каждого изменения запускай линтер для затронутых файлов. Перед коммитом и перед деплоем запускай полную проверку проекта.

Исправляй все ошибки линтера. Не отключай правила, не добавляй исключения и не используй комментарии подавления вроде eslint-disable, noqa или @ts-ignore без явного обоснования.

Коммит и деплой разрешены только при успешном завершении линтера с кодом возврата 0. Если проверка не проходит, остановись, исправь проблему и запусти ее повторно.

После проверки сообщай краткий результат: какая команда выполнена, прошла ли она успешно и остались ли предупреждения.

Добавь это правило в CLAUDE.md.

Здесь мы добавили ещё одну вещь — запрет агенту игнорировать какие-то строки кода при проверке. Иногда проверку некоторых строк действительно нужно игнорировать, например из-за ошибки в сторонней библиотеке. Но агент может использовать их как быстрый обход и оставить потенциальную проблему в коде.

Вносим правки в приложение и деплоим с новым именем

Для демонстрации работы Галактик внесём небольшую правку и задеплоим проект заново.

Сейчас главная страница выглядит так:

Попросим агента заменить Киото на Йокогаму:

Замени на главной странице «из Киото» на «из Йокогамы»

Сначала проверяем, что правка внесена:

Агент предлагает заменить город в остальных упоминаниях, но нам это пока не нужно. Вместо этого попробуем задеплоить сайт заново.

Скрипт хранит идентификатор созданного приложения в файле deploy/.vibe-galaxy. При следующем запуске он находит этот файл и обновляет прежнее приложение.

Чтобы намеренно создать второе приложение, удалим .vibe-galaxy. После этого скрипт не найдёт прежний идентификатор и создаст новое galaxy-приложение. Но обратите внимание, что это поведение конкретного скрипта из репозитория, а не общее правило платформы Вайбкод.

По запросу ниже у нас должно появиться новое приложение:

Удали .vibe-galaxy и задеплой с новым именем: tojita-hon-games-galaxy-v2

Когда агент отчитывается об успешном деплое, можно проверить кабинет Битрикс24 Вайбкод и увидеть, что там появилось новое приложение:

Добавим ещё правку: отдельный URL для каждой страницы на сайте.

Добавь URL для открываемых страниц сайта, чтобы можно было их передать другим людям, и они попали на нужные страницы

Проверяем, что адрес страницы меняется — пока только на dev-сервере:

Коммитим изменения, отправляем новую версию на удалённый сервер и деплоим:

Закоммить изменения, отправь коммит на удалённый сервер и задеплой новую версию

Готово — новая версия работает и открывается по адресу
app-7862a20f8005.vibecode.bitrix24.tech/request: 

Что дальше

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

Источник: habr.com