Привет, Хабр! Меня зовут Кирилл, и я технический директор в компании АйПиДжи (интегратор Битрикс24). Хочу рассказать, как размещать статичные приложения, которые не требуют баз данных и не содержат очередей, в Маркете Битрикс24. В этом способе сочетаются простота деплоя и внесения доработок и низкая цена хостинга.
В начале 2025 года Битрикс24 выпустил официальный UI Kit для разработчиков приложений для Маркета. Набор компонентов построен на базе фреймворка Nuxt, соответственно, это не просто набор раскрашенных кнопок, а скорее подход к созданию интерактивных одностраничных решений. Они могут иметь достаточно навороченную бизнес-логику и при этом работать на чистом фронтенде, обращаясь к REST API через JS SDK Битрикс24. Могу сказать, что таких приложений в Маркете Битрикс24 довольно много — и они пользуются популярностью у пользователей. Так что, если вы разрабатываете решения для Битрикс24 и пока не знакомы с Nuxt, рекомендую посмотреть в эту сторону.
Принципиально разработка приложения устроена следующим образом: вы пишете код своего приложения на локальном компьютере, тут же запускаете локальный Nuxt, чтобы он на ходу «собирал» из вашего кода итоговый код для браузера. А вот для продакшн-версии на хостинге надо будет размещать уже «собранный» (или, как его называют, client side rendered) JS/HTML, а не изначальный код — этот набор статичных файлов тоже предоставит вам Nuxt.
Но в предложенном мной способе даже это не потребуется. Вы сможете продолжать заниматься разработкой и отладкой приложения на локальном компьютере, отправлять протестированный код в GitHub, а хостинг будет забирать эти изменения, запускать пересборку и доставлять обновленное приложение пользователям.
Создание публичного адреса для локального приложения
Представим: мы разрабатываем приложение, держа в голове, что когда оно будет готово, мы разместим его в Маркете Битрикс24. Для полноценной работы требуется, чтобы наше приложение было доступно на внешнем домене с поддержкой HTTPS. При этом на этапе разработки заморачиваться с доменами кажется избыточным.
Так и есть, поэтому мы останемся на localhost, но будем использовать ngrok (или другой аналогичный сервис), который позволяет пробросить локальный веб-сервер на некий технический внешний домен и получать через него запросы на свою машину.
Хочу отметить, что здесь я не буду рассказывать непосредственно про разработку самого приложения на базе UI Kit, поскольку сегодняшняя статья посвящена общему описанию процесса разработки и деплоймента.
Запускаем приложение на своем рабочем месте через локальный Nuxt, запускаем клиент ngrok, указываем, что нужно пробросить порт 3000.
Теперь давайте добавим наше локальное приложение на портал Битрикс24, чтобы приложение могло выполнять запросы к REST API. Назовем его DEV, укажем данные, которые выдал нам ngrok, и нажмем кнопку «Перейти к приложению».
Предположим, что нам еще нужно произвести доработки в приложении. Это можно делать буквально в интерактивном режиме — все изменения отобразятся на экране. Ведь код реально выполняется на локальном веб-сервере Nuxt, данные никуда закачивать не нужно.
Предположим, что мы внесли все нужные доработки, и приложение полностью готово. Чтобы в дальнейшем автоматизировать деплоймент (то есть размещение приложения на внешнем сервере), нам пригодится GitHub. Заведем себе там репозиторий и протестированные изменения проекта будем отправлять в него.
Github будет мостиком между изменениями кода, которые мы произвели на локальном рабочем месте и продакшн-версией. Мы отправляем коммит в GitHub, а внешний хостинг сам забирает изменения. Никаких лишних кликов — магия произойдет автоматически!
Размещение приложения на хостинге и внесение изменений
Итак, код оказался на GitHub, и теперь пора разместить приложение на хостинге. Я буду использовать Timeweb Cloud — он позволяет размещать приложения на базе Nuxt и настраивать автодеплой из GitHub-репозитория. А еще, полагаю, это самый бюджетный вариант для решения нашей задачи.
Для начала нужно произвести интеграцию хостинга с GitHub-репозиторием. Переходим на панель управления Timeweb Cloud и добавляем приложение. Я выбрал интеграцию с GitHub, который запросил разрешение на авторизацию.
Можно будет выбрать, разрешить доступ ко всем репозиториям, или же к какому-то конкретному и подтвердить это паролем. Готово, связь установлена.
Возвращаемся к настройкам Timeweb Cloud. Выбираем ветку GitHub-проекта, из которой будет работать автодеплой.
Потом сервис предложит выбрать географическое положение для нашего приложения, а далее мы можем выбирать тариф. Минимальная цена — 1 рубль в месяц с некоторыми ограничениями (я ведь уже говорил, что это самый бюджетный вариант?).
Далее в настройках можно уточнить команду и директорию сборки, зависимости и указать переменные окружения. Но сейчас мы не будем останавливаться на этом, а запустим сборку приложения. Это займет несколько минут.
Возвращаемся в Битрикс24. Приложение, которое мы назвали DEV, сейчас недоступно, так как мы остановили его сервер.
Теперь нам нужно добавить новое серверное приложение уже на настоящем внешнем адресе. Указываем этот адрес, название приложения, путь обработчика и путь первоначальной установки. Сохраняем и открываем.
Отлично, приложение работает. Если понадобится внести изменения в его код, нужно будет сделать коммит из локальной копии проекта в наш GitHub-репозиторий. Вот как это выглядит.
Чтобы обновить приложение, хостингу понадобится несколько минут на пересборку. Все это время старая версия приложения будет доступна.
Таким образом, у нас есть практически бесплатный хостинг простых приложений для Маркета Битрикс24 с удобной возможностью доработки и деплоя.