🈲 📋 🧗 एक उदाहरण के रूप में Nuxt.js का उपयोग करके आइसोमोर्फिक वेब एप्लिकेशन को तैनात करें। 🤙🏽 🕉️ 🛀

मध्यम और बड़ी परियोजनाओं में, साइट एक सेवा तक सीमित नहीं है - उदाहरण के लिए, केवल एक साइट, एक नियम के रूप में एक डेटाबेस, एक एपीआई, एक सर्वर है जो इन सभी सेवाओं के लिए अनुरोध करता है। बिना किसी मानकीकरण के यह सब रोल आउट और अपडेट करना आसान नहीं है, और कई सर्वरों को स्केल करना और भी मुश्किल है।

डॉकर हमें इस समस्या को हल करने में मदद करेगा। यह पैकेजिंग, वितरण और अनुप्रयोगों के प्रकाशन की दुनिया में वास्तविक मानक बन गया है।

डॉकर हमें किसी भी प्लेटफ़ॉर्म में सामग्री की स्थिरता की गारंटी देते हुए, एक अलग कंटेनर में सभी निर्भरता और सेटिंग्स के साथ एक एप्लिकेशन या सेवा को लपेटने की अनुमति देता है।

एक आइसोमॉर्फिक एप्लिकेशन के रूप में, हम Nuxt.js फ्रेमवर्क का उपयोग करेंगे, जिसमें Vue.js और Node.js शामिल हैं, जिससे हमें सर्वर-साइड रेंडरिंग (SSR) के साथ सार्वभौमिक वेब एप्लिकेशन लिखने की अनुमति मिलती है।

यह पसंद व्यक्तिगत पसंद के कारण है, हालांकि, उसी तरह, आप किसी अन्य ढांचे को ले सकते हैं, उदाहरण के लिए Next.js.

हम पहली छवि एकत्र करते हैं और प्रकाशित करते हैं।

सबसे पहले, आपको एप्लिकेशन के अंदर पोर्ट और होस्ट को कॉन्फ़िगर करने की आवश्यकता है। ऐसा करने के कई तरीके हैं, हम पैकेज में सेटिंग्स का उपयोग करेंगे। नया अनुभाग जोड़कर।

"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }

आगे की कार्रवाई के लिए, हमें सिस्टम में स्थापित डॉकटर, डॉक-कम्पोज़ और एक खुली परियोजना के साथ एक संपादक की आवश्यकता है।

एक डॉकरफाइल बनाएं, जिसे हम रूट में डालते हैं और छवि बनाने के लिए निर्देशों का वर्णन करते हैं।

हमें Node.js संस्करण 10 छवि के आधार पर छवि बनाने की आवश्यकता है, इस मामले में अल्पाइन के हल्के संस्करण का उपयोग किया जाता है:

 FROM node:10-alpine

फिर निर्देशिका के नाम के साथ पर्यावरण चर सेट करें:

 ENV APP_ROOT /web

कार्य निर्देशिका के रूप में सेट करें और स्रोत जोड़ें:

 WORKDIR ${APP_ROOT} ADD . ${APP_ROOT}

निर्भरता स्थापित करें और अनुप्रयोग का निर्माण करें:

 RUN npm ci RUN npm run build

और हम छवि के अंदर एप्लिकेशन लॉन्च कमांड लिखते हैं:

 CMD ["npm", "run", "start"]

Dockerfile

 FROM node:10-alpine ENV APP_ROOT /web ENV NODE_ENV production WORKDIR ${APP_ROOT} ADD . ${APP_ROOT} RUN npm ci RUN npm run build CMD ["npm", "run", "start"]

उसके बाद, टर्मिनल में वर्तमान फ़ोल्डर खोलें और छवि एकत्र करें:

 docker build -t registry.gitlab.com/vik_kod/nuxtjs_docker_example .

यह सत्यापित करने के लिए छवि को स्थानीय रूप से चलाएँ कि सब कुछ सही ढंग से काम करता है:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

लोकलहोस्ट करने जा रहे हैं : 3000, हमें निम्नलिखित देखना चाहिए:

बहुत बढ़िया! हमने स्थानीय मशीन पर एप्लिकेशन के निर्माण को सफलतापूर्वक लॉन्च किया।

लक्ष्य सर्वर पर तैयार असेंबली छवि का उपयोग करने के लिए अब हमें डॉकटर रिपॉजिटरी में छवि प्रकाशित करने की आवश्यकता है। आप या तो स्व-होस्ट किए गए भंडार या किसी अन्य का उपयोग कर सकते हैं, उदाहरण के लिए, आधिकारिक hub.docker.com ।

