Привет! Меня зовут Игорь Росляков, я технический писатель. Я готовлю серию статей‑туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.
Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб‑приложения. В туториалах мы будем использовать ИИ‑агента для работы с приложениями на React — Claude Code.
Сами не программируем — всю работу проводит ИИ‑агент, а мы пишем запросы и контролируем результат.
В прошлой статье мы довели проект до готового дистрибутива: готового и оптимизированного набора файлов, подготовленного для размещения на сервере, чтобы пользователи могли видеть и работать с нашим приложением.
Сегодня задеплоим наш дистрибутив и посмотрим, как это выглядит. Всё техническое объясняем простыми словами с минимальными подробностями, чтобы было понятно общее устройство.
Что понадобится
Для деплоя проекта нужен веб‑сервер — постоянно включенный компьютер с доступом к интернету, на котором мы сможем разместить наше приложение.
Мы используем ресурсы Битрикс24 — для запуска такого же сервера нужна регистрация на портале и активная подписка BitrixGPT + Маркетплейс — без неё платформа не выдаёт серверы.
Ещё на компьютер нужно установить несколько простых программ:
Node.js для сборки сайта. Скачать можно на официальной странице: nodejs.org.
Git Bash понадобится пользователям Windows: через него можно запускать команды из статьи. Скачать на официальной странице: git‑scm.com/download/win
На macOS и Linux те же команды выполняются во встроенном терминале.Язык программирования Python не нужен для самого сайта, потому что сайт будет написан на другом языке, JavaScript. Но Python полезен при разработке: ИИ‑ассистент часто пишет на нём небольшие вспомогательные скрипты и быстро проверяет идеи. Скачать: python.org/downloads.
Некоторые термины, которыми мы будем пользоваться
Это цикл статей о создании фронтенд‑проекта на React.
Есть несколько основных терминов и технологий, которые появляются в нашем проекте. Если вам интересно, что это такое, вот краткий словарь‑глоссарий:
Словарь:
Сайт — это набор связанных между собой страниц в браузере. На сайте пользователь может читать информацию, нажимать кнопки, переходить между разделами и выполнять другие действия. Сайт состоит из страниц, интерфейсных элементов и кода.
Фронтенд — это только видимая часть сайта или веб‑приложения. То есть страницы, кнопки, меню, формы для заполнения, с которыми может взаимодействовать пользователь — это всё фронтенд.
Бэкенд — внутренняя часть сайта или веб‑приложения, которая не видна пользователю напрямую. Бэкенд отвечает за данные, регистрацию, вход, сохранение настроек. Например, когда пользователь отправляет форму на сайте, фронтенд только показывает эту форму, а бэкенд принимает данные и решает, что делать с ними дальше.
Компонент — отдельная часть интерфейса, из которой собирается страница. Компонентом может быть кнопка, карточка товара, всплывающее окно. Разработчик может использовать один и тот же готовый компонент в нескольких местах сайта.
JavaScript — язык программирования, который помогает делать страницы интерактивными. Благодаря JavaScript сайт может реагировать на действия пользователя, например открывать меню или показывать уведомления.
TypeScript — это расширение JavaScript, которое добавляет более строгую проверку кода. Это помогает раньше находить ошибки и делает проект понятнее, даже для ИИ‑агента.
React — это инструмент для создания интерфейсов из готовых компонентов. Он помогает разработчику описать, из каких частей состоит страница и как она должна меняться при действиях пользователя.
Vite — технология для запуска и сборки фронтенд‑проекта. Vite помогает быстро открыть проект на компьютере во время разработки, а потом подготовить его к публикации.
Tailwind нужен для настройки внешнего вида интерфейса. С его помощью разработчик устанавливает для компонентов отступы, цвета, размеры, шрифты и другие визуальные свойства.
API — набор команд, через которые одна программа управляет возможностями другой.
Репозиторий — папка проекта, размещённая в системе хранения кода, например на GitHub.
Скрипт — файл кода с последовательностью команд, которые выполняются автоматически.
Порт — условный номер канала, через который программа принимает обращения внутри сервера. В нашем случае Nginx слушает порт 3000.
Что сделаем и о чём расскажем сегодня
Сегодня будем заниматься деплоем на сервер.
Деплой, деплоймент, или развёртывание, — это публикация готовой версии приложения на сервере. После деплоя проект, который раньше открывался только на компьютере автора, становится доступен другим пользователям через интернет.
Деплой требуется и при первом запуске продукта, и при последующих обновлениях. Например, когда интернет‑магазин получает новую корзину или разработчики публикуют новую версию приложения.
Сервер и клиент — упрощённо, две части интернета.
Клиент — программа, через которую пользователь обращается к сайту или сервису. В нашем случае клиентом служит браузер. Он показывает интерфейс и при необходимости отправляет запросы серверу.
Сервер хранит файлы и данные приложения, принимает запросы и возвращает ответы. В нашем проекте сервер в основном передаёт браузеру готовые файлы сайта.
Сервером может быть любой компьютер, но для стабильного доступа в интернете он должен работать постоянно и без перебоев. Домашний компьютер плохо подходит для постоянного размещения сайта: его могут выключить, соединение может прерваться, а за состоянием системы придётся следить самостоятельно. Самый простой вариант — арендовать сервер у облачного провайдера. В нашей статье мы воспользуемся серверами платформы для вайбкодинга Битрикс24 Вайбкод.
На какой стадии проект сейчас и как его повторить
Мы работаем с агентом 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
Просим Claude научиться деплоить по нашим правилам
Чтобы задеплоить приложение, нам нужен сервер. Мы для этого воспользуемся облачными серверами Битрикс24 и платформой Битрикс24 Вайбкод.
Если вы хотите деплоить так же, как мы в статье, то для доступа к платформе и её серверам вам понадобится оплаченный аккаунт Битрикс24. Но деплой необязательно проводить именно на этой платформе — можно арендовать любой веб‑сервер у облачного провайдера. Совсем бесплатные серверы тоже есть, но обычно их использование сильно ограничено.
С сайтом и деплоем есть нюанс. По умолчанию ИИ‑агент скорее всего создаст на платформе для вайбкодинга более экономный сервер, который будет отключаться при бездействии приложения. Но для реальной работы сайта сервер должен быть всегда доступен для пользователей. Поэтому мы используем дополнительный готовый скрипт, который скажет агенту сделать сервер для постоянного использования.
Как авторизоваться на платформе и получить ключ для ИИ‑агента
Скрытый текст
Сначала заходим в веб‑приложение платформы vibecode.bitrix24.tech и нажимаем кнопку «Войти» в правом верхнем углу:
В соседней вкладке откройте свой портал Битрикс24:
Тогда платформа автоматически сможет подключиться к вашему аккаунту. Для этого ей нужно выдать разрешения в появившейся форме:
Мы будем идти по документации и пояснять некоторые действия. Чтобы открыть документацию, нужно нажать кнопку на панели слева:
На странице документации выбираем «Быстрый старт» в таком же меню слева. Этот раздел описывает требования к вашему порталу и нужную последовательность шагов. Читать всю документацию необязательно, но в разделах есть нужные нам ссылки.
Теперь создаём ключ, который предоставляет агенту и приложению доступ к разрешённым возможностям VibeCode и данным портала. Для начала создания нажмите на ссылку в документации Ключи API:
После этого откроется раздел с ключами. Нам понадобится создать новый ключ кнопкой Создать API-ключ:
Если это не первый созданный ключ, страница будет выглядеть немного иначе — тут можно посмотреть и отредактировать уже созданные:
При создании ключа нужно определиться с параметрами. Выглядеть может непонятно, но ниже мы всё разберём:
Теперь разберём параметры формы и определим, какие значения выбрать.
Название ключа будет отображаться в списке ключей после создания. Больше оно ни на что не влияет, но лучше придумывать осмысленное название. Тогда потом будет проще вспомнить, где этот ключ используется.
Режим доступа доступен в двух вариантах: Только чтение или Чтение и запись. Режим чтения нужен для безопасных интеграций, которые могут смотреть данные, но не могут ничего менять в портале. Режим Чтение и запись нужен, если приложение должно создавать или изменять данные, регистрировать бота и отправлять сообщения.
Права доступа определяют возможности созданных приложений с новым ключом. Можно добавить новые права доступа или удалить ненужные, если выбрать нужный ключ и нажать кнопку Редактировать:
Приложению стоит выдавать только те права, которые действительно нужны для его работы. Чем больше прав у приложения, тем больше область потенциальных ошибок.
Почитать подробнее про права доступа ещё приложения можно в разделе документации Скоупы:
При создании ключа есть ещё три настройки, которые полезно понимать — Вайбкод, Срок действия и Лимит запросов:
Вайбкод определяет доступ к разделам самой платформы, а не портала. Тут можно оставить выбранными все пункты.
Срок действия определяет время жизни ключа. Вечный срок действия лучше не ставить, потому что со временем шанс утечки растёт: ключ можно случайно оставить в коде, отправить в чат, загрузить в репозиторий. Бессрочный ключ будет работать до тех пор, пока кто‑то вручную его не отзовёт. Ограниченный срок действия снижает риск, потому что через некоторое время сам перестанет работать.
Лимит запросов определяет, сколько обращений в секунду приложение может отправлять через этот ключ. Ограничение защищает портал от слишком высокой нагрузки, например если из‑за ошибки приложение начнёт непрерывно повторять один и тот же запрос. Если лимит превышен, новые запросы временно отклоняются. Для простого чат‑бота лучше установить небольшой лимит и увеличить его позже при необходимости.
Для чат‑бота мы поставили лимит в 60 запросов.
Расширенные настройки и Белый список IP нам пока не понадобятся. В этой статье мы не будем их рассматривать, чтобы не перегружать лишней информацией.
После создания ключа появится окно с ключом и готовым промптом, который нужно отдать ИИ‑агенту. Обязательно скопируйте ключ, потому что это единственный раз, когда его можно увидеть.
Получив ключ, передаём Claude Code подготовленный платформой промпт с ключом, ссылкой на документацию и инструкцией по подключению.
API‑ключ нельзя публиковать в репозитории, скриншотах, примерах кода или открытых чатах. Передавайте его только тому AI‑инструменту и проекту, для которых он создан.
Мой API ключ для VibeCode платформы: vibe_api_xxx...
Документация: https://vibecode.bitrix24.tech/v1/me
Изучи, как делать деплой
Но с деплоем есть нюанс. Даже с документацией агенту на практике пока что сложно разобраться, как правильно развернуть сайт на сервере. Поэтому мы подготовили готовую папку с инструкцией, настройками и скриптом деплоя. по адресу github.com/AlexanderSerbul/vibecoders‑front‑ui‑gallery/tree/main/deploy.
Можно не давать агенту дополнительную документацию с GitHub, и рано или поздно он разберётся сам. Но так будет быстрее, и агент потратит меньше токенов.
Поэтому добавляем инструкцию таким промптом:
Прочитай как деплоить тут:https://github.com/AlexanderSerbul/vibecoders-front-ui-gallery/tree/main/deploy
Перенести эту папку в наш проект, будем её использовать
Агент отвечает, что он всё изучил и добавил в проект:
Сейчас уже можно переходить к деплою, но сначала внесём пару небольших правок.
Меняем имя приложения и ставим более дешёвый тариф
Claude заметил, что у нас сохранилось имя приложения из шаблона — ui‑gallery — и предлагает его заменить. Соглашаемся и указываем, какое имя нужно поставить сайту:
Агент всё исправляет и перед деплоем напоминает, что создание сервера стоит денег. Попробуем узнать, есть ли тарифы дешевле.
После нашего вопроса Claude рассказывает про текущий тариф, открывает документацию и смотрит другие возможные варианты:
Для эксперимента просим поставить самый дешёвый тариф.
Проверим, что приложение работает и попросим показать проект перед деплоем. Claude сам открывает браузер, делает скриншот, проверяет его, показывает нам и отчитывается:
Деплоим
После подготовки сам деплой не занимает много времени.
Просим агента задеплоить наш сайт. Агент разворачивает приложение и в реальном времени отчитывается о проблемах, которые он решает. Через несколько минут Claude присылает сообщение, что сайт можно открывать по адресу app‑dc5adb4b1ee6.vibecode.bitrix24.tech. Проверяем в браузере, что всё действительно работает:
На платформе Вайбкод видно, что появился новый сервер тем тарифом, который мы выбрали:
Проверяем отображение исправлений на задеплоенном сайте
Теперь испытаем ещё одну возможность: сможет ли агент внести изменения в сайт так, чтобы они отобразились на задеплоенном варианте.
Попросим добавить ещё один раздел на главную страницу:
Добавь в раздел О студии раздел Вопросы с несколькими вопросами и ответами, используя Accordion
Accordion — один из фронтенд‑компонентов shadcn/ui, работу которого можно посмотреть на app-117900122a91.vibecode.bitrix24.tech/:
Смотрим, что получается в результате:
Claude пишет, что всё проходит успешно. Ждём завершения работы и проверяем.
На локальном dev‑сервер разработки уже всё отображается:
Но в опубликованной версии этого пока не видно:
Claude изменил исходные файлы, поэтому локальный сервер разработки сразу показал новую версию. На публичном сервере при этом остаётся предыдущая сборка. Чтобы обновить опубликованный сайт, нужно снова создать сборку и повторить деплой.
Попросим агента провести деплой заново. Вскоре становится видно, что публичная версия сайта тоже обновилась:
Что написано в дополнительной инструкции к деплою, которая ускоряет всё дело
Это более технический раздел, где мы в общих чертах разбираем ту часть, которая объясняет агенту более подробно, как проводить деплой. Читать его необязательно, но может быть полезно для лучшего понимания того, как происходит развёртывание приложений на платформе Вайбкод.
Выше мы попросили Claude изучить раздел репозитория на GitHub. Ключевой раздел этого репозитория — скрипт deploy.sh. Один его запуск заменяет целую последовательность ручных действий.
deploy.sh можно разделить на 5 этапов, которые мы разбираем дальше.
1. Сначала скрипт собирает готовую версию сайта
echo "→ 1/5 Собираю сайт (npm run build)..." ( cd "$ROOT" && npm run build >/dev/null ) || { echo "❌ Сборка упала" exit 1 }
Скрипт переходит в папку проекта и запускает команду npm run build. Она преобразует исходный React‑проект в готовую версию сайта и сохраняет эту версию в папке dist. Если во время сборки возникает ошибка, деплой сразу останавливается: загружать на сервер неработающую или устаревшую версию сайта нет смысла.
2. Упаковывает сайт и настройки сервера
echo "→ 2/5 Пакую dist + nginx.conf..." WORK="$(mktemp -d)" trap 'rm -rf "$WORK"' EXIT mkdir "$WORK/stage" cp -r "$ROOT/dist/." "$WORK/stage/" cp "$HERE/nginx.conf" "$WORK/stage/nginx.conf" tar -czf "$WORK/app.tgz" -C "$WORK/stage" .
Скрипт создаёт временную папку и копирует туда сборку сайта из dist. Туда же добавляется файл nginx.conf с настройками Nginx — программы, которая будет отправлять страницы сайта посетителям. Затем все файлы упаковываются в один архив app.tgz, который удобно целиком отправить на сервер. После завершения работы временная папка автоматически удаляется.
3. Создаёт сервер или использует существующий
if [ -f "$IDFILE" ]; then SID="$(cat "$IDFILE")" echo "→ 3/5 Использую существующий сервер: $SID" else RUNTIME=(-F "runtime=static") RESP="$(api -X POST "$API/infra/servers" \ -H "Content-Type: application/json" \ -d "{\"provider\":\"bitrix-cloud\", \"name\":\"$NAME\", \"plan\":\"$PLAN\", \"region\":\"$REGION\", \"image\":\"$IMAGE\"}")" SID="$(printf '%s' "$RESP" | field id)" printf '%s' "$SID" > "$IDFILE" fi
Скрипт ищет файл .vibe-server, в котором хранится идентификатор ранее созданного сервера.
Если файл найден, новая машина не создаётся: следующая версия сайта отправляется на тот же сервер. При первом деплое скрипт обращается к API платформы, создаёт сервер с выбранным тарифом и сохраняет его идентификатор. Так обновления сайта не приводят к появлению нового платного сервера при каждом запуске.
4. Загружает сайт и запускает его
echo "→ 4/5 Заливаю сайт на сервер..." DRESP="$(api -X POST \ "$API/infra/servers/$SID/deploy?stream=false" \ -F "archive=@$WORK/app.tgz" \ "${RUNTIME[@]}" \ -F "start=nginx -c /opt/app/nginx.conf" \ -F "port=3000" \ -F "cleanDeploy=true")"
На этом этапе архив с сайтом отправляется на выбранный сервер через API. Платформа распаковывает файлы и запускает Nginx с приложенной конфигурацией.
Тут есть параметр port=3000 — он указывает порт, на котором сервер должен принимать запросы, а cleanDeploy=true включает чистое обновление файлов. После успешного запуска API возвращает публичный адрес сайта.
5. Открывает публичный доступ
echo "→ 5/5 Делаю сайт публичным и не засыпающим..." api -X PATCH \ "$API/infra/servers/$SID/access-policy" \ -H "Content-Type: application/json" \ -d '{"accessPolicy":"PUBLIC"}' api -X PATCH \ "$API/infra/servers/$SID/sleep" \ -H "Content-Type: application/json" \ -d '{"sleepAfterMinutes":null}' echo "✅ Готово! Твой сайт онлайн:" echo " $URL"
В последней части скрипта он меняет настройки доступа, чтобы сайт могли открывать обычные посетители. Затем он отключает автоматическое засыпание сервера после периода бездействия. В конце скрипт выводит полученный адрес, по которому опубликованный сайт уже можно открыть в браузере.
Что сделаем дальше
В следующий раз добавим в проект удобный и очень важный инструмент — систему контроля версий Git.
Git сохраняет историю изменений в проекте. С помощью этой системы можно вернуться к предыдущей версии файлов, сравнить правки и работать над проектом вместе с другими людьми.
