Наконец-то получилось увидеть данные из Magento (категории и продукты) в приложении Vue Storefront (VSF). Это уже четвёртая статья (1, 2, 3), в которой я описываю процесс изучения возможностей интеграции VSF с электронным магазином на базе Magento 2, и первая, где данные из Magento проскочили в браузер покупателя.

КДПВ

Под катом ссылка на скрипты развёртывания и краткое описание шагов.

Цель

Вывести в клиентской части данные о категориях/продуктах, полученные из Magento.

Схемка

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

схемка

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

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

Скрипты развёртывания

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

Шаги развёртывания:

Конфигурация развёртывания

На момент написания данной статьи конфигурация развёртывания выглядит так:

#!/usr/bin/env bash
# =========================================================================
#   Local configuration template.
#   Copy this file to `./cfg.local.sh`.
# =========================================================================
export HOST_VSF="255.255.255.255"   # ip address or domain name for VSF host (VSF Front/API, Elasticsearch & Redis)
export HOST_MAGE="mage2.host.com"   # ip address or domain name for Magento 2 host
# address of REST API of source Magento instance
export URL_MAGE_REST="http://${HOST_MAGE}/rest"
export URL_MAGE_IMG="http://${HOST_MAGE}/media/catalog/product"
export INDEX_NAME="vue_storefront_catalog"
# Magento integration options
# see: "How to integrate Magento2 with your local instance?"
# at: https://medium.com/the-vue-storefront-journal/vue-storefront-how-to-install-and-integrate-with-magento2-227767dd65b2
export MAGE_CONSUMER_KEY="..."
export MAGE_CONSUMER_SECRET="..."
export MAGE_ACCESS_TOKEN="..."
export MAGE_ACCESS_TOKEN_SECRET="..."
export MAGE_CURRENCY_CODE="..."

Развёртывание приложения

Клонирую скрипты для развёртывания компонентов на чистом хосте и задаю локальную конфигурацию развёртывания:

$ cd ~
$ git clone https://github.com/flancer64/vsf_mage2_setup.git
$ cd vsf_mage2_setup/
$ cp cfg.init.sh cfg.local.sh
$ nano cfg.local.sh
...

После чего выполняю скрипты развёртывания, с первого по четвёртый:

$ cd ~/vsf_mage2_setup/
$ bash ./bin/step01_env.sh
$ bash ./bin/step02_vsf_front.sh
$ bash ./bin/step03_vsf_api.sh
$ bash ./bin/step04_mage2vsf.sh

Содержимое скриптов можно посмотреть на github'e. В результате на пустом хосте будут установлены и сконфигурены следующие компоненты:

Elasticsearch
Redis
vue-storefront
vue-storefront-api
mage2vuestorefront

Конфигурации компонентов можно увидеть в соответствующих скриптах развёртывания.

Скрипт репликации данных Magento2 => VSF

На четвёртом шаге создаётся скрипт репликации данных ~/mage2vuestorefront/src/run.sh. Привожу его полностью (за исключением чувствительных данных):

#!/usr/bin/env/bash
#  Exit immediately if a command exits with a non-zero status.
set -e
ROOT=$(cd "$(dirname "$0")/" && pwd)

export TIME_TO_EXIT="2000"

# Setup connection to Magento
export MAGENTO_CONSUMER_KEY="87...20l"
export MAGENTO_CONSUMER_SECRET="7f...95x"
export MAGENTO_ACCESS_TOKEN="ox...lq3"
export MAGENTO_ACCESS_TOKEN_SECRET="5d...6o0"

# Setup default store
export MAGENTO_URL="http://mage2.host.com/rest"
export INDEX_NAME="vue_storefront_catalog"

# Perform data replications
node --harmony ${ROOT}/cli.js taxrule --removeNonExistent=true
node --harmony ${ROOT}/cli.js attributes --removeNonExistent=true
node --harmony ${ROOT}/cli.js categories --removeNonExistent=true
node --harmony ${ROOT}/cli.js productcategories
node --harmony ${ROOT}/cli.js products --removeNonExistent=true

Репликация данных

Скрипт ./bin/step05_sync_data.sh:

#!/usr/bin/env/bash
## ************************************************************************
#     Script to synchronize data between Magento2 and VSF.
## ************************************************************************
# shellcheck disable=SC1090
# root directory (set before or relative to the current shell script)
DIR_ROOT=${DIR_ROOT:=$(cd "$(dirname "$0")/../" && pwd)}
#  Exit immediately if a command exits with a non-zero status.
set -e

echo "========================================================================"
echo "Read local configuration."
echo "========================================================================"
. "${DIR_ROOT}/cfg.local.sh"

echo "========================================================================"
echo "Rebuild indexes and get data from Elasticsearch."
echo "========================================================================"
cd ~/mage2vuestorefront/src
bash run.sh

echo "========================================================================"
echo "Reconfigure VSF API."
echo "========================================================================"
cd ~/vue-storefront-api
rm -f ./var/catalog.json
npm run dump
npm run db rebuild -- --indexName="${INDEX_NAME}"

Скрипт ~/mage2vuestorefront/src/run.sh извлекает данные из Magento 2 при помощи обращения к Magento Web API, поэтому отрабатывает довольно не быстро. У разработчиков VSF есть альтернатива (magento2-vsbridge-indexer), я его использовал в предыдущей статье.

После перекачки данных из Magento 2 в Elasticsearch нужно обновить конфигурацию VSF API.

Всё это делается так:

$ cd ~/vsf_mage2_setup/
$ bash ./bin/step05_sync_data.sh

Заключение

Ну что ж, категории и продукты из Magento "проникли" в VSF-приложение. Теперь нужно настроить обратное движение — чтобы данные из VSF (корзины, заказы) попадали в Magento 2 и убедиться, что покупатели, зарегистрированные в Magento 2, также могут логиниться в VSF.

Ссылки

Vue Storefront — how to install and integrate with Magento2
Proof of Concept — how to run PWA for Magento in a week

Vue Storefront: Импорт каталога из Magento 2