मैं gitlab में रिपॉजिटरी का उपयोग करूँगा, वहाँ docker रिपॉजिटरी वाले टैब को रजिस्ट्री कहा जाता है। पहले, मैंने पहले ही प्रोजेक्ट के लिए एक रिपॉजिटरी बनाई थी, इसलिए अब मैं कमांड निष्पादित करता हूं:

 docker push registry.gitlab.com/vik_kod/nuxtjs_docker_example

छवि सफलतापूर्वक बूट हो जाने के बाद, आप VPS सर्वर को कॉन्फ़िगर करना शुरू कर सकते हैं,
मेरा निम्नानुसार है:

1 जीबी रैम
4 कोर
30 जीबी ड्राइव

मैंने सर्वर बनाते समय तुरंत docker को स्थापित करने का अवसर भी लिया, इसलिए यदि यह आपके VPS पर स्थापित नहीं है, तो आप आधिकारिक वेबसाइट पर दिए गए निर्देशों को पढ़ सकते हैं ।

सर्वर बनाने के बाद, इस पर जाएं और डॉकटर रिपॉजिटरी में लॉग इन करें, मेरे मामले में यह गिटलैब है:

 docker login registry.gitlab.com

प्राधिकरण के बाद, हम पहले देखे गए कमांड के साथ आवेदन शुरू कर सकते हैं:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

छवि डाउनलोड और शुरू हो गई है, आइए देखें:

हम एक परिचित तस्वीर देखते हैं, हमने कंटेनर को एप्लिकेशन के साथ लॉन्च किया, लेकिन पहले से ही रिमोट सर्वर पर।

अंतिम स्पर्श बना रहा, अब जब टर्मिनल बंद हो गया है, तो छवि को रोक दिया जाएगा, इसलिए हम पृष्ठभूमि में कंटेनर शुरू करने के लिए -d विशेषता जोड़ देंगे।
बंद करो और पुनः आरंभ करें:

 docker run -d -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

अब हम टर्मिनल को बंद कर सकते हैं और सुनिश्चित कर सकते हैं कि हमारा एप्लिकेशन सफलतापूर्वक कार्य कर रहा है।

हमने वह हासिल किया जो जरूरी था - हमने डॉकटर में एप्लिकेशन लॉन्च किया और अब यह एक स्वतंत्र छवि और एक बड़े बुनियादी ढांचे के हिस्से के रूप में तैनाती के लिए उपयुक्त है।

रिवर्स प्रॉक्सी जोड़ें

वर्तमान चरण में, हम सरल प्रोजेक्ट प्रकाशित कर सकते हैं, लेकिन क्या होगा यदि हमें एप्लिकेशन और API को एक ही डोमेन पर रखने की आवश्यकता है और इसके अलावा, स्टेटिक्स को Node.js के माध्यम से नहीं दें?

इस प्रकार, तथाकथित रिवर्स प्रॉक्सी सर्वर के लिए आवश्यकता उत्पन्न होती है, जिससे संबंधित सेवाओं के अनुरोध के आधार पर सभी अनुरोध प्राप्त होंगे और पुनर्निर्देशित किए जाएंगे।

ऐसे सर्वर के रूप में हम nginx का उपयोग करेंगे।

कंटेनरों का प्रबंधन करना यदि व्यक्तिगत रूप से एक से अधिक हैं तो बहुत सुविधाजनक नहीं है। इसलिए, हम कंटेनरों को व्यवस्थित और प्रबंधित करने के तरीके के रूप में डॉकटर-कंपोज का उपयोग करेंगे।

एक नया खाली प्रोजेक्ट बनाएं, जिसके मूल में हम docker-compose.yml फ़ाइल और nginx फ़ोल्डर जोड़ते हैं।

Docker-compose.yml में हम निम्नलिखित लिखते हैं:

 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #        ports: - "3000:3000"

नेगनेक्स फ़ोल्डर में, कॉन्फ़िगर करें, जिसे आधिकारिक साइट Nuxt.js द्वारा मामूली बदलावों के साथ अनुशंसित किया गया है।

nginx.conf

 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } }

हम चलाने के लिए कमांड निष्पादित करते हैं:

 docker-compose up

सब कुछ सही ढंग से शुरू हुआ, अब अगर हम उस पते पर जाते हैं जो नगीनक्स, लोकलहोस्ट सुन रहा है - हम अपने आवेदन को देखेंगे, तो कोई दृश्य अंतर नहीं होगा, हालांकि अब सभी अनुरोधों को नगणक्स पर जाते हैं जहां उन्हें निर्दिष्ट नियमों के आधार पर पुनर्निर्देशित किया जाता है।

अब हमारे पास अतिरिक्त सेवाएं या स्टेटिक्स नहीं हैं, चलो एक स्थिर फ़ोल्डर जोड़ते हैं जिसमें हम कुछ छवि डालेंगे।

