Пятый и завершающий пост о моём знакомстве с Vue Storefront. IMHO, самым современным с технической точки зрения решением в сфере e-commerce на данный момент. Ссылки на предыдущие посты:

Под катом краткое описание особенностей этого этапа и итоговое резюме.

Цель

Задачей на данном этапе являлось развёртывание компонентов приложения в максимально пригодном к использованию виде при условии его минимальной доработки. Т.е., я не изменял тему приложения и не добавлял собственных методов оплаты/доставок, а пользовался теми, что предлагали разработчики VSF. Успешным результатом являлось бы создание заказа в VSF и его просмотр в Magento (скриншот клиентского оповещения о создании заказа вынесен в шапку публикации).

Схема компонентов приложения

Рабочее окружение

В текущей итерации я опять использовал medium-версию сервера Linux Ubuntu 18.04 LTS 64-bit (2x 2198 MHz CPU, 4 GB RAM, 10GB disk) в облаке Exoscale.

Развёртывание

Скрипты по развёртыванию компонентов приложения для этого шага находятся в отдельной ветке: flancer64/vsf_mage2_setup.

Шаги развёртывания и конфигурация аналогичны описанным в "Импорт каталога из Magento 2"

Что нового

(по сравнению с предыдущими развёртываниями)

Web-сервер

В этой развёртке я спрятал vue-storefront и vue-storefront-api за виртуальными хостами. По адресу front.vsf.demo.com находится прокси-сервер, пробрасывающий запросы на приложение vue-storefront, по адресу api.vsf.demo.com — прокси-сервер, пробрасывающий запросы на приложение vue-storefront-api. Таким образом, на плечи web-сервера можно переложить заботы по шифрованию траффика, сжатию контента, управлению инструкциями кэширования и т.п. На уровне web-сервера также можно организовать load balancing, если по каким-то причинам его нет желания делать на pm2 (default опция для VSF).

Elasticsearch v 7.x

Предыдущие развёртки, как и demo-версия самих VueStorefront, использовали сервер Elasticsearch версии 5.x. Но за то время, пока я разбирался с устройством VSF, разработчики добавили возможность работы с версиями 7.x. При этом изменилась структура данных, которую VSF использует с Elasticsearch 5.x и с Elasticsearch 7.x.

Локализация

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

Взаимодействие компонентов

Фронт-сервер отвечает за раздачу исходников самого PWA-приложения, API-сервер — за выдачу данных (в том числе и масштабированных изображений продуктов) по запросу PWA (из браузера клиента). Прямой связи между vue-storefront и vue-storefront-api я пока что не обнаружил (т.е., фронт-сервер:3100 не отправляет напрямую запросы на api-сервер:3130).

Для начала работы при помощи приложения mage2vuestorefront нужно залить данные в базу Elasticsearch. Процесс не очень быстрый, т.к. используется Magento REST API, но есть возможность сделать дамп импортированных данных из Elasticsearch и в следующий раз заливка данных будет происходить на порядок-два быстрее (можно использовать этот подход при развёртывании девелоперской и тестовой сред). Список сущностей, которые хранит Elasticsearch довольно невелик:

..._attribute
..._category
..._cms_block
..._cms_page
..._product
..._review
..._taxrule

Изображения продуктов PWA тянет через API-сервер, который, в свою очередь, обращается к Magento-серверу, загружает изображение к себе, масштабирует его, а затем выдает браузеру клиента. Получается, что каждая картинка продукта опосредствованно подгружается с Magento-сервера. В PWA можно видеть, как изначально вместо изображений используются placeholder'ы, которые потом постепенно замещаются нормальными изображениями продуктов.

Аутентификация клиента в PWA прокидывается через API до Magento. Данные о клиентах (в том числе и пароли) VSF у себя не хранит (что видно и по списку сущностей в Elasticsearch чуть выше). Другими словами, в качестве самостоятельного e-commerce приложения VueStorefront использовать нельзя.

Создание заказа отработало вполне успешно, loader в PWA крутился до тех пор, пока заказ отправлялся в API, а затем, в несколько этапов (cart, items, addresses) переливался в Magento. Итого, процесс занял порядка 10 секунд, судя по API-логам (но у меня Magento-сервер стоит на другом континенте относительно тестовой среды для VSF). Вот скрин заказа из VSF в Magento:

Резюме

Самое современное с технической точки зрения решение в сфере e-commerce на данный момент не является самым совершенным. Более того, VueStorefront не может быть использовано как самостоятельное приложение (у него просто не предусмотрено хранилища для тех же клиентов). Зато VSF можно прикрутить к уже существующим e-commerce/ERP решениям (платформам — в терминах VSF). Правда из идущих "в коробке" я вижу только мосты к Magento 1 и Magento 2, но разработчики утверждают, что есть мосты и к другим решениям.

Также не очень волшебно дела обстоят с платёжными методами и методами доставки. О таком разнообразии методов, котрое предлагает на данный момент Magento, в VSF можно не мечтать ещё достаточно долго.

Тем не менее, само PWA приложение сделано качественно (особенно хорошо выглядит на смартфоне) и работает устойчиво (даже в условиях потери смартфоном соединения с интернетом). Виден огромный объём отличной работы, проделанной авторами. VueStorefront может использоваться в качестве реального интернет-магазина совместно с каким-либо backend'ом (Magento 1/2, Shopware6, Epi Server, Spree Commerce, Pimcore, Odoo ERP, BigCommerce, WooCommerce). В своё время я задавался вопросом "Кто придёт на смену Magento?" Я думаю, сейчас у меня уже есть ответ.

И напоследок скриншот того, как VSF выглядит в качестве desktop'ного приложения в Ubuntu:

Vue Storefront: оформление заказа