Enfin, j'ai pu voir les données de Magento (catégories et produits) dans l'application Vue Storefront (VSF). C'est déjà le quatrième article ( 1 , 2 , 3 ), dans lequel je décris le processus d'exploration des possibilités d'intégration de VSF avec une boutique électronique basée sur Magento 2, et le premier où les données de Magento se sont glissées dans le navigateur du client.

KDPV

Sous le chat se trouve un lien vers des scripts de déploiement et une brève description des étapes.

But

Affichage dans la partie client des données sur les catégories / produits obtenus de Magento.

Schéma

Maintenant, les dépendances entre les composants de l'application me sont présentées comme ceci:

shemka

Environnement de travail

Dans l'itération actuelle, j'ai à nouveau utilisé la version moyenne du serveur Linux Ubuntu 18.04 LTS 64 bits (2x CPU 2198 MHz, 4 Go de RAM, 10 Go de disque) dans le cloud Exoscale .

Scripts de déploiement

J'ai mis les scripts pour déployer les composants d'application dans un projet distinct: flancer64 / vsf_mage2_setup .

Étapes de déploiement:

Configuration de déploiement

Au moment d'écrire ces lignes, la configuration de déploiement ressemble à ceci:

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

Déploiement d'applications

Je clone les scripts pour déployer les composants sur un hôte propre et définit la configuration de déploiement 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 ...

Après cela, j'exécute les scripts de déploiement, du premier au quatrième:

 $ 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

Le contenu des scripts peut être consulté sur github'e. Par conséquent, les composants suivants seront installés et configurés sur un hôte vide:

Elasticsearch
Redis
vue-devanture
vue-storefront-api
mage2vuestorefront

Les configurations des composants sont visibles dans les scripts de déploiement appropriés.

Script de réplication de données Magento2 => VSF

Dans la quatrième étape, un script de réplication de données ~/mage2vuestorefront/src/run.sh . Je le donne dans son intégralité (à l'exception des données sensibles):

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

Réplication de données

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

Le script ~/mage2vuestorefront/src/run.sh récupère les données de Magento 2 en accédant à l'API Web Magento, donc cela ne fonctionne pas assez rapidement. Les développeurs VSF ont une alternative ( magento2-vsbridge-indexer ), je l'ai utilisée dans un article précédent .

Après avoir transféré les données de Magento 2 vers Elasticsearch, vous devez mettre à jour la configuration de l'API VSF.

Tout cela se fait comme ceci:

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

Conclusion

Eh bien, les catégories et les produits de Magento ont «infiltré» l'application VSF. Vous devez maintenant configurer le mouvement inverse - afin que les données du VSF (panier, commandes) pénètrent dans Magento 2 et vous assurer que les clients enregistrés dans Magento 2 peuvent également se connecter à VSF.

Vue Storefront: Importer un répertoire depuis Magento 2

But