أواصل الترويج لرابط الإحالة الخاص بي إلى موفر IaaS Exostate وأقدم المقالة الثانية من حملتي الإعلانية. في المقالة الأولى ، نشرت ونشرت تطبيق " واجهة المتجر " كخادم منفصل ، دون أن يرتبط بأي بيانات ، وأخفيت بهذه الطريقة السخيفة اهتمامي التجاري في بيع خدمات Exoscale. تم فتح محاولاتي المثيرة للشفقة بنجاح من قبل زميل aol-nnov وتم أخذي لتنظيف المياه. حسنًا ، لا تختلف المرحلة الثانية من حملتي الإعلانية عن المرحلة الأولى - وهي نفس الصفحة التي بها خطأ:

يتم ربط الواجهة الأمامية الآن بالواجهة الخلفية (' vue-storefront-api ') ، لكن الرسالة القاتمة نفسها " هناك خطأ ما ... " في متصفح العميل. لذلك ، بعد أن تجاهلت التواضع الخاطئ ، قمت بتقديم رابط الإحالة الخاص بي إلى kat ، وقمت بإخفاء المظهر بالكامل تحت kat - تفاصيل عن كيفية دمج "Vue Storefront" مع "Vue Storefront API".

هدف

في هذه المرحلة ، قمت بتعيين مهمة رفع خلفية وظيفية إلى الحد الأدنى وإغلاق الواجهة عليها.

shemka

لجعلها أكثر وضوحًا ، أعطي صورة قمت بتطويرها استنادًا إلى تحليل تكوينات التطبيق:

vue-storefront نشر vue-storefront أشرت إليها في مقال سابق . وبالتالي ، يجب رفع vue-storefront-api و Elasticsearch و Redis. بناءً على العنوان / المنفذ في configQL ، فإن vue-storefront-api storefront vue-storefront-api هي المسؤولة عن GraphQL نفسها.

بيئة العمل

بالنسبة إلى هذه المرحلة ، كان لدي أيضًا إصدار صغير من خادم Linux Ubuntu 18.04 LTS 64 بت (وحدة المعالجة المركزية 2x 2198 ميجاهرتز ، ذاكرة وصول عشوائي 2 جيجابايت ، قرص 10 جيجابايت). ما هو لطيف في IaaS هو القدرة على البدء مرارًا وتكرارًا من نقطة الصفر ، وإلقاء التجارب الفاشلة السابقة في سلة المهملات.

المرحلة الاولى

في ما يلي النص البرمجي لتكرار خطوات الخطوة الأولى:

 #!/usr/bin/env/bash set -e sudo apt update sleep 2 # wait 2 second before upgrade to prevent en error sudo apt upgrade -y sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt install -y nodejs sudo curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - sudo echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt update && sudo apt install yarn sudo npm install pm2@latest -g sudo npm install @vue-storefront/cli@latest -g # interactive command below: use 'Stable versions' / 'v1.10.4' (or latest) / 'Manual installation' vsf init 

سيكون من الضروري التطلع إلى النشر التلقائي vue-storefront ، دون تدخل بشري. ولكن الآن ، مثل هذا ، مع vsf .

تثبيت Elasticsearch

 # apt install openjdk-11-jre-headless -y # java -version openjdk version "11.0.4" 2019-07-16 OpenJDK Runtime Environment (build 11.0.4+11-post-Ubuntu-1ubuntu218.04.3) OpenJDK 64-Bit Server VM (build 11.0.4+11-post-Ubuntu-1ubuntu218.04.3, mixed mode, sharing) # apt-get install apt-transport-https # wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add - # add-apt-repository "deb https://artifacts.elastic.co/packages/7.x/apt stable main" # apt update # apt install elasticsearch -y 

قبل بدء الخدمة ، تحتاج إلى تغيير تكوين Elasticsearch حتى تتمكن من الوصول إلى الخدمة من الخارج (هذا ليس ضروريًا ، ولكنه أكثر ملاءمة بالنسبة لي):

 $ sudo nano /etc/elasticsearch/elasticsearch.yml cluster.name: habr_demo node.name: exo01 path.data: /var/lib/elasticsearch path.logs: /var/log/elasticsearch network.host: 0.0.0.0 discovery.seed_hosts: [] 

إطلاق الخدمة:

 # service elasticsearch restart 

