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

Si mund të kuptohet nga artikulli i mëparshëm, kam punuar me projekte të ndryshme. Ditët e para në një ekip të ri zakonisht kalojnë njësoj: back-end developer'i ulët me mua dhe bën veprime magjike për të instaluar dhe deploy-uar aplikacionin. Docker është i pazëvendësueshëm për front-end developerët, pasi back-end zakonisht shkruhet në një gamë të gjerë stekesh PHP/Java/Python/C# dhe fronti nuk duhet të shqetësojë çdo herë back-un për të instaluar dhe për t'u instaluar gjithçka. Vetëm në një vend kam parë një lidhje Docker-Jenkins me desplej të qartë, logje dhe teste automatike të prirura.

Për Docker është shkruar shumë artikuj të detajuar. Në këtë artikull do të flitet për desplejimin e një Single Page Application me përdorimin e VueJS/Vue Router, pjesa server në formën e një RESTful API me NodeJS dhe si databazë përdoret MongoDB. Për përshkrimin dhe ekzekutimin e disa aplikacioneve-container përdoret Docker Compose.

Përse nevojitet Docker

Docker lejon automatizimin e procesit të desplejimit të aplikacionit. Zhvilluesi nuk ka më nevojë të instalohet vetë programet, të luftojë me përputhshmërinë e versioneve në makinën e tij. Mjafton të instalohet Docker dhe të shkruhen 1-2 komanda në konzol. E rëndësishme është të bëhet kjo në Linux.

Nisja

Instalojmë Docker dhe 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 lidhen kontejnerë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-përcaktohet CMD nga Dockerfile në /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #këtu mund të ri-përcaktohet 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 depends on server. Për lidhjen e MongoDB me API server përdoret links 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 i klientit ndërtohet në një grup skedash statike në dosjen /dist. Në Dockerfile përshkruhen 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"]

Vini re në vëmendje se package.json kopjohet dhe instalohet veçmas nga skedarët e tjerë të projektit. Kjo bëhet për performancë, për të siguruar që përmbajtja e dosjes /node_modules të keq-cache-zohet gjatë rindërtimit të përsëritur. Çdo rresht-komandë keq-cache-zohet veçmas.

Në fund, gjatë ekzekutimit të kontejnerit, ekzekutohet komandën npm run dev. Kjo komandë është e përshkruar në package.json:

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

Për të ekzekutuar skedarët nga dosja /dist, instalohen globalisht http-server, dhe në dev-dependencies paketa spa-http-server, që siguron funksionimin e saktë të Vue Router. Flamuri —push-state bën ridrejtimin në index.html. Flamuri -c me vlerën 1 sekondë u shtua për të http-server mos keq-cache-zuar skriptet. Ky është një shembull testimi, në një projekt real është më mirë të përdorim nginx.

Në Vuex store krijojmë fushën apiHost: 'http://localhost:3000', ku shkruhet porta e NodeJS Api. Ana klientit është gati. Tani të gjitha kërkesat nga klienti në backend shkojnë në këtë url.

API i 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ër-domenesh nga klienti:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200,  // disa shfletues legadore (IE11, SmartTV të ndryshëm) ngadalësohen në 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 kalojmë në drejtorinë e projektit dhe ekzekutojmë docker-compose build për ndërtimin e imazheve dhe docker-compose up për запускon kontejnerët. Komanda do të ngrejë 3 kontejnerë: server, client, mongo. Për serverin në NodeJS mund të konfigurohet hot-reload, duke e lidhur me dosjen e përdoruesit. Dhe klienti në fazën e zhvillimit mund të ekzekutohet lokalisht me hot reload, duke e ekzekutuar veçmas server и mongo. Për të ekzekutuar një shërbim të veçantë, mjafton të tregojmë emrin e tij docker-compose up client. Mos harroni ndonjëherë të bëni prune dhe fshirjen e kontejnerëve (containers), rrjeteve (networks) dhe imazheve (images) për të liruar burimet.

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

Burimi: habr.com