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

0

Наконец-то получилось увидеть данные из 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.

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

  1. Обновление пустой ОС, установка дополнительных сервисов и приложений (Elasticsearch, Redis, yarn, …).
  2. Развёртывание vue-storefront.
  3. Развёртывание vue-storefront-api.
  4. Развёртывание mage2vuestorefront.
  5. Запуск репликации данных из Magento 2 в VSF.

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

#!/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.

You might also like More from author