डॉकटर में VueJS + NodeJS + MongoDB आवेदन कैसे पैक करें

जैसा कि आप पिछले लेख से देख सकते हैं, मैंने विभिन्न परियोजनाओं के साथ काम किया। एक नई टीम में पहले दिन आमतौर पर उसी तरह से जाते हैं: बैक-एंड मेरे पास बैठता है और एप्लिकेशन इंस्टॉल करने और तैनात करने के लिए जादुई क्रिया करता है। डॉकर सामने के अंत के लिए अपरिहार्य है बैकएंड को अक्सर PHP / Java / Python / C # स्टैक की एक विस्तृत श्रृंखला पर लिखा जाता है और सब कुछ स्थापित करने और तैनात करने के लिए फ्रंट को बैकएंड को विचलित करने की आवश्यकता नहीं होती है। केवल एक ही स्थान पर मैंने डॉकर-जेनकिन्स के एक झुंड को एक पारदर्शी तैनाती, लॉग के साथ देखा, स्व-परीक्षणों द्वारा खराब कर दिया।

डॉकटर के बारे में बहुत सारे विस्तृत लेख लिखे गए हैं। यह आलेख VueJS / Vue Router, NodeJS के साथ RESTful API के रूप में सर्वर भाग और MongoDB डेटाबेस के रूप में उपयोग किया जाता है। कई कंटेनर अनुप्रयोगों का वर्णन करने और चलाने के लिए डॉकर कम्पोज़ का उपयोग किया जाता है।

मुझे डॉकटर की आवश्यकता क्यों है

डॉकर आपको एक एप्लिकेशन को तैनात करने की प्रक्रिया को स्वचालित करने की अनुमति देता है। डेवलपर को अब अपनी मशीन पर संस्करणों की असंगति का मुकाबला करने के लिए स्वतंत्र रूप से प्रोग्राम स्थापित करने की आवश्यकता नहीं है। यह डॉकर को स्थापित करने और 1-2 टीमों को कंसोल में चलाने के लिए पर्याप्त है। लिनक्स पर ऐसा करना सबसे सुविधाजनक है।

शुरुआत हो रही है

Docker और Docker कंपोज़ स्थापित करें

फ़ोल्डर संरचना

हम क्लाइंट और सर्वर एप्लिकेशन के लिए 2 फ़ोल्डर बनाते हैं। .Yml एक्सटेंशन के साथ एक फ़ाइल एक डॉकर कंपोज़ कॉन्फ़िगरेशन है जहाँ एप्लिकेशन कंटेनर परिभाषित और लिंक किए जाते हैं।
डोकर-compose.yml:

version: "3" services: mongo: container_name: mongo hostname: mongo image: mongo ports: - "27017:27017" server: build: server/ #command: node ./server.js #   CMD  Dockerfile  /server ports: - "3000:3000" links: - mongo client: build: client/ #command: http-server ./dist #   CMD  Dockerfile  /client network_mode: host ports: - "8089:8089" depends_on: - server 

हम docker में 3 सेवाएँ बनाते हैं: NodeJS, MongoDB और Vue पर स्टैटिक्स के लिए। क्लाइंट को सर्वर से कनेक्ट करने के लिए, सर्वर पर निर्भर करता है । लिंक मोंगो का उपयोग MongoDB को सर्वर API से जोड़ने के लिए किया जाता है। सर्वर, क्लाइंट, मानगो - सेवा नाम।

VueJS पर ग्राहक

/ क्लाइंट फ़ोल्डर में VueJS पर एप्लिकेशन होता है। Vue Cli का उपयोग करके बनाया गया अनुप्रयोग। छवि का निर्माण करते समय, क्लाइंट एप्लिकेशन / डिस्टर्ब फोल्डर में स्टैटिक फाइल्स के सेट में बनाता है। Dockerfile छवि बनाने के लिए आदेशों के एक सेट का वर्णन करता है:

 FROM node:10 WORKDIR /client COPY ./package*.json ./ RUN npm install RUN npm install -g http-server COPY . . RUN npm run build EXPOSE 8081 CMD ["npm", "test:dev"] 

कृपया ध्यान दें कि package.json की प्रतिलिपि बनाई गई है और प्रोजेक्ट फ़ाइलों के बाकी हिस्सों से अलग से स्थापित है। यह प्रदर्शन के लिए किया जाता है, ताकि पुनः निर्माण करते समय / नोड_मॉडल फ़ोल्डर की सामग्री को कैश किया जाए। प्रत्येक कमांड लाइन अलग से कैश की जाती है।

अंत में, जब कंटेनर शुरू होता है, तो npm run dev कमांड निष्पादित होता है। इस आदेश को पैकेज में वर्णित किया गया है। संदेश:

 "scripts": { "test:dev": "http-server dist -p 8081 -c 1 --push-state" } 

/ डिस्ट फ़ोल्डर से फ़ाइलों को चलाने के लिए, http-server विश्व स्तर पर स्थापित किया गया है, और spa-http-server पैकेज देव-निर्भरता में स्थापित किया गया है ताकि Vue Router सही ढंग से काम करे। –Push-state फ्लैग को index.html पर रीडायरेक्ट करता है। 1 सेकंड के मान के साथ -c ध्वज जोड़ा जाता है ताकि http-server स्क्रिप्ट्स को कैश न करें। यह एक परीक्षण का मामला है, एक वास्तविक परियोजना पर यह नगीनक्स का उपयोग करना बेहतर है।

Vuex स्टोर में, apiHost: 'http://localhost:3000' फ़ील्ड, जहां NodeJS Api पोर्ट पंजीकृत है। ग्राहक भाग तैयार है। अब क्लाइंट से बैक तक के सभी अनुरोध इस यूआरएल पर जाते हैं।

NodeJS सर्वर API

/server फ़ोल्डर में, server.js और Dockerfile बनाएँ:

 FROM node:10 WORKDIR /server COPY ./package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"] 

Server.js डेटाबेस const url = 'mongodb://mongo:27017/'; लिए url निर्दिष्ट करता है const url = 'mongodb://mongo:27017/'; । हम क्लाइंट से क्रॉस-डोमेन अनुरोध की अनुमति देते हैं:

 const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); 

निष्कर्ष

अब प्रोजेक्ट डायरेक्टरी पर जाएं और कंटेनरों को शुरू docker-compose build इमेज docker-compose build और docker-compose up लिए docker-compose up । कमांड 3 कंटेनरों को बढ़ाएगा: सर्वर, क्लाइंट, मोंगो । NodeJS पर एक सर्वर के लिए, आप इसे उपयोगकर्ता फ़ोल्डर के साथ जोड़कर हॉट-रीलोड कॉन्फ़िगर कर सकते हैं। और क्लाइंट को हॉट रीलोड के साथ स्थानीय रूप से चलाने के लिए अलग से सर्वर और मानगो चलाने के लिए विकास के अधीन है। एक अलग सेवा शुरू करने के लिए, बस अपना नाम docker-compose up client निर्दिष्ट करें। संसाधनों को खाली करने के लिए कभी-कभी कंटेनर, नेटवर्क और छवियों को prune और हटाना याद रखें।

पूर्ण कोड यहां पाया जा सकता है । परियोजना अभी भी विकास के अधीन है।