डकरमा VueJS + NodeJS + MongoDB अनुप्रयोग कसरी प्याकेज गर्ने

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

डकरको बारेमा धेरै विस्तृत लेखहरू लेखिएका छन्। यस लेखले VueJS/Vue राउटर प्रयोग गरेर एकल पृष्ठ अनुप्रयोग प्रयोग गर्ने बारे कुरा गर्नेछ, सर्भर भाग NodeJS सँग RESTful API को रूपमा छ, र MongoDB डाटाबेसको रूपमा प्रयोग गरिन्छ। डकर कम्पोज धेरै कन्टेनर अनुप्रयोगहरू परिभाषित र चलाउन प्रयोग गरिन्छ।

तपाईलाई डकर किन चाहिन्छ?

डकरले तपाईंलाई एप्लिकेसन डिप्लोय गर्ने प्रक्रियालाई स्वचालित गर्न अनुमति दिन्छ। विकासकर्ताले अब आफ्नै मेसिनमा प्रोग्रामहरू स्थापना गर्न वा संस्करण असंगततासँग सम्झौता गर्न आवश्यक छैन। तपाईंले गर्नुपर्ने भनेको डकर स्थापना गर्नुहोस् र कन्सोलमा १-२ आदेशहरू टाइप गर्नुहोस्। यो गर्न को लागी सबै भन्दा सुविधाजनक तरीका लिनक्स मा छ।

सुरु गर्दै

स्थापना गर्नुहोस् डकर र डकर रचना

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

हामी ग्राहक र सर्भर अनुप्रयोगहरूको लागि 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

हामी Docker मा 3 सेवाहरू सिर्जना गर्छौं: NodeJS, MongoDB र Vue मा स्थिरका लागि। सर्भरमा ग्राहक जडान गर्न थपियो सर्भर मा निर्भर गर्दछ। MongoDB लाई सर्भर API सँग लिङ्क गर्न, प्रयोग गर्नुहोस् लिङ्क mongo। सर्भर, ग्राहक, मङ्गो - सेवाहरूको नाम।

VueJS ग्राहक

फोल्डरमा / ग्राहक आवेदन VueJS मा आधारित छ। अनुप्रयोग प्रयोग गरेर सिर्जना गरिएको थियो Vue Cli। छवि निर्माण गर्दा, क्लाइन्ट अनुप्रयोग फोल्डरमा स्थिर फाइलहरूको सेटमा निर्मित हुन्छ /जिल्ला। डकरफाइलले छवि निर्माण गर्न आदेशहरूको सेट वर्णन गर्दछ:

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, र dev-निर्भरतामा प्याकेज spa-http-serverताकि Vue राउटर सही रूपमा काम गर्दछ। --push-state झण्डा index.html मा रिडिरेक्ट हुन्छ। १ सेकेन्डको मान भएको -c झण्डा थपियो http-सर्भर स्क्रिप्टहरू क्यास गरेन। यो एक परीक्षण उदाहरण हो; एक वास्तविक परियोजना मा यो nginx प्रयोग गर्न राम्रो छ।

Vuex स्टोरमा हामी एउटा क्षेत्र सिर्जना गर्छौं apiHost: 'http://localhost:3000', जहाँ NodeJS Api पोर्ट दर्ता गरिएको छ। ग्राहक भाग तयार छ। अब ग्राहकबाट पछाडि सबै अनुरोधहरू यो url मा जान्छन्।

NodeJS सर्भर API

फोल्डरमा /server सिर्जना गर्नुहोस् server.js र डकरफाइल:

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

В 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