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

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


    Ссылки


    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое