Jak zabalit aplikaci VueJS + NodeJS + MongoDB do Dockeru

Jak jste si mohli povšimnout z předchozího článku, pracovala jsem na různých projektech. Prvních pár dní v novém týmu obvykle probíhá stejně: backendový vývojář se připojí ke mně a provádí kouzelně akce při instalaci a nasazení aplikace. Docker je nepostradatelný pro front-end vývojáře, protože backend je často napsán v široké škále technologií PHP/Java/Python/C# a front-end se nemusí neustále rozptylovat žádostí o instalaci a rozjezd. Jen na jednom místě jsem viděla propojení Docker-Jenkins s transparentním nasazením, logy a přiloženými automatizovanými testy.

O Dockeru bylo napsáno mnoho podrobných článků. V tomto článku se bude mluvit o nasazení Single Page Application pomocí VueJS/Vue Router, serverová část ve formě RESTful API s NodeJS a jako databáze se používá MongoDB. Pro popis a spuštění několika kontejnerových aplikací se používá Docker Compose.

K čemu je Docker

Docker umožňuje automatizovat proces nasazení aplikace. Vývojář už nemusí sám instalovat programy a bojovat s nekompatibilitou verzí na svém počítači. Stačí nainstalovat Docker a napsat 1-2 příkazy do terminálu. Nejlépe se to dělá na Linuxu.

Začínáme

Instalujeme Docker and Docker compose

Struktura složek

Vytváříme 2 složky pro klientské a serverové aplikace. Soubor s příponou .yml je konfigurace, Docker Compose, kde se definují a propojují kontejnery aplikace.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #tady lze přepsat CMD z Dockerfile ve /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #tady lze přepsat CMD z Dockerfile ve /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Vytváříme 3 služby v Dockeru: pro NodeJS, MongoDB a statiku ve Vue. Abychom propojili klienta se serverem, přidáno depends on server. Pro propojování MongoDB se serverovým API se používá links mongo. Server, klient, mongo — názvy služeb.

Klient na VueJS

Ve složce /client je umístěna aplikace na VueJS. Aplikace byla vytvořena pomocí Vue Cli. Při vytváření obrazu se klientská aplikace sestavuje do sady statických souborů ve složce /dist. V Dockerfile je popsána sada příkazů pro vytvoření 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šimněte si, že soubor package.json se kopíruje a instaluje odděleně od ostatních souborů projektu. Je to provedeno pro zvýšení výkonu, aby se obsah složky /node_modules ukládal do mezipaměti při opětovném sestavení. Každý příkaz se ukládá do mezipaměti zvlášť.

Na konci, při spuštění kontejneru se provede příkaz npm run dev. Tento příkaz je popsán v package.json:

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

Aby bylo možné spustit soubory z složky /dist, globálně se instaluje http-server, a v dev-dependencies je balíček spa-http-server, aby Vue Router fungoval správně. Přepínač --push-state provádí přesměrování na index.html. Přepínač -c se hodnotou 1 sekunda byl přidán, aby http-server neukládal skripty do mezipaměti. Toto je testovací příklad, v reálném projektu je lepší použít nginx.

Ve Vuex store vytvoříme pole apiHost: 'http://localhost:3000', kde se zadává port NodeJS Api. Klientská část je připravena. Nyní všechny požadavky z klienta na backend směřují na tuto url.

API server NodeJS

Ve složce /server vytvoříme 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 je uvedeno url pro databázi const url = 'mongodb://mongo:27017/';. Povolení cross-origin požadavků z klienta:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // některé staré prohlížeče (IE11, různé SmartTV) se zaseknou na 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ávěr

Nyní přejdeme do adresáře projektu a spustíme docker-compose build pro vybudování obrazů a docker-compose up k spuštění kontejnerů. Příkaz spustí 3 kontejnery: server, client, mongo. Pro server na NodeJS lze nastavit hot-reload, spojením s uživatelskou složkou. A klient v režimu vývoje spustit lokálně s hot reload, spuštěním zvlášť server a mongo. Abyste spustili jednotlivou službu, stačí uvést její název docker-compose up client. Nezapomeňte někdy provést prune a odstranění kontejnerů (containers), sítí (networks) a obrazů (images), abyste uvolnili zdroje.

Celý kód lze vidět tady. Projekt je ještě ve fázi vývoje.

Zdroj: habr.com