Vue Storefront: Заливаем данные в ES

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


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


    КДПВ


    Под катом описание того, каким образом залить данные из своего Magento-магазина в приложение Vue StoreFront так, чтобы вместо них клиенту показывались демо-данные. Да, результат опять не очень, но для рекламной кампании это не самое главное.


    Цель


    Настроить перекачку данных из Magento-приложения в VSF-приложение.


    Схемка


    На данном этапе компоненты, участвующие в работе VSF я изобразил вот в таком виде:


    image


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


    В текущей итерации я использовал medium-версию сервера Linux Ubuntu 18.04 LTS 64-bit (2x 2198 MHz CPU, 4 GB RAM, 10GB disk), т.к. small-версия после запуска всех сервисов подтормаживала при сборке vue-storefront. Вряд ли кто-то сомневается, что 4 GB оперативки в 2 раза лучше, чем 2 GB.


    Предыдущие этапы


    Действия предыдущих этапов можно описать следующим скриптом:


    ~/init.sh
    #!/usr/bin/env/bash
    #  Exit immediately if a command exits with a non-zero status.
    set -e
    
    ## ========================================================================
    # Configuration variables
    ## ========================================================================
    HOST_VSF="185.19.28.48" # VSF Server (contains Front/API servers, Elasticsearch & Redis services)
    
    ## ========================================================================
    # Update current packages and install new ones
    ## ========================================================================
    #     nodejs & yarn
    curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
    curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
    sudo add-apt-repository "deb https://dl.yarnpkg.com/debian/ stable main"
    #     Elasticsearch
    curl -sL https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -
    # use ElasticSearch v5.x
    # (see https://github.com/DivanteLtd/vue-storefront-api/blob/master/docker/elasticsearch/Dockerfile)
    echo "deb https://artifacts.elastic.co/packages/5.x/apt stable main" | sudo tee -a /etc/apt/sources.list.d/elastic-5.x.list
    
    # Upgrade current packages and install new:
    sudo apt update
    sudo apt upgrade -y
    sudo apt install -y nodejs yarn openjdk-11-jre-headless elasticsearch redis-server
    sudo npm install pm2@latest -g
    
    # Change file permissions on user's home (`.confiig` folder is created under root permissions`)
    sudo chown -R "${USER}" ~
    
    ## ========================================================================
    # Clone VSF applications
    ## ========================================================================
    cd ~
    git clone https://github.com/DivanteLtd/vue-storefront.git
    git clone https://github.com/DivanteLtd/vue-storefront-api.git
    
    ## ========================================================================
    # Configure services and apps
    ## ========================================================================
    sudo cp /etc/elasticsearch/elasticsearch.yml /etc/elasticsearch/elasticsearch.yml.orig
    cat <<EOM | sudo tee /etc/elasticsearch/elasticsearch.yml
    # see https://github.com/DivanteLtd/vue-storefront-api/blob/master/docker/elasticsearch/config/elasticsearch.yml
    cluster.name: "docker-cluster"
    network.host: 0.0.0.0
    discovery.zen.minimum_master_nodes: 1
    discovery.type: single-node
    EOM
    
    sudo cp /etc/redis/redis.conf /etc/redis/redis.conf.orig
    cat <<EOM | sudo tee /etc/redis/redis.conf
    # is composed from `redis.conf.orig`
    bind 0.0.0.0
    port 6379
    tcp-backlog 511
    timeout 0
    tcp-keepalive 300
    daemonize yes
    supervised no
    pidfile /var/run/redis/redis-server.pid
    loglevel notice
    logfile /var/log/redis/redis-server.log
    databases 16
    EOM
    
    cat <<EOM | tee ~/vue-storefront/config/local.json
    {
      "server": {
        "host": "0.0.0.0",
        "port": 3000
      },
      "redis": {
        "host": "${HOST_VSF}",
        "port": 6379,
        "db": 0
      },
      "graphql": {
        "host": "${HOST_VSF}",
        "port": 8080
      },
      "api": {
        "url": "http://${HOST_VSF}:8080"
      },
      "elasticsearch": {
        "indices": [
          "vue_storefront_catalog"
        ]
      }
    }
    EOM
    
    cat <<EOM | tee ~/vue-storefront-api/config/local.json
    {
      "server": {
        "host": "0.0.0.0",
        "port": 8080
      },
      "elasticsearch": {
        "host": "localhost",
        "port": 9200
      },
      "redis": {
        "host": "localhost",
        "port": 6379
      }
    }
    EOM
    
    ## ========================================================================
    # Build apps
    ## ========================================================================
    cd ~/vue-storefront
    yarn install
    yarn build
    cd ~/vue-storefront-api
    yarn install
    yarn build
    
    ## ========================================================================
    # Start services and apps
    ## ========================================================================
    sudo service elasticsearch start
    sudo service redis-server start
    cd ~/vue-storefront && yarn start
    cd ~/vue-storefront-api && yarn start

    Варианты интеграции


    В интернете я нашёл два варианта интеграции Magento-магазина и VSF:


    • magento2-vsbridge-indexer: Magento-модуль, который имеет непосредственный доступ к Magento-данным и заливает информацию в Elasticsearch при индексации;
    • mage2vuestorefront: отдельное приложение, которое получает данные из Magento через Web API и также заливает их в Elasticsearch;

    Я пока опускаю вопросы обратного переноса данных из Vue StoreFront в Magento.


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


    Please do use this module instead of mage2vuestorefront if You experience any issues regarding indexing performance. Both projects are currently supported.

    Поэтому второй вариант интеграции (mage2vuestorefront) я пока не рассматриваю, хотя на моей схеме выше он отображён.


    VS Bridge


    Установка Magento-модуля:


    $ composer config repositories.divante vcs https://github.com/DivanteLtd/magento2-vsbridge-indexer
    $ composer require divante/magento2-vsbridge-indexer
    $ composer config repositories.divante vcs https://github.com/DivanteLtd/magento2-vsbridge-indexer-msi
    $ composer require divante/magento2-vsbridge-indexer-msi

    После установки модуля появляются новые индексы:


    mage indexes


    Конфигурация VS Bridge


    Секция "General Settings":


    general


    Секция "Elasticsearch Client":


    elasticsearch


    Секция "Indices Settings":


    indicies


    Секция "Redis Cache Settings":


    redis


    Секция "Catalog Settings":


    catalog


    Заливка данных в Elasticsearch


    Данные из Magento в Elasticsearch заливаются при их индексации:


    $ bin/magento indexer:reindex
    ...
    Vsbridge Product Indexer index has been rebuilt successfully in 00:00:01
    Vsbridge Category Indexer index has been rebuilt successfully in 00:00:00
    Vsbridge Attributes Indexer index has been rebuilt successfully in 00:00:02
    Vsbridge Cms Block Indexer index has been rebuilt successfully in 00:00:00
    Vsbridge Cms Page Indexer index has been rebuilt successfully in 00:00:04
    Vsbridge Review Indexer index has been rebuilt successfully in 00:00:00
    Vsbridge Tax Rule Indexer index has been rebuilt successfully in 00:00:00

    Проверка заливки данных


    $ curl "http://89.145.166.192:9200/_cat/indices?pretty&v"
    health status index                               uuid                   pri rep docs.count docs.deleted store.size pri.store.size
    yellow open   vue_storefront_magento_2_1574139073 x-Ft7Lt6RCu073dBWuvbvQ   5   1        295            0      1.7mb          1.7mb
    yellow open   vue_storefront_magento_1_1574139076 yGlA_GGqQu-T0vyxrLE07A   5   1        268            0      1.2mb          1.2mb

    Конфигурирование vue-storefront и vue-storefront-api


    В настройках VS Bridge префикс для индексов в Elasticsearch выбран vue_storefront_magento, а в качестве идентификатора индекса используется ID витрины:


    indicies name


    В соответствии с рекомендациями разработчиков и по аналогии с default-конфигом (~/vue-storefront/config/default.json):


    {
      "elasticsearch": {
        "index": "vue_storefront_catalog"
      },
      "storeViews": {
        "de": {
          "elasticsearch": {
            "index": "vue_storefront_catalog_de"
          }
        },
        "it": {
          "elasticsearch": {
            "index": "vue_storefront_catalog_it"
          }
        }
      }
    }

    в локальном конфиге для фронт-сервера прописываю (~/vue-storefront/config/local.json):


      "elasticsearch": {
        "index": "vue_storefront_magento_1"
      },
      "storeViews": {
        "de": {
          "elasticsearch": {
            "index": "vue_storefront_magento_1"
          }
        },
        "it": {
          "elasticsearch": {
            "index": "vue_storefront_magento_2"
          }
        }
      }

    а в локальном конфиге для api-сервера (``):


      "elasticsearch": {
        ...
        "indices": [
          "vue_storefront_magento_1",
          "vue_storefront_magento_2"
        ]
      }

    Я пробовал прописать в локальном конфиге фронта:


      "elasticsearch": {
        "index": "vue_storefront_magento"
      }

    по аналогии с примером разработчика, но в браузере получаю уже знакомую страницу с ошибкой. Либо в Elasticsearch'е не хватает индекса vue_storefront_magento, либо в коде фронта что-то напутано.


    Индексы я создавал не вручную, а при помощи плагина VS Bridge, поэтому я ожидал, что будут созданы все нужные индексы, но нет, всё как обычно. Поэтому добавляю суффикс _1 в elasticsearch.index локального конфига фронта.


    Пересборка и запуск приложений


    $ pm2 stop all
    $ cd ~/vue-storefront && yarn build && yarn start
    $ cd ~/vue-storefront-api && yarn build && yarn start

    PWA-приложение должно быть доступно по адресу "http://89.145.166.192:3000/" (разумеется, я "убил" инфраструктуру после тестов, поэтому должно быть, но не будет) и должно быть очень похоже на ту картинку, что я опубликовал в самом начале статьи.


    Заключение


    Сопряжение по данным "Magento-to-VSF" выполнено на достаточно хорошем уровне. Индексация данных возможна как по расписанию, так и по событию (по крайней мере, анонсировано так). Напрягает два момента:


    1. Привязка к 5.x версии Elasticsearch'а. Мне пришлось последовательно downgrade'иться с 7.x на 6.x и с 6.x на 5.x прежде, чем "VS Bridge" начал заливать данные в ES. Насколько сильно VSF завязан именно на 5.x и что будет, когда разрабы Elasticsearch'а перестанут поддерживать "пятёрочку"?
    2. Хардкод демо-витрин в default-конфиге фронта. По-идее, в default-конфиге должны находиться базовые данные, которые не зависят от конкретной имплементации приложения, а конфигурация демо-приложения должно происходить на уровне ./config/local.json. В этом случае будет понятно, какие данные нужно изменять при запуске своего приложения, а какие являются общими для всех (большинства) имплементаций.

    Спасибо всем, кто дочитал, кликайте по моей реферальной сслыке, и дай мне Бог сил на следующий шаг. VSF, конечно, впечатляющее приложение, но разбираться в нём — как по болоту ходить. Одну ногу достал, другая завязла.

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

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

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

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

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