Ako zabaliť aplikáciu VueJS + NodeJS + MongoDB v Dockeri

Ako ste mohli pochopiť z predchádzajúceho článku, pracoval som na rôznych projektoch. Prvé dni v novom tíme zvyčajne prebiehajú rovnako: backender si so mnou sadne a vykoná magické akcie na inštaláciu a nasadenie aplikácie. Docker je nepostrádateľný pre front-end vývojárov, pretože... Backend je často napísaný v širokej škále balíkov PHP/Java/Python/C# a front nemusí zakaždým rozptyľovať backend, aby všetko nainštaloval a nasadil. Len na jednom mieste som videl kombináciu Docker-Jenkins s transparentným nasadením, protokolmi a automatickými testami.

O Dockeri bolo napísaných veľa podrobných článkov. Tento článok bude hovoriť o nasadení jednostránkovej aplikácie pomocou smerovača VueJS/Vue, serverová časť je vo forme RESTful API s NodeJS a ako databáza sa používa MongoDB. Docker Compose sa používa na definovanie a spustenie viacerých kontajnerových aplikácií.

Prečo je potrebný Docker

Docker vám umožňuje automatizovať proces nasadenia aplikácie. Vývojár už nemusí inštalovať programy sám alebo riešiť nekompatibilitu verzií na svojom počítači. Všetko, čo musíte urobiť, je nainštalovať Docker a zadať 1-2 príkazy do konzoly. Najpohodlnejší spôsob, ako to urobiť, je v systéme Linux.

Začíname

Sada prístavný robotník a Docker komponovať

Štruktúra priečinkov

Vytvárame 2 priečinky pre klientske a serverové aplikácie. Súbor s príponou .yml je konfigurácia Docker Compose, kde sú definované a priradené aplikačné kontajnery.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #здесь можно перезаписать CMD из Dockerfile в /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #здесь можно перезаписать CMD из Dockerfile в /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

V Dockeri vytvárame 3 služby: pre NodeJS, MongoDB a pre statické vo Vue. Pridané na pripojenie klienta k serveru závisí od servera. Ak chcete prepojiť MongoDB so serverovým API, použite odkazy mongo. Server, klient, mongo - názvy služieb.

Klient VueJS

V priečinku /zákazník Aplikácia je založená na VueJS. Aplikácia bola vytvorená pomocou Vue Cli. Pri vytváraní obrazu je klientska aplikácia zabudovaná do sady statických súborov v priečinku /vzd. Dockerfile popisuje sadu 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"]

Upozorňujeme, že súbor package.json sa skopíruje a inštaluje oddelene od ostatných súborov projektu. Toto sa robí kvôli výkonu, takže obsah priečinka /node_modules sa pri opätovnom zostavovaní uloží do vyrovnávacej pamäte. Každý príkazový riadok sa ukladá do vyrovnávacej pamäte samostatne.

Nakoniec, keď sa kontajner spustí, príkaz sa vykoná 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"
}

Spustenie súborov z priečinka /vzd, nainštalovaný globálne http-servera v závislosti od zariadenia balík spa-http-serveraby Vue Router fungoval správne. Príznak --push-state presmeruje na index.html. Bol pridaný príznak -c s hodnotou 1 sekunda http-server neuložil skripty do vyrovnávacej pamäte. Toto je testovací príklad; na skutočnom projekte je lepšie použiť nginx.

V obchode Vuex vytvoríme pole apiHost: 'http://localhost:3000', kde je zaregistrovaný port NodeJS Api. Klientska časť je pripravená. Teraz všetky požiadavky od klienta smerujú na túto adresu URL.

Rozhranie API servera NodeJS

V priečinku /server vytvoriť server.js a Dockerfile:

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

В server.js uvedené url pre databázu const url = 'mongodb://mongo:27017/';. Povolenie žiadostí klienta z viacerých domén:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 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 adresára projektu a spustíme docker-compose build na vytváranie obrázkov a docker-compose up prevádzkovať kontajnery. Tím zdvihne 3 kontajnery: server, klient, mongo. Pre server NodeJS môžete nakonfigurovať opätovné načítanie za chodu tak, že ho prepojíte s priečinkom používateľa. A klient vo vývoji by mal byť spustený lokálne s hot reload, beží samostatne server и Mongo. Ak chcete spustiť samostatnú službu, stačí zadať jej názov docker-compose up client. Nezabudnite to niekedy urobiť prune a odstránením kontajnerov, sietí a obrázkov, aby sa uvoľnili zdroje.

Môžete vidieť celý kód tu. Projekt je stále vo vývoji.

Zdroj: hab.com