Finalmente, pude ver los datos de Magento (categorías y productos) en la aplicación Vue Storefront (VSF). Este es ya el cuarto artículo ( 1 , 2 , 3 ), en el que describo el proceso de explorar las posibilidades de integrar VSF con una tienda electrónica basada en Magento 2, y el primero donde los datos de Magento se deslizaron en el navegador del cliente.

Debajo del gato hay un enlace a los scripts de implementación y una breve descripción de los pasos.

Propósito

Mostrar en la parte del cliente datos sobre categorías / productos obtenidos de Magento.

Esquema

Ahora las dependencias entre los componentes de la aplicación se me presentan así:

Ambiente de trabajo

En la iteración actual, nuevamente utilicé la versión mediana del servidor Linux Ubuntu 18.04 LTS de 64 bits (2x CPU de 2198 MHz, 4 GB de RAM, disco de 10 GB) en la nube Exoscale .

Scripts de implementación

Puse los scripts para implementar los componentes de la aplicación en un proyecto separado: flancer64 / vsf_mage2_setup .

Pasos de implementación:

1. Actualización de un sistema operativo vacío, instalación de servicios y aplicaciones adicionales (Elasticsearch, Redis, yarn, ...) .
2. vue-storefront .
3. vue-storefront-api .
4. mage2vuestorefront .
5. Inicie la replicación de datos de Magento 2 a VSF .

Configuración de implementación

En el momento de escribir esto, la configuración de implementación se ve así:

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

Implementación de aplicaciones

Clono las secuencias de comandos para implementar los componentes en un host limpio y establezco la configuración de implementación 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 ... 

Después de eso ejecuto los scripts de implementación, del primero al cuarto:

 $ 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 

El contenido de los scripts se puede ver en github'e. Como resultado, los siguientes componentes se instalarán y configurarán en un host vacío:

• Búsqueda elástica
• Redis
• vue-escaparate
• vue-storefront-api
• mage2vuestorefront

Las configuraciones de componentes se pueden ver en los scripts de implementación adecuados.

Script de replicación de datos Magento2 => VSF

En el cuarto paso, ~/mage2vuestorefront/src/run.sh un script de replicación de datos ~/mage2vuestorefront/src/run.sh Lo doy en su totalidad (con la excepción de los datos confidenciales):

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

Replicación de datos

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}" 

El script ~/mage2vuestorefront/src/run.sh recupera datos de Magento 2 accediendo a la API web de Magento, por lo que no funciona con bastante rapidez. Los desarrolladores de VSF tienen una alternativa ( magento2-vsbridge-indexer ), la usé en un artículo anterior .

Después de transferir datos de Magento 2 a Elasticsearch, debe actualizar la configuración de la API de VSF.

Todo esto se hace así:

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

Conclusión

Bueno, las categorías y productos de Magento se han "infiltrado" en la aplicación VSF. Ahora debe configurar el movimiento inverso, de modo que los datos del VSF (cesta, pedidos) ingresen a Magento 2 y asegúrese de que los clientes registrados en Magento 2 también puedan iniciar sesión en VSF.

Referencias

• Vue Storefront: cómo instalar e integrar con Magento2
• Prueba de concepto: cómo ejecutar PWA para Magento en una semana