Hogyan csomagoljuk be a VueJS + NodeJS + MongoDB alkalmazást Dockerbe

Ahogyan az előző cikkből kiderült, különböző projekteken dolgoztam. Az új csapatban az első napok rendszerint hasonlóan telnek: a backend fejlesztő leül mellém, és varázslatos módon telepíti és deploy-olja az alkalmazást. A Docker elengedhetetlen a frontend fejlesztők számára, mivel a backend gyakran sokféle PHP/Java/Python/C# stack-en van írva, és a frontend fejlesztőnek nem kell állandóan a backendet zavarni, hogy mindent telepítsen és elindítson. Csak egy helyen láttam a Docker-Jenkins kombinációt átlátható deploy-val, naplókkal és integrált automatikus tesztekkel.

A dokerről sok részletes cikk született. Ebben a cikkben a Single Page Application telepítéséről lesz szó, VueJS/Vue Router használatával, a backend pedig RESTful API formájában NodeJS-t használ, míg az adatbázis MongoDB. Több alkalmazás-konténer leírásához és indításához a Docker Compose-t alkalmazzuk.

Miért van szükség Dockerre

A Docker lehetővé teszi az alkalmazás telepítési folyamatának automatizálását. A fejlesztőnek már nem kell önállóan telepíteni a programokat, küzdeni a verziók kompatibilitásával a gépén. Elég telepíteni a Dockert, és 1-2 parancsot beírni a konzolba. Ezt a legjobban Linuxon lehet végezni.

Az indulás

Telepítünk Docker és Docker compose

Mappa struktúra

Két mappát hozunk létre a kliens és a szerver alkalmazásokhoz. A .yml kiterjesztésű fájl egy konfigurációs fájl, Docker Compose-t használtunk., amelyben a konténerek definiálva és összekapcsolva vannak.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #itt felül lehet írni a CMD-t a Dockerfile-ból a /server mappában
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #itt felül lehet írni a CMD-t a Dockerfile-ból a /client mappában
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Három szolgáltatást hozunk létre a Dockerben: NodeJS, MongoDB és statikus fájlokhoz Vue. A kliens és a szerver összekapcsolásához hozzáadtuk depends on server. A MongoDB és a szerver API összekapcsolásához a links mongo. A szerver, kliens, mongo — ezek a szolgáltatások nevei.

Kliens VueJS-en

A mappában /client a VueJS-en elhelyezett alkalmazás. Az alkalmazás a Vue Cli-val készült. Az image építésekor a kliens alkalmazás statikus fájlok készletére épül a /distmappában. A Dockerfile leírja az image építéséhez szükséges parancsok sorozatát:

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

Kérlek, vedd figyelembe, hogy a package.json külön zsugorodik és települ a projekt további fájljaitól. Ezt a teljesítmény érdekében tesszük, hogy a /node_modules mappa tartalma cache-elhető legyen a következő build során. Minden parancssor külön-külön cache-elődik.

A konténer indításakor a következő parancs fut le npm run dev. Ez a parancs a package.json-ban van leírva:

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

A fájlok futtatásához a mappából /dist, globálisan telepítve van a http-server, valamint a dev-dependencies között a spa-http-server, hogy a Vue Router megfelelően működjön. A --push-state jelző átirányít az index.html-re. A -c jelző 1 másodpercre van állítva, hogy http-server ne cache-elje a szkripteket. Ez egy tesztpélda, egy valós projektnél érdemesebb nginx-et használni.

A Vuex store-ban létrehozunk egy mezőt apiHost: 'http://localhost:3000', ami a NodeJS API portját tartalmazza. Az ügyféloldal kész. Most minden kérés az ügyfélről visszaehhez az url-hez megy.

NodeJS server API

A mappában /server létrehozunk server.js és a Dockerfile-t:

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

A server.js meg van határozva url az adatbázis számára const url = 'mongodb://mongo:27017/';. Engedélyezzük a kereszt-domain kéréseket az ügyféltől:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // néhány régi böngésző (IE11, különböző SmartTV-k) megakadhat a 204-en
};
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árás

Most lépjünk a projekt mappájába és indítsuk el docker-compose build a képek létrehozásához és docker-compose up a konténerek indításához. A parancs 3 konténert indít el: server, client, mongo. A NodeJS szerver számára beállítható a hot-reload, összekötve a user mappával. Az ügyfelet fejlesztés alatt helyben kell futtatni hot reload-tal, külön indítva server és mongo. Egy külön szolgáltatás indításához elegendő megadni a nevét docker-compose up client. Ne felejtsd el időnként futtatni a prune és eltávolítani a konténereket (containers), hálózatokat (networks) és képeket (images), hogy felszabadítsd az erőforrásokat.

A teljes kód megtekinthető itt. A projekt még fejlesztés alatt áll.

Forrás: habr.com