ڊاکر ۾ VueJS + NodeJS + MongoDB ايپليڪيشن کي ڪيئن پيڪيج ڪجي

جيئن توهان اڳئين مضمون مان سمجهي سگهو ٿا، مون مختلف منصوبن تي ڪم ڪيو. نئين ٽيم ۾ پهريون ڏينهن عام طور تي ساڳيو طريقو آهي: پس منظر مون سان گڏ ويٺو آهي ۽ ايپليڪيشن کي انسٽال ڪرڻ ۽ ترتيب ڏيڻ لاء جادو ڪارناما انجام ڏئي ٿو. ڊڪر فرنٽ-اينڊ ڊولپرز لاءِ ناگزير آهي ڇاڪاڻ ته ... پس منظر اڪثر PHP/Java/Python/C# اسٽيڪ جي وسيع رينج ۾ لکيو ويندو آهي، ۽ سامهون واري کي هر دفعي انسٽال ڪرڻ ۽ هر شي کي ترتيب ڏيڻ لاءِ پس منظر کي پريشان ڪرڻ جي ضرورت ناهي. صرف هڪ جاءِ تي مون ڏٺو هڪ Docker-Jenkins ميلاپ سان گڏ هڪ شفاف تعیناتي، لاگ، ۽ خودڪار ٽيسٽ.

ڊاڪر بابت ڪيترائي تفصيلي مضمون لکيا ويا آهن. هي آرٽيڪل VueJS/Vue Router استعمال ڪندي سنگل پيج جي ايپليڪيشن کي ترتيب ڏيڻ بابت ڳالهائيندو، سرور جو حصو هڪ RESTful API جي صورت ۾ NodeJS سان آهي، ۽ MongoDB هڪ ڊيٽابيس طور استعمال ڪيو ويندو آهي. Docker Compose استعمال ڪيو ويندو آھي وضاحت ۽ هلائڻ لاءِ گھڻن ڪنٽينر ايپليڪيشنن کي.

ڇو Docker جي ضرورت آهي

Docker توهان کي ايپليڪيشن کي ترتيب ڏيڻ جي عمل کي خودڪار ڪرڻ جي اجازت ڏئي ٿو. ڊولپر کي هاڻي ضرورت ناهي ته هو پنهنجي پاڻ تي پروگرامن کي انسٽال ڪرڻ يا پنهنجي مشين تي ورزن جي مطابقت سان ڊيل ڪرڻ جي. توهان سڀني کي ڪرڻو آهي انسٽال ڪريو Docker ۽ ٽائپ ڪريو 1-2 حڪم ڪنسول ۾. اهو ڪرڻ جو سڀ کان آسان طريقو لينڪس تي آهي.

شروعات ڪيو

انسٽال ڪريو Docker ۽ ڊڪر ٺاھڻ

فولڊر جي جوڙجڪ

اسان ڪلائنٽ ۽ سرور ايپليڪيشنن لاءِ 2 فولڊر ٺاهيندا آهيون. .yml ايڪسٽينشن سان هڪ فائل هڪ ترتيب آهي Docker Compose, جتي ايپليڪيشن ڪنٽينرز بيان ڪيا ويا آهن ۽ لاڳاپيل آهن.
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 سان ڳنڍڻ لاءِ، استعمال ڪريو لنڪس مونگو. سرور، ڪلائنٽ، منگو - خدمتن جا نالا.

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 ڪاپي ٿيل آهي ۽ انسٽال ٿيل آهي الڳ الڳ پروجيڪٽ فائلن کان. اهو ڪارڪردگي لاء ڪيو ويو آهي، انهي ڪري ته /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 پرچم 1 سيڪنڊ جي قيمت سان شامل ڪيو ويو http-سرور اسڪرپٽ کي ڪيش نه ڪيو. هي هڪ آزمائشي مثال آهي؛ هڪ حقيقي منصوبي تي اهو بهتر آهي nginx استعمال ڪرڻ.

Vuex اسٽور ۾ اسان هڪ فيلڊ ٺاهيندا آهيون apiHost: 'http://localhost:3000'، جتي NodeJS Api پورٽ رجسٽر ٿيل آهي. ڪسٽمر حصو تيار آهي. ھاڻي ڪلائنٽ کان پٺتي تائين سڀ درخواستون ھن url ڏانھن وڃو.

NodeJS سرور API

فولڊر ۾ /server ٺاهڻ سرور.جس ۽ Dockerfile:

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 سرور لاءِ، توھان ترتيب ڪري سگھوٿا گرم-ريلوڊ ان کي يوزر فولڊر سان ڳنڍڻ سان. ۽ ترقي هيٺ ڪلائنٽ کي مقامي طور تي گرم ٻيهر لوڊ ڪرڻ سان شروع ڪيو وڃي، الڳ الڳ هلائڻ سرور и mongo. هڪ الڳ خدمت شروع ڪرڻ لاء، صرف ان جو نالو بيان ڪريو docker-compose up client. ڪڏهن ڪڏهن ائين ڪرڻ نه وساريو prune ۽ وسيلن کي آزاد ڪرڻ لاءِ ڪنٽينر، نيٽ ورڪ ۽ تصويرون حذف ڪرڻ.

توهان مڪمل ڪوڊ ڏسي سگهو ٿا هتي. پروجيڪٽ اڃا تائين ترقي هيٺ آهي.

جو ذريعو: www.habr.com