Ako zabaliť aplikáciu VueJS + NodeJS + MongoDB do Dockeru

Ako je možné pochopiť z predchádzajúceho článku, pracovala som na rôznych projektoch. Prvé dni v novom tíme zvyčajne prebiehajú rovnako: backend developer sa pripojí ku mne a vykonáva magické úkony pri inštalácii a nasadení aplikácie. Docker je nevyhnutný pre frontendistov, pretože backend je často napísaný v širokom spektru technológií PHP/Java/Python/C# a frontend sa nemusí zakaždým obracať na backend, aby všetko nainštaloval a nasadil. Iba na jednom mieste som videla prepojenie Docker-Jenkins s transparentným nasadením, logami a pripojenými automatizovanými testami.

O Dockeri bolo napísaných mnoho podrobných článkov. V tomto článku sa bude hovoriť o nasadení Single Page Application s použitím VueJS/Vue Router, serverová časť vo forme RESTful API s NodeJS a ako databáza sa používa MongoDB. Na opis a spustenie niekoľkých aplikácií-kontajnerov sa používa Docker Compose.

Na čo je Docker potrebný

Docker umožňuje automatizovať proces nasadenia aplikácie. Developer už nemusí sám inštalovať programy a bojovať s nekompatibilitou verzií na svojom zariadení. Stačí si nainštalovať Docker a zadať 1-2 príkazy v termináli. Najlepšie sa to robí na Linuxe.

Začíname

Inštalujeme Docker a Docker compose

Štruktúra priečinkov

Vytvárame 2 priečinky pre klientskú a serverovú aplikáciu. Súbor s príponou .yml — to je konfigurácia Docker Compose, kde sa definujú a prepájajú kontajnery aplikácie.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #tu môžete prepísať CMD z Dockerfile v /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #tu môžete prepísať CMD z Dockerfile v /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Vytvárame 3 služby v Dockeri: pre NodeJS, MongoDB a pre statiku na Vue. Aby sme prepojili klienta so serverom, pridali sme depends on server. Na prepojenie MongoDB so serverovým API používame links mongo. Server, klient, mongo — názvy služieb.

Klient na VueJS

V priečinku /client sa nachádza aplikácia na VueJS. Aplikácia bola vytvorená s pomocou Vue Cli. Pri vytváraní obrazu sa klientská aplikácia zostavuje do súboru statických súborov v priečinku /dist. V Dockerfile sa opisuje súbor príkazov na vytvorenie obrazu:

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

Všimnite si, že súbor package.json sa kopíruje a inštaluje samostatne od ostatných súborov projektu. Robí sa to pre zvýšenie výkonu, aby sa obsah priečinka /node_modules nachádzal v cache pri opakovanom zostavení. Každý príkaz sa cache-uje samostatne.

Na konci, pri spúšťaní kontajnera sa vykonáva príkaz npm run dev. Tento príkaz je popísaný v súbore package.json:

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

Aby sa spustili súbory z priečinka /dist, globálne sa inštaluje http-server, a v dev-dependencies balík spa-http-server, aby Vue Router správne fungoval. Príznak —push-state spôsobí presmerovanie na index.html. Príznak -c so hodnotou 1 sekunda bol pridaný, aby http-server neukladal skripty do cache. Toto je testovací príklad, v reálnom projekte je lepšie použiť nginx.

Vo Vuex store vytvoríme pole apiHost: 'http://localhost:3000', kde je uvedený port NodeJS Api. Klientská časť je pripravená. Teraz všetky požiadavky z klienta na backend idú na túto adresu URL.

NodeJS server API

V priečinku /server vytvárame server.js a Dockerfile:

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

V server.js sa uvádza url pre databázu const url = 'mongodb://mongo:27017/';. Povolenie cross-origin požiadaviek z klienta:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // niektoré staršie prehliadače (IE11, rôzne SmartTV) majú problémy so 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));
  });

Záver

Teraz prejdeme do priečinka projektu a spustíme docker-compose build na zostavenie obrazov a docker-compose up na spustenie kontajnerov. Tento príkaz spustí 3 kontajnery: server, client, mongo. Pre server na NodeJS je možné nastaviť hot-reload prepojením s priečinkom user. A klient počas vývoja spúšťať miestne s hot reload, spustením oddelene server a mongo. Na spustenie samostatnej služby stačí zadať jej názov docker-compose up client. Nezabudnite občas vykonávať prune a odstraňovanie kontajnerov (containers), sietí (networks) a obrazov (images), aby sa uvoľnili prostriedky.

Úplný kód si môžete pozrieť tu. Projekt je stále vo fáze vývoja.

Zdroj: habr.com