Hogyan csomagoljuk a VueJS + NodeJS + MongoDB alkalmazást a Dockerben

Amint az előző cikkből is kiderül, különböző projekteken dolgoztam. Az első napok egy új csapatban általában ugyanúgy telnek: a backender leül velem, és varázslatos műveleteket hajt végre az alkalmazás telepítéséhez és üzembe helyezéséhez. A Docker nélkülözhetetlen a front-end fejlesztők számára, mert... A háttérprogramot gyakran PHP/Java/Python/C# veremek széles skálájában írják, és az előlapnak nem kell minden alkalommal elterelnie a backend figyelmét, hogy mindent telepítsen és telepítsen. Csak egy helyen láttam Docker-Jenkins kombinációt átlátható telepítéssel, naplókkal és automatizált tesztekkel.

Sok részletes cikk született a Dockerről. Ez a cikk az egyoldalas alkalmazások VueJS/Vue Router használatával történő telepítéséről szól, a szerverrész RESTful API formájában van NodeJS-szel, a MongoDB pedig adatbázisként használatos. A Docker Compose több tárolóalkalmazás meghatározására és futtatására szolgál.

Miért van szükség a Dockerre?

A Docker lehetővé teszi egy alkalmazás telepítési folyamatának automatizálását. A fejlesztőnek már nem kell önállóan telepítenie a programokat, és nem kell a verzió-inkompatibilitással foglalkoznia a gépén. Mindössze annyit kell tennie, hogy telepíti a Dockert, és beír 1-2 parancsot a konzolba. Ennek legkényelmesebb módja a Linux.

Az első lépések

Készlet Dokkmunkás és a Docker kompozíció

Mappa szerkezete

Kliens és szerver alkalmazásokhoz 2 mappát hozunk létre. Az .yml kiterjesztésű fájl egy konfigurációs fájl Docker Compose, ahol alkalmazástárolók vannak meghatározva és társítva.
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

A Dockerben 3 szolgáltatást hozunk létre: NodeJS-hez, MongoDB-hez és statikushoz a Vue-ban. Hozzáadva az ügyfél és a szerver összekapcsolásához szervertől függ. A MongoDB és a szerver API összekapcsolásához használja a linkek mongo. Szerver, kliens, mongo - szolgáltatások nevei.

VueJS kliens

Mappában /ügyfél Az alkalmazás a VueJS-en alapul. Az alkalmazás a segítségével készült Vue Cli. A kép készítésekor az ügyfélalkalmazás a mappában lévő statikus fájlok készletébe épül be /ker. A Dockerfile parancskészletet ír le egy kép létrehozásához:

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

Felhívjuk figyelmét, hogy a package.json fájlt a projekt többi fájljától külön másolja és telepíti. Ez a teljesítmény érdekében történik, így a /node_modules mappa tartalma gyorsítótárazásra kerül az újraépítés során. Minden parancssor külön-külön van gyorsítótárban.

Végül, amikor a tároló elindul, a parancs végrehajtásra kerül npm run dev. Ezt a parancsot a package.json fájl írja le:

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

Fájlok futtatása mappából /ker, globálisan telepítve http-server, fejlesztői függőségekben pedig a csomagot spa-http-serverhogy a Vue Router megfelelően működjön. A --push-state jelző az index.html oldalra irányít át. Az 1 másodperc értékű -c jelző hozzáadásra került http-szerver nem gyorsítótárazta a szkripteket. Ez egy tesztpélda; valódi projektben jobb az nginx használata.

A Vuex áruházban létrehozunk egy mezőt apiHost: 'http://localhost:3000', ahol a NodeJS Api port regisztrálva van. A kliens rész készen áll. Mostantól az ügyféltől érkező összes kérés erre az URL-re érkezik.

NodeJS szerver API

Mappában /server teremt server.js és Dockerfile:

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

В server.js jelzett url adatbázishoz const url = 'mongodb://mongo:27017/';. Az ügyféltől érkező domainek közötti kérések engedélyezése:

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));
  });

Következtetés

Most menjünk a projektkönyvtárba, és futtassuk docker-compose build képek készítéséhez és docker-compose up konténerek futtatására. A csapat 3 konténert emel fel: szerver, kliens, mongo. NodeJS-kiszolgálók esetén beállíthatja a gyors újratöltést, ha összekapcsolja a felhasználói mappával. A fejlesztés alatt álló klienst pedig lokálisan, hot újratöltéssel, külön futva kellene elindítani szerver и mongo. Külön szolgáltatás indításához csak adja meg a nevét docker-compose up client. Ne felejtsd el néha megtenni prune valamint tárolók, hálózatok és képek törlése erőforrások felszabadítása érdekében.

A teljes kódot láthatja itt. A projekt még fejlesztés alatt áll.

Forrás: will.com