Salah satu pidato yang membuat saya tertarik pada konferensi Baltik Meet Magento adalah pembicaraan Sander Mangel tentang kemungkinan menggunakan Vue Storefront (VSF) bersama dengan Magento.
PWA adalah bidang pengembangan yang menjanjikan dalam pengembangan web. Pengembang Magento 2 menawarkan seperangkat alat mereka sendiri untuk membuat aplikasi web berorientasi mobile yang modern yang sesuai dengan tradisi Magento, dan pengembang Vue Storefront telah mengambil jalur untuk menciptakan front universal yang dapat berinteraksi dengan berbagai backend melalui adaptor (Magento, WooComerce, Odoo ,. ..) Beberapa bulan yang lalu saya mencoba PWA Studio Magento dan sampai pada kesimpulan bahwa solusinya masih lembab. Versi demo Vue Storefront membuat kesan yang sangat baik pada saya dan saya ingin merasakan solusi ini lebih intim.
Saya membayar upeti kepada orang-orang yang menyiapkan demo untuk penyebaran - itu cukup untuk memenuhi persyaratan (memiliki nodejs pra-instal, benang, buruh pelabuhan, ...), pilih semua opsi secara default selama proses instalasi, dan Anda bisa mendapatkan mesin PWA Anda sendiri mirip dengan versi demo. Tetapi saya tidak perlu memiliki satu demo lagi, saya perlu menghubungkan Vue Storefront ke proyek yang sudah saya miliki. Dan di sini penyergapan dimulai.
Pengembang Magento memiliki pemahaman yang baik tentang dunia PHP dan, sebagai aturan, tidak terlalu baik tentang dunia nodejs. Hal-hal sepele untuk dunia kedua menyebabkan kehancuran di antara para penghuni dunia pertama. Di bawah potongan, saya menggambarkan pendekatan kedua saya untuk menyebarkan Vue Storefront dalam upaya untuk menghubungkannya dengan proyek saya yang ada. Saya harus segera mengatakan bahwa hasil dari pendekatan kedua yang saya miliki adalah aplikasi yang tidak terhubung dengan apa pun, tetapi setidaknya memuat ke browser. Sangat mungkin bahwa saya harus melakukan lebih dari satu pendekatan sampai saya mendapatkan hasil yang diinginkan.
Tujuan
Dalam proses berkenalan dengan Vue Storefront, tujuan saya menjadi lebih sederhana dan lebih sederhana, sementara saya memilih yang sangat sederhana - untuk mengumpulkan proyek di server terpisah dan memuat aplikasi ke dalam browser.
Lingkungan kerja
Untuk kemurnian eksperimen, saya menggunakan IaaS . Dari penyedia layanan yang tercantum dalam tabel, saya memilih Exoscale ( tautan rujukan saya untuk pendaftaran). Setoran minimum pada saat pendaftaran adalah 5 EUR (+ 21% PPN Eropa), tetapi jumlah ini cukup untuk bermain lebih dari sekali. Layanan ini benar-benar membutuhkan uang hanya untuk apa yang Anda gunakan (daya komputasi, ruang disk, jaringan).
Saya bermain di versi kecil Linux Ubuntu 18.04 LTS 64-bit (CPU 2x1.998 MHz, RAM 2 GB, disk 10GB).
Persiapan lingkungan kerja:
$ sudo -i # apt update # apt upgrade -y
Pasang nodejs & npm:
# curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - # apt-get install -y nodejs # node --version && npm --version v12.13.0 6.12.0
Instalasi benang:
# curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - # echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list # apt-get update && sudo apt-get install yarn # yarn --version 1.19.1
Instal VSF
Pra- instal PM2 dan vue-storefront / cli :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
Kami berhenti root dan membuat versi aplikasi vue-storefront versi 1.10.4 dalam mode manual:
# exit $ cd ~ $ vsf init Check avalilable versions ? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production) ? Select specific version v1.10.4 ? Would you like to use friendly installer or install Vue Storefront manually? Manual installation Copying Vue Storefront files
Buka direktori root aplikasi dan buat konfigurasi lokal:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
Konfigurasi dasar ada di file ./config/default.json . Itu cocok untuk kita dengan pengecualian opsi server.host , yaitu kita akan terhubung ke server dari jarak jauh. Saya meninggalkan port ( server.port ) secara default - 3000.
Bangun aplikasi
Di sini saya harus bereksperimen, pada akhirnya saya sampai pada urutan perintah berikut:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Memulai dan menghentikan aplikasi
$ yarn start $ pm2 stop all
Koneksi Aplikasi
Alamat aplikasi: http : //xxx.xxx.xxx.xxxhaps000/ Akibatnya, kami memiliki pesan kesalahan:
Kesimpulan
Ya, hasilnya tidak terlalu mengesankan, tetapi itu dilakukan tanpa magic khusus. Redis, ElasticSearch, GraphQL - semua ini dikonfigurasi dalam ./config/default.json dan saat ini hilang. Dan juga harus ada vue-storefront-api dan modul untuk mereplikasi data antara vue-storefront-api dan Magento 2. Saya sangat berharap bahwa saya akan menulis lebih banyak tentang mereka.
Itu saja untuk saat ini. Terima kasih sudah membaca.