Docker တွင် VueJS + NodeJS + MongoDB အပလီကေးရှင်းကို မည်သို့ထုပ်ပိုးမည်နည်း။

ယခင်ဆောင်းပါးမှသင်တွေ့မြင်နိုင်သည်အတိုင်း, ငါကွဲပြားခြားနားသောပရောဂျက်များနှင့်အလုပ်လုပ်ခဲ့သည်။ အဖွဲ့အသစ်တစ်ခု၏ ပထမဆုံးရက်များတွင် အများအားဖြင့် တူညီသည်- back-end developer သည် ကျွန်ုပ်နှင့်အတူထိုင်ပြီး အက်ပ်ကိုထည့်သွင်းရန်နှင့် အသုံးပြုရန် မှော်ဆန်သည့်လုပ်ဆောင်ချက်များကို လုပ်ဆောင်သည်။ Back-end ကို PHP/Java/Python/C# stacks အများအပြားတွင် မကြာခဏ ရေးသားထားသောကြောင့် Front-end developer များအတွက် မရှိမဖြစ် လိုအပ်ပြီး အရာခပ်သိမ်းကို ထည့်သွင်းရန်နှင့် အသုံးပြုရန် အခါတိုင်း ရှေ့ဆုံးမှ back-end developer ကို အာရုံပြောင်းရန် မလိုအပ်ပါ။ ပွင့်လင်းမြင်သာစွာအသုံးပြုမှု၊ မှတ်တမ်းများနှင့် ပူးတွဲပါရှိသော အလိုအလျောက်စမ်းသပ်မှုများပါရှိသော Docker-Jenkins အစုအဝေးကို တစ်နေရာတည်းတွင်သာ ကျွန်ုပ်တွေ့ခဲ့ရသည်။

Docker နှင့်ပတ်သက်သော အသေးစိတ်ဆောင်းပါးများစွာ ရှိပါသည်။ ဤဆောင်းပါးတွင် VueJS/Vue Router ကိုအသုံးပြု၍ Single Page Application ၏ဖြန့်ကျက်မှုကို ဆွေးနွေးမည်ဖြစ်ပြီး၊ ဆာဗာအပိုင်းသည် NodeJS ဖြင့် RESTful API ဖြစ်ပြီး MongoDB ကို ဒေတာဘေ့စ်အဖြစ်အသုံးပြုသည်။ Docker Compose ကို ကွန်တိန်နာ အပလီကေးရှင်းများစွာကို ဖော်ပြရန်နှင့် စတင်ရန်အတွက် အသုံးပြုသည်။

Docker ကို ဘာကြောင့် လိုအပ်တာလဲ။

Docker သည် သင့်အား အပလီကေးရှင်းတစ်ခုဖြန့်ကျက်ခြင်းလုပ်ငန်းစဉ်ကို အလိုအလျောက်လုပ်ဆောင်နိုင်စေပါသည်။ ဆော့ဖ်ဝဲရေးသားသူသည် သူ့ဘာသာသူ ပရိုဂရမ်များကို ထည့်သွင်းရန် မလိုအပ်တော့ဘဲ၊ သူ့စက်ပေါ်ရှိ ဗားရှင်းများ၏ လိုက်ဖက်မှုမရှိခြင်းကို တိုက်ထုတ်ပါ။ Docker ကိုထည့်သွင်းပြီး console တွင် 1-2 commands များရိုက်ထည့်ရန်လုံလောက်ပါသည်။ ၎င်းကို Linux တွင်ပြုလုပ်ရန်အဆင်ပြေဆုံးဖြစ်သည်။

စတင်ခဲ့သည်

ထည့်သွင်းပါ Docker နှင့် Docker ရေးဖွဲ့ပါ။

ဖိုဒါဖွဲ့စည်းပုံ

ကလိုင်းယင့်နှင့် ဆာဗာအပလီကေးရှင်းများအတွက် ဖိုင်တွဲ ၂ ခု ဖန်တီးပါ။ .yml extension ပါသော ဖိုင်သည် config ဖြစ်သည်။ 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 ပေါ်ရှိ statics အတွက်။ ကလိုင်းယင့်ကို ဆာဗာနှင့် ချိတ်ဆက်ရန်၊ ထည့်သွင်းခဲ့သည်။ server ပေါ်တွင်မူတည်သည်။. MongoDB ကို ဆာဗာ API နှင့် ချိတ်ဆက်ရန်၊ အသုံးပြုပါ။ mongo လင့်ခ်များ. ဆာဗာ၊ client၊ mongo — ဝန်ဆောင်မှုများ၏အမည်များ။

