Hur man paketerar VueJS + NodeJS + MongoDB-applikation i Docker

Som ni förstår av föregående artikel arbetade jag med olika projekt. De första dagarna i ett nytt team går vanligtvis på samma sätt: backendern sätter sig ner med mig och utför magiska åtgärder för att installera och distribuera applikationen. Docker är oumbärlig för frontend-utvecklare eftersom... Backend skrivs ofta i ett brett utbud av PHP/Java/Python/C#-stackar, och fronten behöver inte distrahera backend varje gång för att installera och distribuera allt. Endast på ett ställe såg jag en Docker-Jenkins-kombination med en transparent distribution, loggar och automatiserade tester.

Många detaljerade artiklar har skrivits om Docker. Den här artikeln kommer att prata om att distribuera en Single Page Application med VueJS/Vue Router, serverdelen är i form av ett RESTful API med NodeJS, och MongoDB används som en databas. Docker Compose används för att definiera och köra flera containerapplikationer.

Varför Docker behövs

Docker låter dig automatisera processen för att distribuera en applikation. Utvecklaren behöver inte längre installera program på egen hand eller hantera versionsinkompatibilitet på sin maskin. Allt du behöver göra är att installera Docker och skriva 1-2 kommandon i konsolen. Det bekvämaste sättet att göra detta är på Linux.

Komma igång

Ställ Hamnarbetare och Docker komponera

Mappstruktur

Vi skapar 2 mappar för klient- och serverapplikationer. En fil med filtillägget .yml är en konfiguration Docker komponera, där applikationsbehållare definieras och associeras.
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

Vi skapar 3 tjänster i Docker: för NodeJS, MongoDB och för statiska i Vue. Lades till för att ansluta klient till server beror på servern. För att länka MongoDB med serverns API, använd länkar mongo. Server, klient, mongo - namn på tjänster.

VueJS klient

I mappen /klient Applikationen är baserad på VueJS. Applikationen skapades med hjälp av Vue Cli. När du bygger en bild byggs klientapplikationen in i en uppsättning statiska filer i mappen / dist. Dockerfilen beskriver en uppsättning kommandon för att bygga en bild:

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 resten av projektfilerna. Detta görs för prestanda, så att innehållet i mappen /node_modules cachelagras när man bygger igen. Varje kommandorad cachelagras separat.

Slutligen, när behållaren startar, exekveras 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 en mapp / dist, installerad globalt http-server, och i dev-beroende paketet spa-http-serverså att Vue Router fungerar korrekt. --push-state-flaggan omdirigerar till index.html. Flaggan -c med ett värde på 1 sekund lades till http-server cachelagrade inte skript. Detta är ett testexempel; på ett riktigt projekt är det bättre att använda nginx.

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

NodeJS server API

I mappen /server skapa server.js och Dockerfile:

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

В server.js anges URL för databas const url = 'mongodb://mongo:27017/';. Tillåter begäranden över flera domäner från klienten:

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

Slutsats

Låt oss nu gå till projektkatalogen och köra docker-compose build för att konstruera bilder och docker-compose up att köra containrar. Teamet kommer att lyfta 3 containrar: server, klient, mongo. För en NodeJS-server kan du konfigurera hot-reload genom att länka den till användarmappen. Och klienten under utveckling bör lanseras lokalt med hot reload, körs separat server и mongo. För att starta en separat tjänst anger du bara dess namn docker-compose up client. Glöm inte att göra det ibland prune och ta bort behållare, nätverk och bilder för att frigöra resurser.

Du kan se hela koden här. Projektet är fortfarande under utveckling.

Källa: will.com