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

ယခင်ဆောင်းပါးမှသင်နားလည်နိုင်သကဲ့သို့, ငါကွဲပြားခြားနားသောပရောဂျက်များတွင်အလုပ်လုပ်ခဲ့သည်။ အဖွဲ့အသစ်တစ်ခု၏ ပထမဆုံးရက်များတွင် အများအားဖြင့် တူညီသည်- နောက်ခံလူသည် ကျွန်ုပ်နှင့်အတူထိုင်ပြီး အက်ပ်ကိုထည့်သွင်းရန်နှင့် အသုံးပြုရန် မှော်ဆန်သည့်လုပ်ဆောင်ချက်များကို လုပ်ဆောင်သည်။ Docker သည် front-end developer များအတွက် မရှိမဖြစ်လိုအပ်သောကြောင့်... နောက်ခံကို PHP/Java/Python/C# stacks အများအပြားဖြင့် ရေးသားလေ့ရှိပြီး အရာအားလုံးကို ထည့်သွင်းပြီး အသုံးပြုရန် အခါတိုင်း ရှေ့နောက်ကျောကို အာရုံပြောင်းရန် မလိုအပ်ပါ။ တစ်နေရာတည်းတွင်သာ 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 ရေးဖွဲ့ပါ။

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

ကျွန်ုပ်တို့သည် client နှင့် server applications များအတွက် folder 2 ခု ဖန်တီးပါသည်။ .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 ရှိ static များ အတွက် ဖြစ်သည်။ ကလိုင်းယင့်ကို ဆာဗာသို့ ချိတ်ဆက်ရန် ထည့်သွင်းခဲ့သည်။ 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 cache 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));
  });

ကောက်ချက်

အခု project directory ကိုသွားပြီးတော့ run ကြရအောင် docker-compose build ရုပ်ပုံများတည်ဆောက်ခြင်းနှင့် docker-compose up ကွန်တိန်နာများကိုလည်ပတ်ရန်။ အဖွဲ့သည် ကွန်တိန်နာ ၃ လုံးကို သယ်ဆောင်သွားမည်ဖြစ်သည်။ server၊ client၊ mongo. NodeJS ဆာဗာအတွက်၊ ၎င်းကို အသုံးပြုသူဖိုင်တွဲသို့ ချိတ်ဆက်ခြင်းဖြင့် hot-reload ကို သင် configure လုပ်နိုင်ပါသည်။ နှင့် ဖွံ့ဖြိုးတိုးတက်မှုအောက်ရှိ ကလိုင်းယင့်ကို သီးခြားစီလည်ပတ်ပြီး hot reload ဖြင့် စက်တွင်းတွင် စတင်သင့်သည်။ ဆာဗာက и Mongo. သီးခြားဝန်ဆောင်မှုတစ်ခုစတင်ရန် ၎င်း၏အမည်ကို သတ်မှတ်ပါ။ docker-compose up client. တခါတရံလုပ်ရန်မမေ့ပါနှင့် prune အရင်းအမြစ်များကို ဖယ်ရှားရန် ကွန်တိန်နာများ၊ ကွန်ရက်များနှင့် ပုံများကို ဖျက်ခြင်း။

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

source: www.habr.com