Hvordan man pakker en VueJS + NodeJS + MongoDB applikation i Docker

Som du kan forstå fra den tidligere artikel, har jeg arbejdet med forskellige projekter. De første dage i et nyt team forløber normalt på samme måde: backend-udvikleren sætter sig til at hjælpe mig og udfører magiske handlinger med installation og deployment af applikationen. Docker er uundgåeligt for frontend-udviklere, da backend ofte er skrevet i et bredt spektrum af stakke som PHP/Java/Python/C#, og frontend behøver ikke at forstyrre backend hver gang for at installere og deploye. Jeg har kun set en integration af Docker-Jenkins med gennemsigtigt deployment, logs og tilknyttede automatiske tests ét sted.

Der er skrevet mange detaljerede artikler om Docker. I denne artikel vil vi tale om deployment af en Single Page Application ved hjælp af VueJS/Vue Router, med en serverdel i form af et RESTful API med NodeJS, og MongoDB som database. Til beskrivelse og opstart af flere applikationscontainere anvendes Docker Compose.

Hvad er Docker til?

Docker gør det muligt at automatisere processen med at deploye applikationen. Udvikleren behøver ikke længere selv at installere programmer og kæmpe med versionkompatibilitet på sin maskine. Det er tilstrækkeligt at installere Docker og indtaste 1-2 kommandoer i konsollen. Det er lettest at gøre dette på Linux.

Introduktion

Installerer Docker og Docker Compose

Ordrestruktur

Vi opretter 2 mapper til klient- og serverapplikationer. Filen med .yml-udvidelse er konfigurationsfilen Docker Compose, hvor applikationscontainere defineres og sammenkædes.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #her kan CMD fra Dockerfile i /server overskrives
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #her kan CMD fra Dockerfile i /client overskrives
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Vi opretter 3 tjenester i Docker: til NodeJS, MongoDB og til statiske filer i Vue. For at forbinde klienten med serveren er der tilføjet depends on server. For at linke MongoDB med serverens API anvendes links mongo. Server, klient, mongo - navne på tjenesterne.

Klienten i VueJS

I mappen /client er applikationen, der er bygget med VueJS. Applikationen er oprettet ved hjælp af Vue CLI. Ved opbygning af billedet bygges klientapplikationen til et sæt statiske filer i mappen /dist. I Dockerfile er der beskrevet en række kommandoer til opbygning af billedet:

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

Bemærk, at package.json kopieres og installeres separat fra de andre filer i projektet. Dette gøres for at forbedre ydeevnen, så indholdet i mappen /node_modules bliver cachet ved genopbygning. Hver kommando linje cachet separat.

Til slut, når containeren startes, udføres kommandoen npm run dev. Denne kommando er beskrevet i package.json:

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

For at køre filer fra mappen /dist, installeres globalt http-server, og i dev-dependencies pakken spa-http-server, så Vue Router fungerer korrekt. Flaget —push-state sørger for, at der omskrives til index.html. Flaget -c med værdien 1 sekund er tilføjet for http-server ikke at cache skripterne. Dette er et testeksempel, i et reelt projekt bør man hellere bruge nginx.

I Vuex store opretter vi feltet apiHost: 'http://localhost:3000', hvor porten til NodeJS Api angives. Klientsiden er klar. Nu sendes alle forespørgsler fra klienten til backend på denne URL.

NodeJS server API

I mappen /server opretter server.js og Dockerfile:

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

I server.js nævnes der url til databasen const url = 'mongodb://mongo:27017/';. Vi tillader cross-domain forespørgsler fra klienten:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // nogle ældre browsere (IE11, forskellige SmartTVs) kan have problemer med 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));
  });

Konklusion

Lad os nu gå ind i projektmappen og starte docker-compose build for at bygge billeder og docker-compose up for at starte containere. Kommandoen vil opsætte 3 containere: server, client, mongo. For serveren på NodeJS kan hot-reload konfigureres ved at forbinde den til user-mappen. Klienten kan køre lokalt i udviklingsstadiet med hot reload ved at starte den separat server og mongo. For at starte en separat service, er det nok at angive dens navn docker-compose up client. Glem ikke indimellem at udføre prune og fjerne containere (containers), netværk (networks) og billeder (images) for at frigøre ressourcer.

Den fulde kode kan ses her. Projektet er stadig under udvikling.

Kilde: habr.com