🥇Hur paketera ett VueJS + NodeJS + MongoDB-program i Docker

Som man kan förstå av den förra artikeln har jag arbetat med olika projekt. De första dagarna i det nya teamet brukar se likadana ut: backendutvecklaren sätter sig hos mig och utför magiska handlingar för att installera och deploya applikationen. Docker är oumbärligt för frontendutvecklare eftersom backend ofta är skriven i ett brett spektrum av teknologier som PHP/Java/Python/C# och frontend behöver inte hela tiden störa backend för att få allt installerat och uppsatt. Bara på ett ställe har jag sett en kombination av Docker och Jenkins med transparent deployment, loggar och automatiserade tester.

Det har skrivits många detaljerade artiklar om Docker. I den här artikeln kommer vi att diskutera distributionen av en Single Page Application med hjälp av VueJS/Vue Router, medan serverdelen utgörs av ett RESTful API med NodeJS, och databasen som används är MongoDB. För att beskriva och köra flera applikationscontainrar används Docker Compose.

Varför behövs Docker

Docker möjliggör automatisering av processen för distribution av applikationen. Utvecklare behöver inte längre själv installera program, eller slåss med versionskompatibilitet på sin maskin. Det räcker med att installera Docker och skriva in 1-2 kommandon i terminalen. Det är enklast att göra detta på Linux.

Kom igång

Installera Docker och Docker compose

Mappstruktur

Vi skapar 2 mappar för klient- och serverapplikationerna. En fil med .yml-ändelse är en konfigurationsfil Docker Compose, där containrarna för applikationen definieras och länkas.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #här kan CMD från Dockerfile i /server överskrivas
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #här kan CMD från Dockerfile i /client överskrivas
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Vi skapar 3 tjänster i Docker: för NodeJS, MongoDB och för statiska filer med Vue. För att koppla klienten till servern har vi lagt till beroenden på servern. För att länka MongoDB med serverens API används länkar mongo. Server, klient, mongo – namnen på tjänsterna.

Klienten på VueJS

I mappen /client är applikationen som ligger på VueJS. Applikationen skapades med hjälp av Vue Cli. Vid byggandet av bilden byggs klientapplikationen till ett set av statiska filer i mappen /dist. I Dockerfile beskrivs en uppsättning kommandon för att bygga bilden:

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

Observera att package.json kopieras och installeras separat från de andra filerna i projektet. Detta görs för prestanda, så att innehållet i mappen /node_modules cachas vid повторbyggen. Varje radkommando cachas separat.

Till slut, när containern körs utförs kommandot npm run dev. Detta kommando beskrivs i package.json:


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

För att köra filer från mappen /dist, installeras globalt http-server, och i dev-dependencies paketet spa-http-server, så att Vue Router fungerar korrekt. Flaggan —push-state gör en omdirigering till index.html. Flaggan -c med värdet 1 sekund har lagts till för att http-server inte cacha skripten. Det här är ett testexempel; i ett verkligt projekt är det bättre att använda nginx.

I Vuex store skapar vi ett fält apiHost: 'http://localhost:3000', där NodeJS Api-porten anges. Klientsidan är klar. Nu går alla förfrågningar från klienten till backend på denna url.

NodeJS server API

I mappen /server skapar server.js och Dockerfile:


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

I server.js anges url för databasen const url = 'mongodb://mongo:27017/';. Vi tillåter korsdomänförfrågningar från klienten:


const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, 
};
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));
  });

Slutsats

Nu går vi till projektets katalog och kör docker-compose build för att bygga bilder och docker-compose up för att starta containrar. Kommandot kommer att starta 3 containrar: server, client, mongo. För servern på NodeJS kan hot-reload konfigureras genom att koppla den till användarmappen. Klienten kan köras lokalt i utvecklingsläge med hot reload genom att starta den separat server och mongo. För att starta en separat tjänst, ange bara dess namn docker-compose up client. Glöm inte att ibland köra prune och ta bort containrar, nätverk och bilder för att frigöra resurser.

Hele koden kan ses ). Ett typiskt exempel på användning:. Projektet är fortfarande under utveckling.

Källa: habr.com