Si të paketoni një aplikacion VueJS + NodeJS + MongoDB në Docker

Siç mund të kuptohet nga artikulli i mëparshëm, unë kam punuar me projekte të ndryshme. Ditët e para në një ekip të ri zakonisht kalojnë njëlloj: backend-i më bashkohet dhe kryen veprime magjike për instalimin dhe shpërndarjen e aplikacionit. Docker është i paçmuar për frontend-erët, sepse backend-i shpesh është shkruar në një gamë të gjerë teknologjish PHP/Java/Python/C# dhe frontend-i nuk duhet të shqetësojë herë pas here backend-in për të instaluar dhe ecur. Vetëm në një vend kam parë kombinimin Docker-Jenkins me shpërndarje transparente, logje dhe teste automatike të lidhura.

Për Docker janë shkruar shumë artikuj të detajuar. Në këtë artikull do të flitet për shpërndarjen e një Aplikacioni të Vetëm me përdorimin e VueJS/Vue Router, pjesa server është një API RESTful me NodeJS, dhe si bazë të dhënash përdoret MongoDB. Për përshkrimin dhe ekzekutimin e disa aplikacioneve-kontejner përdoret Docker Compose.

Përse na nevojitet Docker

Docker lejon automatizimin e procesit të shpërndarjes së aplikacionit. Zhvilluesi nuk ka nevojë më të instalojë vetë programet, ose të luftojë me papajtueshmërinë e versioneve në makinën e tij. Mjafton të instalohet Docker dhe të futen 1-2 komanda në terminal. Më e lehtë është ta bësh këtë në Linux.

Të fillosh

Instalojmë Docker and Docker compose

Struktura e dosjeve

Krijojmë 2 dosje për aplikacionet klient dhe server. Skedari me zgjedhjen .yml është konfigurimi Docker Compose, ku përcaktohen dhe lidhin konteinerët e aplikacionit.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #këtu mund të ri-zëvendësohet CMD nga Dockerfile në /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #këtu mund të ri-zëvendësohet CMD nga Dockerfile në /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Krijojmë 3 shërbime në Docker: për NodeJS, MongoDB dhe për statikën në Vue. Për të lidhur klientin me serverin është shtuar varësia nga serveri. Për lidhjen e MongoDB me API-në e serverit përdoret lidhjet mongo. Server, klient, mongo — janë emrat e shërbimeve.

Klienti në VueJS

Në dosjen /client ndodhet aplikacioni në VueJS. Aplikacioni është krijuar me ndihmën e Vue Cli. Gjatë ndërtimit të imazhit, aplikacioni klient krijohet në një grup skedarësh statikë në dosjen /dist. Në Dockerfile përshkruhet një grup komandash për ndërtimin e imazhit:

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

Kujdes, që package.json kopjohet dhe instalohet veçmas nga skedarët e tjerë të projektit. Kjo është bërë për performancë, në mënyrë që përmbajtja e dosjes /node_modules të maksimalizohet gjatë rindërtimit. Çdo rresht-komandë ruhet veçmas.

Në fund, gjatë nisjes së kontenerit ekzekutohet komanda 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ë filluar skedarët nga dosja /dist, instalohet globalisht http-server, dhe në dev-dependencies paketa spa-http-server, për të funksionuar saktë Vue Router. Flagu —push-state bën ridirektimin në index.html. Flagu -c me vlerën 1 sekondë është shtuar, për të http-server mos ruajtur skriptet. Ky është një shembull testues, në një projekt real është më mirë të përdorim nginx.

Në dyqanin Vuex krijojmë fushën apiHost: 'http://localhost:3000', ku shkruhet porta e API-së NodeJS. Pjesa klient është gati. Tani të gjitha kërkesat nga klienti në backend shkojnë në këtë url.

API e serverit NodeJS

Në dosjen /server krijojmë server.js dhe Dockerfile:

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

Në server.js shkruhet url për bazën e të dhënave const url = 'mongodb://mongo:27017/';. Lejojmë kërkesat ndërdomain nga klienti:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // disa disa shfrytezojnë shfletuesit e vjetër (IE11, disa SmartTV) dështojnë me 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ërfundimi

Tani do të kalojmë në drejtorinë e projektit dhe do ta aktivizojmë docker-compose build për ndërtimin e imazheve dhe docker-compose up për të aktivizuar konteinerët. Komanda do të krijojë 3 konteinerë: server, client, mongo. Për serverin në NodeJS është e mundur të konfigurosh hot-reload, duke e lidhur atë me dosjen e përdoruesit. Ndërsa klienti në fazën e zhvillimit do të aktivizohet lokalisht me hot reload, duke e startuar veçmas server dhe mongo. Për të aktivizuar një shërbim të veçantë, mjafton të specifikoni emrin e tij docker-compose up client. Mos harroni nganjëherë të bëni prune dhe eliminimin e konteinerëve (containers), rrjeteve (networks) dhe imazheve (images), për të liruar burime.

Kodi i plotë mund të shihet këtu. Projekti është ende në fazën e zhvillimit.

Burimi: habr.com