最后，我能够在Vue Storefront（VSF）应用程序中查看Magento（类别和产品）的数据。这是第四篇文章（ 1、2、3 ），其中我描述了探索将VSF与基于Magento 2的电子商店集成的可能性的过程，而第一篇文章中，来自Magento的数据跳到了客户的浏览器中。

KDPV

在目录下是指向部署脚本的链接以及步骤的简要说明。

目的

在客户零件中显示有关从Magento获得的类别/产品的数据。

方案

现在，应用程序组件之间的依赖关系以这种方式呈现给我：

工作环境

在当前迭代中，我再次在Exoscale云中使用了中型版本的Linux Ubuntu 18.04 LTS 64位服务器（2x 2198 MHz CPU，4 GB RAM，10 GB磁盘）。

部署脚本

我将用于部署应用程序组件的脚本放入一个单独的项目： flancer64 / vsf_mage2_setup 。

部署步骤：

部署配置

在撰写本文时，部署配置如下所示：

 #!/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上查看。结果，将在空主机上安装和配置以下组件：

弹性搜索
雷迪斯
店面
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 Web API从Magento 2检索数据，因此无法很快完成。 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。

Vue店面：从Magento 2导入目录

目的

方案