Ein weiterer Beitrag im Rahmen einer Werbekampagne zur Bewerbung Ihres Empfehlungslinks. In der ersten und zweiten Veröffentlichung habe ich den Frontserver, den API-Server und zwei Hilfsdienste (Elasticsearch & Redis) angesprochen, die vom API-Server verwendet werden. In diesem Schritt habe ich versucht, einige Daten aus einem vorhandenen Magento-Projekt in meine Test-VSF-Anwendung hochzuladen.

Im dritten Schritt sind einige Fortschritte zu verzeichnen. Die PWA-Anwendung im Browser meldet keinen Fehler mehr und zeigt eine mehr oder weniger anständige Startseite an. Auch wenn nicht mit den Daten, die in meinem Magento-Projekt waren. Jede Veränderung ist besser als Stampfen.

Unter der Katze finden Sie eine Beschreibung, wie Sie Daten aus Ihrem Magento-Store in die Vue StoreFront-Anwendung hochladen, damit dem Client stattdessen Demodaten angezeigt werden. Ja, das Ergebnis ist wieder nicht sehr gut, aber für die Werbekampagne ist dies nicht das Wichtigste.

Zweck

Richten Sie die Datenübertragung von der Magento-Anwendung zur VSF-Anwendung ein.

Schema

Zu diesem Zeitpunkt haben die Komponenten, die an der Arbeit von VSF I beteiligt sind, in dieser Form dargestellt:

Arbeitsumgebung

In der aktuellen Iteration habe ich die mittlere Version des Linux Ubuntu 18.04 LTS 64-Bit-Servers (2x 2198 MHz CPU, 4 GB RAM, 10 GB Festplatte) verwendet, weil Die kleine Version wurde nach dem Starten aller Dienste langsamer, als vue-storefront . Es ist unwahrscheinlich, dass irgendjemand daran zweifelt, dass 4 GB RAM doppelt so gut sind wie 2 GB.

Vorherige Schritte

Die Aktionen der vorherigen Schritte können mit dem folgenden Skript beschrieben werden:

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

Integrationsmöglichkeiten

Im Internet habe ich zwei Möglichkeiten für die Integration von Magento-Store und VSF gefunden:

• magento2-vsbridge-indexer : Magento-Modul, das direkten Zugriff auf Magento-Daten hat und während der Indexierung Informationen in Elasticsearch hochlädt;
• mage2vuestorefront : Eine eigenständige Anwendung, die Daten von Magento über die Web-API empfängt und auch auf Elasticsearch hochlädt.

Vorerst verzichte ich auf Fragen der Datenübertragung von Vue StoreFront nach Magento.

Gemessen an der Festschreibungszeit ist das erste Projekt lebhafter als das zweite, und die Entwickler selbst empfehlen , diesen Ansatz zu verwenden:

Verwenden Sie dieses Modul anstelle von mage2vuestorefront, wenn Sie Probleme mit der Indizierungsleistung haben. Beide Projekte werden derzeit unterstützt.

Daher berücksichtige ich die zweite Integrationsoption ( mage2vuestorefront ) nicht, obwohl sie in meinem Diagramm oben angezeigt wird.

VS Brücke

Installieren des Magento-Moduls:

 $ 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 

Nach der Installation des Moduls erscheinen neue Indizes:

VS Bridge-Konfiguration

Abschnitt "Allgemeine Einstellungen":

Abschnitt "Elasticsearch Client":

Abschnitt "Indexeinstellungen":

Abschnitt "Cache-Einstellungen erneut vornehmen":

Abschnitt "Katalogeinstellungen":

Daten in Elasticsearch füllen

Daten von Magento zu Elasticsearch werden beim Indizieren übertragen:

 $ 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 

Überprüfen Sie die Datenfüllung

 $ 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 

Konfigurieren von vue-storefront und vue-storefront-api

In den VS Bridge-Einstellungen lautet das Präfix für Indizes in Elasticsearch vue_storefront_magento , und die Storefront-ID wird als vue_storefront_magento verwendet:

Entsprechend den Empfehlungen der Entwickler und analog zur Standardkonfiguration ( ~/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" } } } } 

Ich registriere mich in der lokalen Konfiguration für den ~/vue-storefront/config/local.json ( ~/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" } } } 

und in der lokalen Konfiguration für den API-Server (``):

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

Ich habe versucht, mich in der lokalen Front-Konfiguration zu registrieren:

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

Analog zum Beispiel des Entwicklers, aber im Browser erhalte ich eine bereits vertraute Fehlerseite. Entweder fehlt Elasticsearch der Index vue_storefront_magento , oder es ist etwas im vue_storefront_magento .

Ich habe keine Indizes manuell erstellt, sondern das VS Bridge-Plug-in verwendet. Daher habe ich erwartet, dass alle erforderlichen Indizes erstellt werden, aber nein, alles war wie gewohnt. Daher füge ich das Suffix _1 zu elasticsearch.index lokalen Front-Konfiguration hinzu.

Anwendungen neu erstellen und starten

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

Die PWA-Anwendung sollte unter der Adresse " http : //89.145.166.192∗000/ " verfügbar sein ( natürlich habe ich die Infrastruktur nach den Tests "getötet", sollte es also sein, aber nicht ) und sollte dem Bild, das ich habe, sehr ähnlich sein ganz am Anfang des Artikels veröffentlicht.

Fazit

Das Pairing nach "Magento-to-VSF" wird auf einem recht guten Niveau durchgeführt. Die Indizierung von Daten ist sowohl termin- als auch ereignisbezogen möglich (zumindest angekündigt). Es belastet zwei Punkte:

1. Anbindung an die 5.x-Version von Elasticsearch. Ich musste nacheinander ein Downgrade von 7.x auf 6.x und von 6.x auf 5.x durchführen, bevor VS Bridge anfing, Daten auf ES hochzuladen. Wie stark ist VSF speziell an 5.x gebunden und was passiert, wenn die Entwickler von Elasticsearch die "fünf" nicht mehr unterstützen?
2. Hardcode-Demofenster in der Standard-Front-Konfiguration. Grundsätzlich sollte die Standardkonfiguration Basisdaten enthalten, die nicht von der jeweiligen Anwendungsimplementierung abhängen, und die Konfiguration der ./config/local.json sollte auf der Ebene ./config/local.json . In diesem Fall wird klar, welche Daten beim Starten Ihrer Anwendung geändert werden müssen und welche für alle (die meisten) Implementierungen gelten.

Vielen Dank an alle, die es gelesen haben. Klicken Sie auf meinen Empfehlungslink und Gott gibt mir Kraft für den nächsten Schritt. VSF ist natürlich eine beeindruckende Anwendung, aber zu verstehen ist, als würde man durch einen Sumpf laufen. Er bekam ein Bein, das andere steckte fest.