Kuidas pakkida VueJS + NodeJS + MongoDB rakendust Dockerisse

Nagu eelmisest artiklist aru saada, olen töötanud erinevate projektidega. Uue meeskonna esimesed päevad mööduvad tavaliselt sarnaselt: backend arendaja istub mulle kõrvale ja teeb maagilisi toiminguid rakenduse installimiseks ja juurutamiseks. Docker on frontend arendajatele hädavajalik, kuna backend on sageli kirjutatud erinevates PHP/Java/Python/C# tehnoloogiates ja frontend ei pea iga kord backendi segama, et kõik paigaldada ja käivitada. Ainult ühes kohas olen näinud Docker-Jenkins kombinatsiooni läbipaistva juurutamisega, logide ja automaatsete testidega.

Dockerist on kirjutatud palju üksikasjalikke artikleid. Käesolevas artiklis käsitletakse Single Page Application'i juurutamist, kasutades VueJS/Vue Routerit, backend osana RESTful API-t NodeJS-is ning andmebaasina MongoDB-d. Mitme konteinerit sisaldava rakenduse kirjeldamiseks ja käivitamiseks kasutatakse Docker Compose'i.

Miks on Docker vajalik

Docker võimaldab automatiseerida rakenduse käitamise protsessi. Arendaja ei pea enam ise programme installima ega muretsema versioonide ühilduvuse pärast oma masinas. Piisab Dockerist ja paar käsu sisestamisest terminalis. Selleks on kõige mugavam kasutada Linuxit.

Alustamine

Paigaldame Docker ja Docker compose

Kaustade struktuur

Loome 2 kaustat klientrakenduse ja serverirakenduse jaoks. Faili laiendiga .yml — see on konfigureerimisfail Docker Compose, kus määratakse ja seotakse 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 kirjutada üle CMD Dockerfile's kaustas /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #siin saab kirjutada üle CMD Dockerfile's kaustas /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Loome 3 teenust Dockeris: NodeJS, MongoDB ja staatika jaoks Vue'il. Klient serveriga sidumiseks on lisatud depends on server. MongoDB sidumiseks serveri API-ga kasutatakse links mongo. Server, client, mongo — teenuste nimed.

Klient VueJS-il

Kaustas /client rakendus on loodud VueJS-il. Rakendus on loodud kasutades Vue Cli. Klientrakendus ehitatakse kujutiseks staatiliste failide komplekti kaustas. /dist. Dockerfile'is on kirjas komandide komplekt kujutise 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 ülejäänud projekti failidest. See on tehtud tootlikkuse nimel, et /node_modules kausta sisu vahemällu salvestada korduvatelt ehitustelt. Iga käsk on vahemällu salvestatud eraldi.

Lõpus, konteineri käivitamisel, täidetakse käsk npm run dev. See käsk on kirjas package.json-is:

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

Failide käivitamiseks kaustast /dist, installitakse globaalne http-server, ja dev-dependencies pakett spa-http-server, et Vue Router töötaks korralikult. Lipp —push-state suunab index.html-ile. Lipp -c väärtusega 1 sekund on lisatud, et http-server skripte ei vahemällu salvestataks. See on katsetamiseks mõeldud näide, päris projektis on parem kasutada nginx'i.

Vuex stores loome välja apiHost: 'http://localhost:3000', kus on määratud NodeJS API port. Kliendi osa on valmis. Nüüd suunatakse kõik päringud kliendilt tagasi 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"]

V server.js näidatakse url andmebaasi jaoks const url = 'mongodb://mongo:27017/';. Lubame klientidest pärit ristküsimused:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // mõned vanemad brauserid (IE11, erinevad SmartTV-d) ei talu 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));
  });

Kokkuvõte

Nüüd liikuge projekti katalooge ja käivitage docker-compose build piltide ehitamiseks ja docker-compose up konteinerite käitamiseks. Käsk loob 3 konteinerit: server, client, mongo. NodeJS serveri jaoks saab hot-reloadi seadistada, sidudes selle user kaustaga. Ja klient on arendusetapis, käivitatakse kohapeal hot reloaderiga, eraldi käivitades server ja mongo. Eraldi teenuse käivitamiseks piisab selle nime sisestamisest docker-compose up client. Ärge unustage aeg-ajalt teha prune ja konteinerite (konteinerite), võrkude (võrkude) ja piltide (piltide) eemaldamist, et vabastada ressursse.

Täielikku koodi saab vaadata siin. Projekt on veel arendamisjärgus.

Allikas: habr.com