Kā iesaiņot VueJS + NodeJS + MongoDB lietotni Docker

Kā var saprast no iepriekšējā raksta, esmu strādājusi ar dažādiem projektiem. Jaunā komandā pirmās dienas parasti paiet vienādi: backend izstrādātājs piesēžas pie manis un veic burvju darbības, lai uzstādītu un palaistu lietojumu. Docker ir neaizvietojams frontend izstrādātājiem, jo backend bieži ir uzrakstīts plašā PHP/Java/Python/C# tehnoloģiju klāstā, un frontendam nav nepieciešams katru reizi novērst uzmanību no backend, lai visu uzstādītu un palaistu. Tikai vienā vietā esmu redzējusi Docker-Jenkins saistījumu ar caurspīdīgu palaišanu, žurnāliem un pievienotajiem automatizētajiem testiem.

Par Docker ir uzrakstīts daudz detalizētu rakstu. Šajā rakstā tiks runāts par Single Page Application izvietošanu, izmantojot VueJS/Vue Router, servera daļa kā RESTful API ar NodeJS, un datu bāze ir MongoDB. Daudzu konteineru lietojumu aprakstīšanai un palaišanai tiek izmantots Docker Compose.

Kāpēc nepieciešams Docker

Docker ļauj automatizēt lietojuma izvietošanas procesu. Izstrādātājam vairs nav jāuzstāda programmas pats, jārisina versiju saderības problēmas uz savas mašīnas. Pietiek uzstādīt Docker un ievadīt 1-2 komandas konsolē. Visērtāk to darīt uz Linux.

SĀKT

Uzstādam Docker un Docker compose

Mapju struktūra

Izveidojam 2 mapes klienta un servera lietojumprogrammu. Faila ar paplašinājumu .yml — tas ir konfigurācijas fails Docker Compose, kur tiek definēti un saistīti programmas konteineri.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #šeit var pārrakstīt CMD no Dockerfile uz /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #šeit var pārrakstīt CMD no Dockerfile uz /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Izveidojam 3 pakalpojumus Docker: NodeJS, MongoDB un statiskajiem failiem uz Vue. Lai savienotu klientu ar serveri, pievienots depends on server. MongoDB saistīšanai ar servera API tiek izmantots links mongo. Server, klients, mongo — pakalpojumu nosaukumi.

Klients uz VueJS

Mapē /client atrodas lietojums uz VueJS. Lietojums izveidots ar Vue Cli. Veidojot attēlu, klienta lietojums tiek veidots kā statisko failu kopums mapē /dist. Dockerfile ir aprakstīts komandu kopums attēla veidošanai:

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

Lūdzu, ņemiet vērā, ka package.json tiek kopēts un instalēts atsevišķi no citiem projekta failiem. Tas tiek darīts, lai uzlabotu veiktspēju, ļaujot saturam no /node_modules tikt kešatam, atkārtoti veidojot. Katrs komandu rindiņa tiek kešota atsevišķi.

Beigās, palaižot konteineru, tiek izpildīta komanda npm run dev. Šī komanda ir aprakstīta package.json:

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

Lai palaistu failus no mapes /dist, globāli tiek uzstādīts http-server, un dev-dependencies paketē spa-http-server, lai Vue Router darbotos pareizi. Karogs —push-state nodrošina pāradresāciju uz index.html. Karogs -c ar vērtību 1 sekunde pievienots, lai http-server netiktu kešoti skripti. Tas ir testēšanas piemērs; īstajā projektā labāk izmantot nginx.

Vuex veikalā izveidojam lauku apiHost: 'http://localhost:3000', kur norādīts NodeJS Api ports. Klienta daļa ir gatava. Tagad visi pieprasījumi no klienta uz aizmuguri tiek sūtīti uz šo url.

NodeJS servera API

Mapē /server izveidojam server.js un Dockerfile:

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

No server.js norādīts url datubāzei const url = 'mongodb://mongo:27017/';. Atļaujām CORS pieprasījumu no klienta:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // dažiem vecajiem pārlūkiem (IE11, dažādi SmartTVs) ir problēmas ar 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));
  });

Secinājums

Tagad pāriesim uz projekta direktoriju un palaidīsim docker-compose build attēlu būvēšanai un $ docker-compose down lai palaistu konteinerus. Komanda uzsāks 3 konteinerus: server, client, mongo. NodeJS serverim var uzstādīt hot-reload, saistot to ar lietotāju mapēm. Klientu izstrādes posmā var palaist lokāli ar hot reload, uzsākot atsevišķi serveris un mongo. Lai palaistu atsevišķu pakalpojumu, pietiek norādīt tā vārdu docker-compose up client. Neaizmirstiet laiku pa laikam veikt prune un noņemt konteinerus (containers), tīklus (networks) un attēlus (images), lai atbrīvotu resursus.

Pilnu kodu var apskatīt šeit. Projekts vēl ir izstrādes posmā.

Avots: habr.com