Si të paketoni aplikacionin VueJS + NodeJS + MongoDB në Docker

Siç mund ta kuptoni nga artikulli i mëparshëm, kam punuar në projekte të ndryshme. Ditët e para në një ekip të ri zakonisht shkojnë në të njëjtën mënyrë: mbështetësi ulet me mua dhe kryen veprime magjike për të instaluar dhe vendosur aplikacionin. Docker është i domosdoshëm për zhvilluesit e përparme sepse... Backend-i shpesh shkruhet në një gamë të gjerë grupesh PHP/Java/Python/C#, dhe pjesa e përparme nuk duhet të shpërqendrojë çdo herë pjesën e pasme për të instaluar dhe vendosur gjithçka. Vetëm në një vend pashë një kombinim Docker-Jenkins me një vendosje transparente, regjistra dhe teste të automatizuara.

Për Docker janë shkruar shumë artikuj të detajuar. Ky artikull do të flasë për vendosjen e një aplikacioni me një faqe duke përdorur VueJS/Vue Router, pjesa e serverit është në formën e një API RESTful me NodeJS dhe MongoDB përdoret si bazë të dhënash. Docker Compose përdoret për të përcaktuar dhe ekzekutuar aplikacione të shumta të kontejnerëve.

Pse nevojitet Docker

Docker ju lejon të automatizoni procesin e vendosjes së një aplikacioni. Zhvilluesi nuk ka më nevojë të instalojë programe vetë ose të merret me papajtueshmërinë e versioneve në kompjuterin e tij. E tëra çfarë ju duhet të bëni është të instaloni Docker dhe të shkruani komandat 1-2 në tastierë. Mënyra më e përshtatshme për ta bërë këtë është në Linux.

Startimi

I vendosur prerës Docker kompozoj

Struktura e dosjeve

Ne krijojmë 2 dosje për aplikacionet e klientit dhe serverit. Një skedar me shtesën .yml është një konfigurim Shkruaj Docker, ku përcaktohen dhe shoqërohen kontejnerët e aplikimit.
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

Ne krijojmë 3 shërbime në Docker: për NodeJS, MongoDB dhe për ato statike në Vue. Shtuar për të lidhur klientin me serverin varet nga serveri. Për të lidhur MongoDB me API-në e serverit, përdorni lidhje mongo. Serveri, klienti, mongo - emrat e shërbimeve.

Klienti VueJS

Në dosje /klienti Aplikacioni bazohet në VueJS. Aplikacioni është krijuar duke përdorur Vue Cli. Kur ndërtoni një imazh, aplikacioni i klientit ndërtohet në një grup skedarësh statikë në dosje /dist. Dockerfile përshkruan një grup komandash për ndërtimin e një imazhi:

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"]

Ju lutemi vini re se package.json kopjohet dhe instalohet veçmas nga pjesa tjetër e skedarëve të projektit. Kjo bëhet për performancën, në mënyrë që përmbajtja e dosjes /node_modules të ruhet në memorie kur të ndërtohet përsëri. Çdo linjë komande ruhet veçmas.

Më në fund, kur fillon kontejneri, komanda ekzekutohet npm run dev. Kjo komandë përshkruhet në package.json:

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

Për të ekzekutuar skedarë nga një dosje /dist, i instaluar globalisht http-server, dhe në dev-varësi paketën spa-http-servernë mënyrë që Vue Router të funksionojë si duhet. Flamuri --push-state ridrejtohet te index.html. U shtua flamuri -c me vlerë 1 sekondë http-server nuk ka cache skriptet. Ky është një shembull provë; në një projekt real është më mirë të përdorni nginx.

Në dyqanin Vuex krijojmë një fushë apiHost: 'http://localhost:3000', ku është regjistruar porti NodeJS Api. Pjesa e klientit është gati. Tani të gjitha kërkesat nga klienti në pjesën e pasme shkojnë në këtë url.

API-ja e serverit NodeJS

Në dosje /server krijojnë server.js dhe Dockerfile:

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

В server.js treguar url për bazën e të dhënave const url = 'mongodb://mongo:27017/';. Lejimi i kërkesave për ndërdomain nga klienti:

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));
  });

Përfundim

Tani le të shkojmë te drejtoria e projektit dhe të ekzekutojmë docker-compose build për ndërtimin e imazheve dhe docker-compose up për të drejtuar kontejnerët. Ekipi do të ngrejë 3 kontejnerë: server, klient, mongo. Për një server NodeJS, mund të konfiguroni rifreskimin e nxehtë duke e lidhur atë me dosjen e përdoruesit. Dhe klienti në zhvillim duhet të lansohet në nivel lokal me rimbushje të nxehtë, duke funksionuar veçmas server и Mongo. Për të nisur një shërbim të veçantë, thjesht specifikoni emrin e tij docker-compose up client. Mos harroni ta bëni ndonjëherë prune dhe fshirja e kontejnerëve, rrjeteve dhe imazheve për të liruar burimet.

Ju mund të shihni kodin e plotë këtu. Projekti është ende në zhvillim e sipër.

Burimi: www.habr.com