डॉकरमध्ये VueJS + NodeJS + MongoDB ऍप्लिकेशन कसे पॅकेज करावे

मागील लेखावरून तुम्ही समजू शकता की, मी वेगवेगळ्या प्रकल्पांवर काम केले. नवीन संघातील पहिले दिवस सामान्यत: सारखेच जातात: बॅकेंडर माझ्याबरोबर बसतो आणि अनुप्रयोग स्थापित आणि तैनात करण्यासाठी जादुई क्रिया करतो. डॉकर फ्रंट-एंड डेव्हलपरसाठी अपरिहार्य आहे कारण... बॅकएंड बहुतेकदा PHP/Java/Python/C# स्टॅकच्या विस्तृत श्रेणीमध्ये लिहिलेला असतो आणि प्रत्येक वेळी सर्व काही स्थापित करण्यासाठी आणि तैनात करण्यासाठी फ्रंटला बॅकएंड विचलित करण्याची गरज नसते. फक्त एकाच ठिकाणी मला पारदर्शक उपयोजन, लॉग आणि स्वयंचलित चाचण्यांसह डॉकर-जेनकिन्स संयोजन दिसले.

डॉकरबद्दल बरेच तपशीलवार लेख लिहिले गेले आहेत. हा लेख VueJS/Vue राउटर वापरून सिंगल पेज अॅप्लिकेशन तैनात करण्याबद्दल बोलेल, सर्व्हरचा भाग NodeJS सह RESTful API च्या स्वरूपात आहे आणि MongoDB डेटाबेस म्हणून वापरला जातो. डॉकर कंपोजचा वापर एकाधिक कंटेनर अनुप्रयोग परिभाषित करण्यासाठी आणि चालविण्यासाठी केला जातो.

डॉकर का आवश्यक आहे

डॉकर तुम्हाला अनुप्रयोग उपयोजित करण्याची प्रक्रिया स्वयंचलित करण्याची परवानगी देतो. विकसकाला यापुढे स्वतः प्रोग्राम स्थापित करण्याची किंवा त्याच्या मशीनवर आवृत्ती विसंगततेचा सामना करण्याची आवश्यकता नाही. आपल्याला फक्त डॉकर स्थापित करणे आणि कन्सोलमध्ये 1-2 कमांड टाईप करणे आवश्यक आहे. हे करण्याचा सर्वात सोयीस्कर मार्ग लिनक्सवर आहे.

सुरू करणे

स्थापित करा गोदी कामगार आणि डॉकर रचना

फोल्डर रचना

आम्ही क्लायंट आणि सर्व्हर अनुप्रयोगांसाठी 2 फोल्डर तयार करतो. .yml विस्तार असलेली फाइल एक कॉन्फिगरेशन आहे डॉकर लिहिणे, जेथे अनुप्रयोग कंटेनर परिभाषित आणि संबंधित आहेत.
Docker-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 मधील स्थिर सेवांसाठी. क्लायंटला सर्व्हरशी जोडण्यासाठी जोडले सर्व्हरवर अवलंबून आहे. सर्व्हर API सह MongoDB लिंक करण्यासाठी, वापरा मोंगो लिंक्स. सर्व्हर, क्लायंट, मोंगो - सेवांची नावे.

VueJS क्लायंट

फोल्डरमध्ये /क्लायंट अर्ज VueJS वर आधारित आहे. वापरून अॅप्लिकेशन तयार केले होते व्ह्यू क्ली. प्रतिमा तयार करताना, क्लायंट ऍप्लिकेशन फोल्डरमधील स्थिर फाइल्सच्या संचामध्ये तयार केले जाते /जिल्हा. डॉकरफाइल प्रतिमा तयार करण्यासाठी कमांडच्या संचाचे वर्णन करते:

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 राउटर योग्यरित्या कार्य करते. --push-state ध्वज index.html वर पुनर्निर्देशित करतो. 1 सेकंदाच्या मूल्यासह -c ध्वज जोडला गेला http-सर्व्हर स्क्रिप्ट्स कॅशे केले नाहीत. हे एक चाचणी उदाहरण आहे; वास्तविक प्रकल्पावर nginx वापरणे चांगले आहे.

Vuex स्टोअरमध्ये आम्ही एक फील्ड तयार करतो apiHost: 'http://localhost:3000', जेथे NodeJS Api पोर्ट नोंदणीकृत आहे. क्लायंट भाग तयार आहे. आता क्लायंटकडून मागच्या सर्व विनंत्या या url वर जातात.

NodeJS सर्व्हर API

फोल्डरमध्ये /server तयार करा सर्व्हर.जे.एस. आणि डॉकरफाइल:

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

В सर्व्हर.जे.एस. असे सूचित 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 up कंटेनर चालवण्यासाठी. संघ 3 कंटेनर उचलेल: सर्व्हर, क्लायंट, मोंगो. NodeJS सर्व्हरसाठी, तुम्ही वापरकर्ता फोल्डरशी लिंक करून हॉट-रीलोड कॉन्फिगर करू शकता. आणि विकासाधीन क्लायंट स्वतंत्रपणे चालत, हॉट रीलोडसह स्थानिक पातळीवर लॉन्च केले जावे सर्व्हर и मोंगो. स्वतंत्र सेवा सुरू करण्यासाठी, फक्त त्याचे नाव निर्दिष्ट करा docker-compose up client. कधीतरी करायला विसरू नका prune आणि संसाधने मोकळी करण्यासाठी कंटेनर, नेटवर्क आणि प्रतिमा हटवणे.

तुम्ही पूर्ण कोड पाहू शकता येथे. प्रकल्प अद्याप विकासाधीन आहे.

स्त्रोत: www.habr.com