मीट मैगेंटो बाल्टिक में रुचि रखने वाले भाषणों में से एक सैंडर मैंगेल की मैगी के साथ वीयू स्टोरफ्रंट (वीएसएफ) के बारे में चर्चा थी।

PWA वेब विकास में विकास का एक आशाजनक क्षेत्र है। Magento 2 डेवलपर्स एक आधुनिक, मोबाइल-उन्मुख वेब अनुप्रयोग बनाने के लिए उपकरणों का अपना सेट प्रदान करते हैं जो Magento परंपराओं का अनुपालन करते हैं, और Vue Storefront डेवलपर्स ने एक सार्वभौमिक मोर्चा बनाने का मार्ग लिया है जो एडेप्टर्स (Magento, WooComerce, Odoo) के माध्यम से विभिन्न बैकेंड के साथ बातचीत कर सकता है। ..)। कुछ महीने पहले, मैंने Magento के PWA स्टूडियो की कोशिश की और इस निष्कर्ष पर पहुंचा कि समाधान अभी भी नम है। Vue Storefront के डेमो संस्करण ने मुझ पर बहुत अच्छा प्रभाव डाला और मैं इस समाधान को अधिक तीव्रता से महसूस करना चाहता था।

मैं उन लोगों को श्रद्धांजलि देता हूं जिन्होंने तैनाती के लिए डेमो तैयार किया था - यह शर्तों को पूरा करने के लिए पर्याप्त है (पहले से स्थापित नोड्ज, यार्न, डोकर, ...), स्थापना प्रक्रिया के दौरान डिफ़ॉल्ट रूप से सभी विकल्पों का चयन करें, और आप डेमो संस्करण के समान अपनी स्वयं की PWA मशीन पर प्राप्त कर सकते हैं। लेकिन मुझे एक और डेमो करने की आवश्यकता नहीं है, मुझे पहले से मौजूद प्रोजेक्ट्स के लिए Vue Storefront को कनेक्ट करने की आवश्यकता है। और यहीं से घात शुरू होता है।

Magento के डेवलपर्स को PHP की दुनिया की अच्छी समझ है और, एक नियम के रूप में, नोडज की दुनिया के बारे में बहुत अच्छा नहीं है। दूसरी दुनिया के लिए तुच्छ बातें पहली दुनिया के निवासियों के बीच मूर्खता का कारण बनती हैं। कटौती के तहत, मैंने अपने मौजूदा प्रोजेक्ट से इसे जोड़ने के प्रयास में Vue Storefront को तैनात करने के लिए अपने दूसरे दृष्टिकोण का वर्णन किया। मुझे तुरंत यह कहना होगा कि मेरे पास जो दूसरा तरीका है, उसका परिणाम एक ऐसा अनुप्रयोग है जो किसी भी चीज़ से जुड़ा नहीं है, लेकिन कम से कम ब्राउज़र में लोड हो रहा है। यह बहुत संभावना है कि मुझे वांछित परिणाम प्राप्त होने तक एक से अधिक दृष्टिकोण करने होंगे।

लक्ष्य

Vue Storefront से परिचित होने की प्रक्रिया में, मेरे लक्ष्य अधिक विनम्र और अधिक विनम्र हो गए, जबकि मैं एक बहुत ही मामूली एक पर बस गया - एक अलग सर्वर पर प्रोजेक्ट को इकट्ठा करने और ब्राउज़र में एप्लिकेशन लोड करने के लिए।

काम का माहौल

प्रयोगों की शुद्धता के लिए, मैं IaaS का उपयोग करता हूं। तालिका में सूचीबद्ध सेवा प्रदाताओं में से, मैं एक्सोस्केल (पंजीकरण के लिए मेरा रेफरल लिंक ) पर बस गया। पंजीकरण पर न्यूनतम जमा 5 EUR (+ 21% यूरोपीय वैट) है, लेकिन यह राशि एक से अधिक बार खेलने के लिए पर्याप्त है। सेवा वास्तव में केवल आपके द्वारा उपयोग किए जाने वाले (कंप्यूटिंग शक्ति, डिस्क स्थान, नेटवर्क) के लिए पैसे लेती है।

मैंने लिनक्स उबंटू 18.04 एलटीएस 64-बिट (2x 2198 मेगाहर्ट्ज सीपीयू, 2 जीबी रैम, 10 जीबी डिस्क) के छोटे संस्करण पर खेला।

काम के माहौल की तैयारी:

$ sudo -i # apt update # apt upgrade -y 

नोडज और एनपीएम स्थापित करें:

 # 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 

यार्न स्थापना:

 # 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 

VSF स्थापित करें

PM2 और vue-storefront / cli को पूर्वस्थापित करें :

 # npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g 

हमने रूट को छोड़ दिया और मैनुअल मोड में vue-storefront एप्लिकेशन संस्करण 1.10.4 बनाया:

 # 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 

एप्लिकेशन की मूल निर्देशिका पर जाएं और स्थानीय कॉन्फ़िगरेशन बनाएं:

 $ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } } 

मूल कॉन्फ़िगरेशन ./config/default.json फ़ाइल में है। यह हमें server.host विकल्प के अपवाद के साथ सूट करता है, अर्थात। हम दूर से सर्वर से कनेक्ट करने जा रहे हैं। मैंने डिफ़ॉल्ट रूप से बंदरगाह ( server.port ) को छोड़ दिया - 3000।

आवेदन बनाएँ

यहाँ मुझे प्रयोग करना था, अंत में मैं निम्नलिखित अनुक्रमों पर आया:

 $ npm install $ yarn install $ yarn build $ yarn upgrade #    ,         

एप्लिकेशन को प्रारंभ करना और रोकना

 $ yarn start $ pm2 stop all 

आवेदन कनेक्शन

आवेदन पता: http : //xxx.xxx.xxx.xxxeps000/ परिणामस्वरूप, हमारे पास एक त्रुटि संदेश है:

निष्कर्ष

हां, परिणाम बहुत प्रभावशाली नहीं है, लेकिन यह विशेष magic बिना किया। Redis, ElasticSearch, GraphQL - यह सब ./config/default.json में ./config/default.json और वर्तमान में गायब है। और vue-storefront-api और vue-storefront-api और Magento 2 के बीच डेटा प्रतिकृति के लिए एक मॉड्यूल भी होना चाहिए। मुझे वास्तव में उम्मीद है कि मैं उनके बारे में अधिक लिखूंगा।

अभी के लिए बस इतना ही। पढ़ने के लिए धन्यवाद।