والتحقق من أدائها:

 $ curl -X GET "http://localhost:9200/?pretty" { "name" : "exo01", "cluster_name" : "habr_demo", "cluster_uuid" : "_na_", "version" : { "number" : "7.4.2", "build_flavor" : "default", "build_type" : "deb", "build_hash" : "2f90bbf7b93631e52bafb59b3b049cb44ec25e96", "build_date" : "2019-10-28T20:40:44.881551Z", "build_snapshot" : false, "lucene_version" : "8.2.0", "minimum_wire_compatibility_version" : "6.8.0", "minimum_index_compatibility_version" : "6.0.0-beta1" }, "tagline" : "You Know, for Search" } 

تثبيت Redis

 # apt install redis-server -y 

تمامًا مثل Elasticsearch ، أقوم بتكوين Redis ليكون متاحًا من الخارج:

 # nano /etc/redis/redis.conf bind 0.0.0.0 # service redis-server start 

أبدأ الخدمة وتحقق من أدائها:

 # service redis-server start # redis-cli > set test "It's working!" > get test > exit 

تثبيت vue-storefront-api

 $ cd ~ $ git clone https://github.com/DivanteLtd/vue-storefront-api.git 

ربط الجبهة إلى الخلفية

التكوين الأمامي

يمكن العثور على خيارات التكوين الأمامية المتاحة في ~/vue-storefront/config/default.json . لقد تجاوزت بعض الخيارات في ~/vue-storefront/config/local.json :

 { "server": { "host": "0.0.0.0", "port": 3000 }, "redis": { "host": "194.182.181.149", "port": 6379, "db": 0 }, "graphql": { "host": "194.182.181.149", "port": 8080 }, "api": { "url": "http://194.182.181.149:8080" }, "elasticsearch": {} } 

server.host|.port - أقوم بربط خادم nodejs بإخراج محتوى للواجهة الأمامية لجميع عناوين IP المتاحة على المنفذ المقابل.

redis و graphql - ربط عنوان IP الخارجي لخادم الاختبار الخاص بي. لا أعرف ما إذا كان خادم nodejs الذي أصدر المحتوى يستخدم هذه الإعدادات ، أو ما إذا كانت هذه الإعدادات مستخدمة من جانب العميل في المتصفح ، لذلك أضع العنوان الخارجي.

api.uri - هنا تحتاج بالتأكيد إلى تسجيل عنوان IP للخادم ، في المرحلة السابقة ، رأيت مكالمات API من المتصفح (تطبيقات PWA) في سجلات الطلبات (علامة تبويب Network في شريط الأدوات). هذا هو عنوان المنفذ الذي سيعلق عليه خادم nodejs من تطبيق vue-storefront-api storefront vue-storefront-api .

التكوين الخلفي

يمكن أيضًا عرض خيارات التكوين المتاحة في ~/vue-storefront-api/config/default.json . فيما يلي الخيارات التي تم تجاوزها في ~/vue-storefront-api/config/local.json :

 { "server": { "host": "0.0.0.0", "port": 8080 }, "elasticsearch": { "host": "localhost", "port": 9200 }, "redis": { "host": "localhost", "port": 6379 } } 

server.host|.port - أقوم بربط خادم nodejs الذي سيوفر محتوى لواجهة برمجة التطبيقات لجميع عناوين IP المتاحة على المنفذ المقابل.

توجد redis و redis على نفس المضيف مثل خادم API ، لذلك أود فقط تكرار المعلمات الافتراضية.

بناء التطبيق

جبهة

 $ cd ~/vue-storefront $ yarn install $ yarn build 

الخلفية

 $ cd ~/vue-storefront-api $ yarn install $ yarn build 

بدء وإيقاف التطبيقات

 $ cd ~/vue-storefront-api $ yarn start ... $ cd ~/vue-storefront $ yarn start ... [PM2][WARN] Applications server not running, starting... [PM2] App [server] launched (4 instances) ┌──────────┬────┬─────────┬──────┬────────┬─────────┬────────┬───────┬───────────┬────────┬──────────┐ │ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────┼────┼─────────┼──────┼────────┼─────────┼────────┼───────┼───────────┼────────┼──────────┤ │ api │ 0 │ fork │ 3690 │ online │ 0 │ 11s │ 0% │ 85.2 MB │ ubuntu │ disabled │ │ o2m │ 1 │ fork │ 3696 │ online │ 0 │ 11s │ 0% │ 48.4 MB │ ubuntu │ disabled │ │ server │ 2 │ cluster │ 3763 │ online │ 0 │ 0s │ 26.7% │ 66.9 MB │ ubuntu │ disabled │ │ server │ 3 │ cluster │ 3770 │ online │ 0 │ 0s │ 0% │ 68.1 MB │ ubuntu │ disabled │ │ server │ 4 │ cluster │ 3785 │ online │ 0 │ 0s │ 0% │ 40.9 MB │ ubuntu │ disabled │ │ server │ 5 │ cluster │ 3796 │ online │ 0 │ 0s │ 0% │ 40.9 MB │ ubuntu │ disabled │ └──────────┴────┴─────────┴──────┴────────┴─────────┴────────┴───────┴───────────┴────────┴──────────┘ Use `pm2 show <id|name>` to get more details about an app Done in 1.49s. 

