Обзор Web Host

Wippy Web Host — одностраничное приложение на Vue 3, построенное по методологии Feature-Sliced Design и раздаваемое с CDN по адресу https://web-host.wippy.ai. Оно размещает все пользовательские страницы и UI-компоненты приложения Wippy. Вы его не собираете и не развёртываете — вы настраиваете его через backend-модуль wippy/facade, и оно загружается автоматически.

Wippy FE architecture

Трёхслойная модель

Работающее приложение Wippy состоит из трёх вложенных слоёв:

Слой 1 — страница, раздаваемая wippy/facade. Это ваша HTML-страница, отрисованная бэкендом. Модуль wippy/facade регистрирует статический файловый сервер и конечную точку /facade/config на вашем шлюзе Wippy. Когда пользователь переходит в ваше приложение, wippy/facade раздаёт тонкую HTML-страницу, которая загружает точку входа Web Host в виде JS-модуля с CDN (module.js для compat, managed-layout.js для managed) и инициализирует её конфигурацией из /facade/config. Сама страница не несёт ни Vue, ни React — она намеренно тонкая.

Слой 2 — Web Host. Бандл Web Host загружается как JS-модуль, который забирает себе всю страницу и её историю браузера. Он владеет обрамлением Wippy: боковой панелью навигации, панелью чата, управлением сессиями и поверхностью отрисовки страниц. Полную конфигурацию он получает из вызова инициализации на странице и никогда не содержит в самом бандле специфичных для развёртывания URL или токенов. Именно это делает бандл на CDN переносимым между развёртываниями. (Для ручных встраиваний без фасада тот же хост может работать внутри iframe через точку входа iframe.html — см. таблицу точек входа ниже.)

Слой 3 — дочерние микрофронтенды. Web Host, в свою очередь, встраивает пользовательские представления либо как вложенные iframe (модули view.page), либо как веб-компоненты (модули view.component). Каждый потомок работает в изоляции. Web Host внедряет скрипт прокси, дающий потомкам доступ к API Wippy, контексту аутентификации, CSS темы и каналам связи — и всё это без необходимости для потомка знать, где он развёрнут.

Страница (HTML от wippy/facade — загружает module.js / managed-layout.js)
  └─ Web Host (забирает себе страницу и историю браузера)
       ├─ UI чата, навигация, боковая панель
       └─ Дочерние микрофронтенды
            ├─ view.page  → srcdoc iframe + proxy.js
            └─ view.component → пользовательский элемент + ESM @wippy-fe/proxy

Точки входа

CDN Web Host раздаёт несколько точек входа из одного и того же каталога с версией. Нужная зависит от способа интеграции:

Каждая точка входа раздаётся с CDN по адресу <release-tag>/<entry> (например, /<release-tag>/module.js).

Точка входа Сценарий использования
module.js Полное приложение в режиме compat — стандартная оболочка «боковая панель навигации + область страницы + правая панель чата». Монтируется прямо в страницу через window.initWippyApp(); забирает себе всю страницу и её историю браузера. Именно эту точку входа текущий wippy/facade раздаёт по умолчанию.
managed-layout.js Полное приложение в режиме managed — декларативная многопанельная раскладка. Раздаётся фасадом при fe_mode = managed. Ранний доступ (см. Многопанельная раскладка).
iframe.html Полное приложение, работающее внутри iframe ради изоляции или частичного встраивания в страницу. Используйте для ручных встраиваний без фасада, когда вы передаёте конфигурацию через рукопожатие PostMessage SetConfig. Сам фасад загружает точки входа в виде JS-модулей выше, а не эту.
chat-iframe.html Минимальный интерфейс чата без боковой панели и страниц. Полезен для встраивания сфокусированного виджета чата.
chat.js Headless ESM-модуль, предоставляющий хранилища чата и WebSocket-клиент. Используйте для построения полностью пользовательских интерфейсов.
ws.js Самостоятельный WebSocket-сервис без зависимости от Vue или Pinia. Используйте для низкоуровневых интеграций реального времени.

Для стандартных развёртываний на основе wippy/facade вы никогда не ссылаетесь на эти пути напрямую. Фасад читает fe_facade_url из своей конфигурации, выбирает точку входа JS-модуля, соответствующую fe_mode (module.js для compat, managed-layout.js для managed), и автоматически формирует корректный URL.

Версионирование CDN

Web Host версионируется git-тегом. Канонический шаблон продуктового URL:

https://web-host.wippy.ai/<release-tag>/

Где <release-tag> — git-тег релиза Web Host: либо стабильный релиз, либо превью-развёртывание с ветки функциональности. Staging-CDN находится по адресу https://web-host.staging.wippy.ai/<release-tag>/.

Обычно версию не задают вовсе. Модуль wippy/facade поставляется со значением fe_facade_url по умолчанию, указывающим на соответствующую сборку Web Host, поэтому версия Web Host движется вместе с модулем фасада — обновление wippy/facade и есть способ перейти на более новый Web Host. Дочерние приложения, разделяющие вендорные библиотеки через import map, получают ровно те версии, которые предоставляет эта сборка.

Чтобы закрепить конкретную версию Web Host — остаться на заведомо рабочей сборке или подключиться к тегу ветки функциональности / раннего доступа, — переопределите параметр fe_facade_url:

- name: fe_facade_url
  value: https://web-host.wippy.ai/<release-tag>

Это закрепляет всё развёртывание за этой сборкой. О синтаксисе -o / --override для задания значения во время выполнения см. Переопределения CLI.

Технологический стек

Web Host построен на Vue 3 (Composition API), PrimeVue + Tailwind CSS 3 для UI-компонентов, Pinia для управления состоянием, Vue Router для навигации и Axios для HTTP. Во время разработки загрузите <fe_facade_url>/import-map.json и поместите каждый ключ из его объекта imports во внешние зависимости Rollup, даже если текущий артефакт этот ключ не импортирует. Включайте импортируемую зависимость в бандл только когда её точный спецификатор отсутствует. Перезагружайте карту при смене тега Web Host или при добавлении новой зависимости.

См. также