Sådan pakker du VueJS + NodeJS + MongoDB-applikation i Docker

Som du kan se fra den forrige artikel, arbejdede jeg med forskellige projekter. De første dage i et nyt team går normalt på samme måde: Backenderen sætter sig ned til mig og udfører de magiske trin for at installere og implementere applikationen. Docker er uundværlig for frontend-udviklere, fordi. Backend er ofte skrevet i en bred vifte af PHP/Java/Python/C# stakke, og fronten behøver ikke at distrahere bagsiden hver gang for at installere og implementere alt. Kun ét sted så jeg en flok Docker-Jenkins med en gennemsigtig implementering, logfiler, skruet sammen med autotest.

Der er skrevet mange detaljerede artikler om docker. Denne artikel vil fokusere på at implementere en Single Page Application ved hjælp af VueJS / Vue Router, serverdelen i form af en RESTful API med NodeJS, og MongoDB bruges som en database. Docker Compose bruges til at beskrive og køre flere containerapplikationer.

Hvorfor har du brug for Docker

Docker giver dig mulighed for at automatisere processen med at implementere en applikation. Udvikleren behøver ikke længere at installere programmer på egen hånd, håndtere versionsinkompatibilitet på sin maskine. Det er nok at installere Docker og skrive 1-2 kommandoer i konsollen. Det er mest praktisk at gøre dette på Linux.

Kom godt i gang

Indstil Docker , Docker komponerer

Mappestruktur

Vi opretter 2 mapper til klient- og serverapplikationer. En fil med filtypenavnet .yml er en konfiguration Docker komponerehvor applikationsbeholderne er defineret og sammenkædet.
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 opretter 3 tjenester i docker: til NodeJS, MongoDB og til statik på Vue. For at forbinde klient til server tilføjet afhænger af serveren. For at forbinde MongoDB med server-API'en skal du bruge links mongo. Server, klient, mongo er navnene på tjenesterne.

VueJS klient

I mappe /klient applikationen er placeret på VueJS. Applikation oprettet med vue cli. Når du bygger et billede, er klientapplikationen indbygget i et sæt statiske filer i en mappe / dist. Dockerfilen beskriver et sæt kommandoer til at bygge et billede:

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

Bemærk, at package.json kopieres og installeres separat fra resten af ​​projektfilerne. Dette gøres for ydeevnen, så indholdet af mappen /node_modules cachelagres ved genopbygning. Hver kommandolinje cachelagres separat.

Til sidst, når beholderen startes, udføres kommandoen npm run dev. Denne kommando er beskrevet i package.json:

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

For at køre filer fra en mappe / dist, globalt indstillet http-server, og i dev-dependencies-pakken spa-http-serverfor at få Vue Router til at fungere korrekt. --push-state flaget omdirigerer til index.html. -c-flaget med en værdi på 1 sekund er blevet tilføjet http-server cachelagde ikke scripts. Dette er et testeksempel, på et rigtigt projekt er det bedre at bruge nginx.

Opret et felt i Vuex-butikken apiHost: 'http://localhost:3000', hvor NodeJS Api-porten er skrevet. Klientdelen er klar. Nu går alle anmodninger fra klienten til bagenden til denne url.

NodeJS Server API

I mappe /server skab server.js og Dockerfile:

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

В server.js angivet url til database const url = 'mongodb://mongo:27017/';. Vi tillader anmodninger på tværs af domæner fra 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));
  });

Konklusion

Gå nu til projektbiblioteket og kør docker-compose build til billeddannelse og docker-compose up at køre containere. Kommandoen vil løfte 3 containere: server, klient, mongo. For en NodeJS-server kan du konfigurere hot-reload ved at linke den til brugermappen. Og klienten er under udvikling til at køre lokalt med hot reload, kørende separat server и mongo. For at starte en separat tjeneste skal du blot angive dens navn docker-compose up client. Glem ikke at gøre det nogle gange prune og fjernelse af containere (containere), netværk (netværk) og billeder (billeder) for at frigøre ressourcer.

Du kan se den fulde kode her. Projektet er stadig under udvikling.

Kilde: www.habr.com