وقف:

 $ pm2 stop all 

عرض السجلات:

 $ pm2 log 

اتصال التطبيق

عنوان التطبيق: http://194.182.181.149//000/ ونتيجة لذلك ، لدينا رسالة خطأ في المتصفح في البداية ، ولكن في سجلات خادم API يمكننا تسجيل مكالمات المتصفح إلى واجهة برمجة التطبيقات:

 $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 2Cattribute_set_id٪ 2Coptions_container٪ 2Cmsrp_display_actual_price_type٪ 2Chas_options٪ 2Cstock.manage_stock٪ 2Cstock.use_config_min_qty٪ 2Cstock.use_config_notify_stock_qty٪ 2Cstock.stock_id٪ 2Cstock.use_config_backorders٪ 2Cstock.use_config_enable_qty_inc٪ 2Cstock.enable_qty_increments٪ 2Cstock.use_config_manage_stock٪ 2Cstock $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 2Cstock.qty_increments٪ 2Csmall_image٪ 2Csgn٪ 2C٪ 2A.sgn ومن = $ pm2 log 3|server | 2019-11-16 07:44:33: Error during render : / 3|server | 2019-11-16 07:44:33: Error: FetchError in request to ES: FetchError: invalid json response body at http://194.182.181.149:8080/api/catalog/vue_storefront_catalog/product/_search?_source_exclude=%2A.msrp_display_actual_price_type%2Crequired_options%2Cupdated_at%2Ccreated_at%2Cattribute_set_id%2Coptions_container%2Cmsrp_display_actual_price_type%2Chas_options%2Cstock.manage_stock%2Cstock.use_config_min_qty%2Cstock.use_config_notify_stock_qty%2Cstock.stock_id%2Cstock.use_config_backorders%2Cstock.use_config_enable_qty_inc%2Cstock.enable_qty_increments%2Cstock.use_config_manage_stock%2Cstock.use_config_min_sale_qty%2Cstock.notify_stock_qty%2Cstock.use_config_max_sale_qty%2Cstock.use_config_max_sale_qty%2Cstock.qty_increments%2Csmall_image%2Csgn%2C%2A.sgn&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22bool%22%3A%7B%22must%22%3A%5B%7B%22terms%22%3A%7B%22category.name.keyword%22%3A%5B%22Tees%22%5D%7D%7D%2C%7B%22terms%22%3A%7B%22visibility%22%3A%5B2%2C3%2C4%5D%7D%7D%2C%7B%22terms%22%3A%7B%22status%22%3A%5B0%2C1%5D%7D%7D%5D%7D%7D%7D%7D%7D&size=8&sort=created_at%3Adesc reason: Unexpected end of JSON input 3|server | at w (core/server-entry.ts:23:25) 3|server | at server-bundle.js:1:468554 3|server | at processTicksAndRejections (internal/process/task_queues.js:93:5) 3|server | 2019-11-16 07:44:33: whole request [/error]: 56ms 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/create?token= 204 1.320 ms - 0 0|api | 2019-11-16 07:44:34: POST /api/cart/create?token= 200 465.416 ms - 56 0|api | 2019-11-16 07:44:34: OPTIONS /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 204 0.239 ms - 0 0|api | 2019-11-16 07:44:34: GET /api/cart/pull?token=&cartId=35bea3b7dcf8fb841187d69489fe8c51 200 103.949 ms - 24 

استنتاج

تمت إدارته خطوة واحدة إلى الأمام - Vue Storefront PWA تتصل بـ Vue Storefront API. بعد ذلك ، تحتاج إلى التعامل مع محتوى الواجهة الخلفية. ما هي البيانات المفهرسة في Elasticsearch ، وكيف تصل إلى هناك وكيف يتم استردادها.

شكرا على القراءة وانقر على رابط الإحالة الخاص بي. حسنًا ، اللعنة ، من أجلها ، هاجم كل هذا هنا.