په ډاکر کې د VueJS + NodeJS + MongoDB غوښتنلیک بسته کولو څرنګوالی

لکه څنګه چې تاسو د تیرې مقالې څخه پوهیږئ، ما په بیلابیلو پروژو کار کړی. په نوي ټیم کې لومړۍ ورځې معمولا په ورته ډول پرمخ ځي: بیکینڈر زما سره ناست دی او د غوښتنلیک نصبولو او ځای په ځای کولو لپاره جادویی کړنې ترسره کوي. ډاکر د مخکښې پای پراختیا کونکو لپاره لازمي دی ځکه چې ... پس منظر اکثرا د PHP/Java/Python/C# سټیکونو پراخه لړۍ کې لیکل کیږي ، او مخکینۍ اړتیا نلري هر وخت د هرڅه نصب او ځای په ځای کولو لپاره شاته انحراف وکړي. یوازې په یو ځای کې ما د ډاکر - جینکنز ترکیب د شفاف ګمارنې ، لاګونو ، او اتومات ازموینو سره ولید.

د ډاکر په اړه ډیری مفصلې مقالې لیکل شوي. دا مقاله به د VueJS/Vue روټر په کارولو سره د واحد پا pageې غوښتنلیک پلي کولو په اړه وغږیږي ، د سرور برخه د نوډ جے ایس سره د 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 پراساس دی. غوښتنلیک په کارولو سره رامینځته شوی 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-سرور سکریپټونه خوندي نه کړل. دا د ازموینې مثال دی؛ په ریښتیني پروژه کې دا غوره ده چې د نګینکس وکاروئ.

په Vuex پلورنځي کې موږ یو ساحه رامینځته کوو apiHost: 'http://localhost:3000'، چیرې چې د NodeJS Api بندر راجستر شوی. د پیرودونکي برخه چمتو ده. اوس د پیرودونکي څخه شاته ټولې غوښتنې دې یو آر ایل ته ځي.

NodeJS سرور API

په فولډر کې /server جوړول سرور.js او ډاکر فایل:

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

В سرور.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 کانټینرونه پورته کړي: سرور، پیرودونکي، مونګو. د نوډ جے ایس سرور لپاره ، تاسو کولی شئ د کارونکي فولډر سره لینک کولو سره د ګرم ریلوډ تنظیم کړئ. او د پراختیا لاندې پیرودونکي باید په ځایی توګه د ګرم ریلوډ سره پیل شي، په جلا توګه پرمخ ځي سرور и mongo. د جلا خدمت پیل کولو لپاره، یوازې د هغې نوم مشخص کړئ docker-compose up client. کله کله یې کول مه هېروئ prune او د سرچینو خلاصولو لپاره کانټینرونه ، شبکې او عکسونه حذف کول.

تاسو کولی شئ بشپړ کوډ وګورئ دلته. پروژه لاهم د پراختیا په حال کې ده.

سرچینه: www.habr.com