Kuidas pakkida VueJS + NodeJS + MongoDB rakendus Dockerisse

Kuidas arusaada eelmisest artiklist, olen töötanud erinevate projektidega. Uues meeskonnas mööduvad esimesed päevad tavaliselt ühtemoodi: back-end arendaja liitub minuga ja teeb maagilisi toiminguid rakenduse installimiseks ja juurutamiseks. Docker on hädavajalik front-end arendajatele, kuna back-end on sageli kirjutatud laias PHP/Java/Python/C# tehnoloogiahelmes ja front-end ei pea iga kord back-end'i segama, et kõike installida ja käivitada. Ainult ühes kohas olen näinud Docker-Jenkins ühendust läbipaistva juurutamise, logide ja integreeritud automaattestidega.

Dockerist on kirjutatud palju üksikasjalikke artikleid. Selles artiklis räägitakse Single Page Application'i (SPA) juurutamisest, kasutades VueJS/Vue Router'it, ja serveri osana RESTful API-d NodeJS abil, samas kui andmebaasiks on MongoDB. Mitme konteineri rakenduse kirjeldamiseks ja käivitamiseks kasutatakse Docker Compose'i.

Miks on Docker vajalik

Docker võimaldab automatiseerida rakenduse juurutamise protsessi. Arendajal ei pea enam üksi programme installima ja versioonide ühilduvuse probleemidega võitlema. Piisab, kui installida Docker ja tippida 1-2 käsku konsoolisse. Parim on seda teha Linuxis.

Alustamine

Paigaldame Docker ja Docker compose

Kaustade struktuur

Loome 2 kausta kliendi ja serveri rakenduste jaoks. Faili laiendiga .yml — see on konfiguratsioon Docker Compose, kus määratakse ja seostatakse rakenduse konteinerid.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #siin saab CMD-i Dockerfile'ist üle kirjutada /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #siin saab CMD-i Dockerfile'ist üle kirjutada /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Loome Dockeri kolme teenuse: NodeJS, MongoDB ja Vue staatiliste failide jaoks. Kliendi ja serveri sidumiseks on lisatud depends on server. MongoDB linkimiseks serveri API-ga kasutatakse links mongo. Server, klient, mongo — teenuste nimed.

VueJS klient

Kaustas /client asub VueJS rakendus. Rakendus on loodud kasutades Vue Cli. Pildiga rakenduse loomisel ehitatakse kliendi rakendus staatiliste failide kogumina kausta /dist. Dockerfile'is on kirjeldatud hulk käske pildi loomiseks:

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

Pange tähele, et package.json kopeeritakse ja installitakse eraldi projekti teistest failidest. See on tehtud jõudluse tagamiseks, et node_modules kausta sisu vahemälustataks korduvate ehituste korral. Iga käsirida vahemälustatakse eraldi.

Konteineri käivitamisel käivitatakse käsk npm run dev. See käsk on kirjeldatud package.json-is:

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

Failide käivitamiseks kaustast /dist, installitakse globaalselt http-server, ja dev-dependencies-sse pakett spa-http-server, et Vue Router töötaks korrektselt. Lipp —push-state suunab indeksi.html peale. Lipp -c väärtusega 1 sekund on lisatud, et http-server scripts ei salvestaks vahemälu. See on testnäide, reaalses projektis on parem kasutada nginx.

Looge Vuex poodides väli apiHost: 'http://localhost:3000', kuhu on märgitud NodeJS Api port. Klient on valmis. Nüüd suunatakse kõik päringud kliendilt back'ile sellele url-ile.

NodeJS server API

Kaustas /server loome server.js ja Dockerfile:

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

Uues server.js töötatakse välja url andmebaasi jaoks const url = 'mongodb://mongo:27017/';. Lubame ristkaitse päringud kliendilt:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // mõned vanad brauserid (IE11, erinevad SmartTVd) hanguvad 204-le
};
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));
  });

Kokkuvõte

Nüüd liikuge projekti kausta ja käivitage docker-compose build piltide koostamiseks ja docker-compose up konteinerite käivitamiseks. Käsk tõstab üles 3 konteinerit: server, client, mongo. NodeJS serveri jaoks saab seadistada hot-reload, sidudes selle user kaustaga. Ja klienti arendusetapis käivitatakse kohapeal hot reloaded eraldi server ja mongo. Üksiku teenuse käivitamiseks piisab, kui märkida selle nimi docker-compose up client. Ärge unustage aeg-ajalt teha prune ja konteinerite (containers), võrkude (networks) ja piltide (images) kustutamine, et vabastada ressursse.

Kogu koodi saab vaadata siit. Projekt on endiselt arendusetapis.

Allikas: habr.com