VueJS တွင် ဖောက်သည်

ဖိုင်တွဲထဲမှာ /ဖောက်သည် လျှောက်လွှာသည် VueJS တွင်တည်ရှိသည်။ အပလီကေးရှင်းကို အသုံးပြု၍ ဖန်တီးထားသည်။ Vue Cli. ရုပ်ပုံတစ်ခုတည်ဆောက်သောအခါ၊ client အပလီကေးရှင်းကို ဖိုဒါရှိ static ဖိုင်များအစုအဝေးတွင်တည်ဆောက်ထားသည်။ /dist. Dockerfile သည် ပုံတစ်ခုတည်ဆောက်ရန်အတွက် command အစုံကို ဖော်ပြသည်-

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 ဖိုဒါ၏အကြောင်းအရာများကို ကက်ရှ်လုပ်ရန်အတွက် စွမ်းဆောင်ရည်အတွက် လုပ်ဆောင်ပါသည်။ command line တစ်ခုစီကို သီးခြားစီ သိမ်းဆည်းထားသည်။

နောက်ဆုံးတွင်၊ container စတင်သောအခါ၊ command ကိုလုပ်ဆောင်သည်။ npm run dev. ဤအမိန့်ကို package.json တွင် ဖော်ပြထားပါသည်။

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

ဖိုဒါတစ်ခုမှ ဖိုင်များကို ဖွင့်ရန် /distတစ်ကမ္ဘာလုံးတွင် တပ်ဆင်ထားသည်။ http-serverနှင့် dev-dependencies တွင် package ကို spa-http-serverထို့ကြောင့် Vue Router မှန်ကန်စွာအလုပ်လုပ်နိုင်စေရန်။ --push-state အလံသည် index.html သို့ ပြန်ညွှန်းသည်။ ထို့ကြောင့် 1 စက္ကန့်တန်ဖိုးရှိသော -c အလံကို ပေါင်းထည့်သည်။ http-server ကက်ရှ် scripts တွေ မပါဘူး။ ဤသည်မှာ စမ်းသပ်မှုဥပမာတစ်ခုဖြစ်ပြီး တကယ့်ပရောဂျက်တစ်ခုတွင် nginx ကိုအသုံးပြုခြင်းက ပိုကောင်းသည်။

Vuex စတိုးတွင် ကျွန်ုပ်တို့သည် အကွက်တစ်ခုကို ဖန်တီးသည်။ apiHost: 'http://localhost:3000'NodeJS Api ဆိပ်ကမ်းကို မှတ်ပုံတင်ထားရာ၊ ဖောက်သည်အပိုင်း အဆင်သင့်ဖြစ်ပါပြီ။ ယခု Client မှ နောက်ကျောသို့ တောင်းဆိုချက်များအားလုံးသည် ဤ url သို့သွားပါ။

NodeJS ဆာဗာ API

ဖိုင်တွဲထဲမှာ /server ငါတို့ဖန်တီးတယ်။ server.js နှင့် Dockerfile-

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 ကွန်တိန်နာများကိုဖွင့်ရန်။ command သည် container 3 ခုကိုစတင်လိမ့်မည်- server၊ client၊ mongo. NodeJS ဆာဗာအတွက်၊ ၎င်းကို အသုံးပြုသူဖိုင်တွဲသို့ ချိတ်ဆက်ခြင်းဖြင့် hot-reload ကို သင် configure လုပ်နိုင်ပါသည်။ နှင့် ဖွံ့ဖြိုးတိုးတက်မှုအဆင့်ရှိ ကလိုင်းယင့်ကို သီးခြားစတင်ဖွင့်ပြီး hot reload ဖြင့် ပြည်တွင်းတွင် စတင်နိုင်သည်။ ဆာဗာက и Mongoသီးခြားဝန်ဆောင်မှုတစ်ခု စတင်ရန် ၎င်း၏အမည်ကို သတ်မှတ်ပါ။ docker-compose up client. တခါတရံလုပ်ရန်မမေ့ပါနှင့် prune အရင်းအမြစ်များကို ဖယ်ရှားရန် ကွန်တိန်နာများ၊ ကွန်ရက်များနှင့် ပုံများကို ဖယ်ရှားပါ။

ကုဒ်အပြည့်အစုံကို ကြည့်ရှုနိုင်ပါသည်။ ဒီမှာပရောဂျက်သည် ဖွံ့ဖြိုးတိုးတက်ရေး အဆင့်တွင်သာ ရှိသေးသည်။

source: www.habr.com