4 декабря 2019

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

Разработка под e-commerceMagentoVueJS

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


Ссылки


Теги:vuejsvue storefrontmagentoapiинтеграцияникто не кликает реферальные ссылки
Хабы: Разработка под e-commerce Magento VueJS
+3
2k 22
Комментировать
Лучшие публикации за сутки

Минуточку внимания

Разместить