जैसा कि आप पिछले लेख से समझ सकते हैं, मैंने विभिन्न परियोजनाओं पर काम किया। एक नई टीम में पहले दिन आमतौर पर उसी तरह से गुजरते हैं: बैकेंडर मेरे साथ बैठता है और एप्लिकेशन को इंस्टॉल और तैनात करने के लिए जादुई क्रियाएं करता है। डॉकर फ्रंट-एंड डेवलपर्स के लिए अपरिहार्य है क्योंकि... बैकएंड को अक्सर PHP/Java/Python/C# स्टैक की एक विस्तृत श्रृंखला में लिखा जाता है, और फ्रंट को हर चीज को इंस्टॉल और तैनात करने के लिए हर बार बैकएंड को विचलित करने की आवश्यकता नहीं होती है। केवल एक ही स्थान पर मैंने पारदर्शी तैनाती, लॉग और स्वचालित परीक्षणों के साथ डॉकर-जेनकिंस संयोजन देखा।
डॉकर के बारे में कई विस्तृत लेख लिखे गए हैं। यह आलेख VueJS/Vue राउटर का उपयोग करके सिंगल पेज एप्लिकेशन को तैनात करने के बारे में बात करेगा, सर्वर भाग NodeJS के साथ एक RESTful API के रूप में है, और MongoDB को डेटाबेस के रूप में उपयोग किया जाता है। डॉकर कंपोज़ का उपयोग कई कंटेनर अनुप्रयोगों को परिभाषित करने और चलाने के लिए किया जाता है।
आपको डॉकर की आवश्यकता क्यों है?
डॉकर आपको किसी एप्लिकेशन को तैनात करने की प्रक्रिया को स्वचालित करने की अनुमति देता है। डेवलपर को अब स्वयं प्रोग्राम इंस्टॉल करने या अपनी मशीन पर संस्करण असंगति से निपटने की आवश्यकता नहीं है। आपको बस डॉकर इंस्टॉल करना है और कंसोल में 1-2 कमांड टाइप करना है। ऐसा करने का सबसे सुविधाजनक तरीका लिनक्स पर है।
आइए शुरू करते हैं
स्थित और
फ़ोल्डर संरचना
हम क्लाइंट और सर्वर एप्लिकेशन के लिए 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
हम डॉकर में 3 सेवाएँ बनाते हैं: NodeJS, MongoDB के लिए और Vue में स्थिर सेवाओं के लिए। क्लाइंट को सर्वर से कनेक्ट करने के लिए जोड़ा गया सर्वर पर निर्भर करता है. MongoDB को सर्वर API से लिंक करने के लिए, उपयोग करें लिंक मोंगो. सर्वर, क्लाइंट, मोंगो - सेवाओं के नाम।
VueJS क्लाइंट
फ़ोल्डर में /ग्राहक एप्लिकेशन VueJS पर आधारित है। का उपयोग करके एप्लिकेशन बनाया गया था . एक छवि बनाते समय, क्लाइंट एप्लिकेशन को फ़ोल्डर में स्थिर फ़ाइलों के एक सेट में बनाया जाता है /जिला. 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 को बाकी प्रोजेक्ट फ़ाइलों से अलग कॉपी और इंस्टॉल किया गया है। यह प्रदर्शन के लिए किया जाता है, ताकि दोबारा निर्माण करते समय /node_modules फ़ोल्डर की सामग्री कैश हो जाए। प्रत्येक कमांड लाइन को अलग से कैश किया जाता है।
अंत में, जब कंटेनर शुरू होता है, तो कमांड निष्पादित होता है npm run dev. यह कमांड package.json में वर्णित है:
"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 सर्वर स्क्रिप्ट को कैश नहीं किया. यह एक परीक्षण उदाहरण है; वास्तविक प्रोजेक्ट पर nginx का उपयोग करना बेहतर है।
Vuex स्टोर में हम एक फ़ील्ड बनाते हैं apiHost: 'http://localhost:3000', जहां NodeJS एपीआई पोर्ट पंजीकृत है। ग्राहक भाग तैयार है. अब क्लाइंट से लेकर बैक तक के सभी अनुरोध इस यूआरएल पर जाते हैं।
नोडजेएस सर्वर एपीआई
फ़ोल्डर में /server बनाएं सर्वर.जेएस और डॉकरफ़ाइल:
FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
В सर्वर.जेएस इंगित किया गया है यूआरएल डेटाबेस के लिए 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 up कंटेनर चलाने के लिए. टीम 3 कंटेनर उठाएगी: सर्वर, क्लाइंट, मोंगो. NodeJS सर्वर के लिए, आप हॉट-रीलोड को उपयोगकर्ता फ़ोल्डर से लिंक करके कॉन्फ़िगर कर सकते हैं। और विकास के तहत क्लाइंट को स्थानीय रूप से हॉट रीलोड के साथ अलग से लॉन्च किया जाना चाहिए सर्वर и मोंगो. एक अलग सेवा शुरू करने के लिए, बस उसका नाम निर्दिष्ट करें docker-compose up client. कभी-कभी ऐसा करना न भूलें prune और संसाधनों को मुक्त करने के लिए कंटेनर, नेटवर्क और छवियों को हटाना।
आप पूरा कोड देख सकते हैं . परियोजना अभी भी विकासाधीन है।
स्रोत: www.habr.com