डॉकटर-कंपोज़ में एक लाइन जोड़कर इसे नगनेक्स कंटेनर में माउंट करें:

 ... container_name: proxy_nginx volumes: #     - ./static:/var/www/static ...

अपडेट किए गए डॉकटर-कंपोज

 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #     - ./static:/var/www/static #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #         ports: - "3000:3000"

फिर nginx.conf में नया स्थान जोड़ें:

 location /static/ { try_files $uri /var/www/static; }

Nginx.conf अपडेट किया गया

 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } location /static/ { try_files $uri /var/www/static; } }

डॉकटर-कम्पोज़ करें:

 docker-compose up --build

लोकलहोस्ट / स्टेटिक / डेमो.जेपीजी पर जाएं

अब स्टैटिक्स Nginx के माध्यम से दिए गए हैं, मुख्य एप्लिकेशन में Node.js से लोड हटा रहे हैं।

यह सुनिश्चित करने के बाद कि सब कुछ काम करता है, आप सर्वर पर हमारी असेंबली प्रकाशित कर सकते हैं। ऐसा करने के लिए, मैं वर्तमान निर्देशिका में एक रिपॉजिटरी बनाऊंगा। पहले लॉग और स्थिर फ़ोल्डर को .gitignore में जोड़ा गया है।

उसके बाद, हम सर्वर पर जाते हैं, पहले से लॉन्च किए गए डॉकटर छवि को रोकते हैं और रिपॉजिटरी को क्लोन करते हैं।

असेंबली शुरू करने से पहले, आपको स्टैटिक्स के साथ फ़ोल्डर को सर्वर पर ले जाना होगा, स्थानीय मशीन पर टर्मिनल पर जाएँ और फ़ोल्डर में सर्वर को स्थानांतरित करने के लिए scp कमांड-लाइन उपयोगिता का उपयोग करें:

 scp -r /Users/vik_kod/PhpstormProjects/nuxtjs_docker_proxy_example/static root@5.101.48.172:/root/example_app/

यदि स्टैटिक्स की मात्रा बड़ी है, तो पहले फ़ोल्डर को संपीड़ित करना और संग्रह के रूप में भेजना बेहतर है, और फिर इसे सर्वर पर अनपैक करें। अन्यथा, डाउनलोड में लंबा समय लग सकता है।

हम सर्वर पर टर्मिनल पर लौटते हैं और क्लोन फ़ोल्डर में जाते हैं, कमांड चलाते हैं:

 docker-compose up -d

टर्मिनल बंद करें और साइट पर जाएं:

बहुत बढ़िया! रिवर्स प्रॉक्सी का उपयोग करके, हमने स्टेटिक्स को एप्लिकेशन से अलग कर दिया है।

आगे के कदम

ऊपर हमने जो कुछ भी किया है, वह काफी सरल विकल्प है, बड़ी परियोजनाओं में आपको अधिक चीजों पर विचार करने की आवश्यकता है, नीचे एक छोटी सूची है कि आप आगे क्या कर सकते हैं।

डेटा केवल स्थिर व्यवस्थापक क्षेत्रों, एसपीए एप्लिकेशन और डेटाबेस के लिए कंटेनर
छवि प्रसंस्करण और अनुकूलन के लिए अतिरिक्त सेवाएं, उदाहरण
सीआई / सीडी का एकीकरण, चयनित शाखा को धक्का देने के साथ-साथ छवि की असेंबली, साथ ही स्वचालित अपडेटिंग और पुनरारंभ सेवाएं
लोड संतुलन और आसान क्षैतिज स्केलिंग के लिए 1 से अधिक सर्वर होने पर कुबेरनेट या झुंड क्लस्टर बनाएं

कुल मिलाकर

हमने सर्वर पर एप्लिकेशन को सफलतापूर्वक प्रकाशित किया है और इसे और स्केलिंग के लिए तैयार किया है।
हमें डॉकटर से पता चला और एक कंटेनर में अपने आवेदन को कैसे लपेटना है, इसके बारे में पता चला।
हमने सीखा कि बुनियादी ढांचे में सुधार के लिए और क्या कदम उठाए जा सकते हैं।

स्रोत कोड

आवेदन
कॉन्फ़िगरेशन

आपके ध्यान के लिए धन्यवाद और मुझे आशा है कि इस सामग्री ने आपकी मदद की!

एक उदाहरण के रूप में Nuxt.js का उपयोग करके आइसोमोर्फिक वेब एप्लिकेशन को तैनात करें।

हम पहली छवि एकत्र करते हैं और प्रकाशित करते हैं।

रिवर्स प्रॉक्सी जोड़ें

आगे के कदम

कुल मिलाकर

स्रोत कोड

More articles: