Por fim, pude ver os dados do Magento (categorias e produtos) no aplicativo Vue Storefront (VSF). Este é o quarto artigo ( 1 , 2 , 3 ) no qual descrevo o processo de explorar as possibilidades de integrar o VSF a uma loja eletrônica baseada no Magento 2 e o primeiro em que os dados do Magento saltaram para o navegador do cliente.

KDPV

Sob o gato, há um link para scripts de implantação e uma breve descrição das etapas.

Finalidade

Exibir nos dados da peça do cliente as categorias / produtos obtidos do Magento.

Esquema

Agora, as dependências entre os componentes do aplicativo são apresentadas para mim assim:

shemka

Ambiente de trabalho

Na iteração atual, usei novamente a versão média do servidor Linux Ubuntu 18.04 LTS de 64 bits (CPU 2x 2198 MHz, 4 GB RAM, disco 10 GB) na nuvem Exoscale .

Scripts de implantação

Coloquei os scripts para implantar componentes de aplicativos em um projeto separado: flancer64 / vsf_mage2_setup .

Etapas de implantação:

Configuração de implantação

No momento da redação deste artigo, a configuração de implantação era assim:

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

Implantação de aplicativo

Clono os scripts para implantar os componentes em um host limpo e defino a configuração de implantação local:

 $ 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 ...

Depois disso, executo os scripts de implantação, do primeiro ao quarto:

 $ 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

O conteúdo dos scripts pode ser visualizado no github'e. Como resultado, os seguintes componentes serão instalados e configurados em um host vazio:

Elasticsearch
Redis
vue-storefront
vue-storefront-api
mage2vuestorefront

As configurações de componentes podem ser vistas nos scripts de implantação apropriados.

Script de Replicação de Dados Magento2 => VSF

Na quarta etapa, um script de replicação de dados ~/mage2vuestorefront/src/run.sh . Dou-o em sua totalidade (com exceção de dados confidenciais):

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

Replicação de dados

Script ./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}"

O script ~/mage2vuestorefront/src/run.sh recupera dados do Magento 2 acessando a API da Web Magento, para que não funcione rapidamente. Os desenvolvedores de VSF têm uma alternativa ( magento2-vsbridge-indexer ), eu usei em um artigo anterior .

Após transferir os dados do Magento 2 para o Elasticsearch, é necessário atualizar a configuração da API do VSF.

Tudo isso é feito assim:

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

Conclusão

Bem, as categorias e produtos do Magento "se infiltraram" no aplicativo VSF. Agora você precisa configurar o movimento reverso - para que os dados do VSF (cesta, pedidos) cheguem ao Magento 2 e certifique-se de que os clientes registrados no Magento 2 também possam efetuar login no VSF.

Vue Storefront: Importar diretório do Magento 2