Hvordan pakke VueJS + NodeJS + MongoDB-applikasjon i Docker

Som du kan forstå fra forrige artikkel, jobbet jeg med forskjellige prosjekter. De første dagene i et nytt team går vanligvis på samme måte: Backenderen setter seg ned med meg og utfører magiske handlinger for å installere og distribuere applikasjonen. Docker er uunnværlig for front-end utviklere fordi... Backend er ofte skrevet i et bredt spekter av PHP/Java/Python/C#-stabler, og fronten trenger ikke å distrahere backend hver gang for å installere og distribuere alt. Bare på ett sted så jeg en Docker-Jenkins-kombinasjon med en gjennomsiktig distribusjon, logger og automatiserte tester.

Det er skrevet mange detaljerte artikler om Docker. Denne artikkelen vil snakke om distribusjon av en enkeltsideapplikasjon ved å bruke VueJS/Vue Router, serverdelen er i form av en RESTful API med NodeJS, og MongoDB brukes som en database. Docker Compose brukes til å definere og kjøre flere containerapplikasjoner.

Hvorfor Docker er nødvendig

Docker lar deg automatisere prosessen med å distribuere en applikasjon. Utvikleren trenger ikke lenger å installere programmer på egen hånd eller håndtere versjonsinkompatibilitet på maskinen sin. Alt du trenger å gjøre er å installere Docker og skrive inn 1-2 kommandoer i konsollen. Den mest praktiske måten å gjøre dette på er på Linux.

Komme i gang

Satt Docker og Docker komponerer

Mappestruktur

Vi lager 2 mapper for klient- og serverapplikasjoner. En fil med filtypen .yml er en konfigurasjon Docker komponere, hvor applikasjonsbeholdere er definert og tilknyttet.
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 lager 3 tjenester i Docker: for NodeJS, MongoDB og for statiske i Vue. Lagt til for å koble klient til server avhenger av server. For å koble MongoDB med server-API, bruk linker mongo. Server, klient, mongo - navn på tjenester.

VueJS klient

I mappe /klient Søknaden er basert på VueJS. Applikasjonen ble opprettet ved hjelp av Vue Cli. Når du bygger et bilde, bygges klientapplikasjonen inn i et sett med statiske filer i mappen /avstand. Dockerfilen beskriver et sett med kommandoer for å bygge et bilde:

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

Vær oppmerksom på at package.json kopieres og installeres separat fra resten av prosjektfilene. Dette gjøres for ytelse, slik at innholdet i /node_modules-mappen bufres når du bygger på nytt. Hver kommandolinje bufres separat.

Til slutt, når beholderen starter, utføres kommandoen npm run dev. Denne kommandoen er beskrevet i package.json:

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

For å kjøre filer fra en mappe /avstand, installert globalt http-server, og i dev-avhengigheter pakken spa-http-serverslik at Vue Router fungerer riktig. --push-state-flagget omdirigerer til index.html. -c-flagget med en verdi på 1 sekund ble lagt til http-server lagret ikke skript. Dette er et testeksempel; på et ekte prosjekt er det bedre å bruke nginx.

I Vuex-butikken lager vi et felt apiHost: 'http://localhost:3000', hvor NodeJS Api-porten er registrert. Klientdelen er klar. Nå går alle forespørsler fra klienten til baksiden til denne url.

NodeJS server API

I mappe /server skape server.js og Dockerfile:

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

В server.js angitt url for database const url = 'mongodb://mongo:27017/';. Tillater forespørsler på tvers av domener 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));
  });

Konklusjon

La oss nå gå til prosjektkatalogen og kjøre docker-compose build for å lage bilder og docker-compose up å kjøre containere. Teamet skal løfte 3 containere: server, klient, mongo. For en NodeJS-server kan du konfigurere hot-reload ved å koble den til brukermappen. Og klienten under utvikling bør lanseres lokalt med hot reload, kjører separat server и mongo. For å starte en egen tjeneste, spesifiser bare navnet docker-compose up client. Ikke glem å gjøre det noen ganger prune og sletting av beholdere, nettverk og bilder for å frigjøre ressurser.

Du kan se hele koden her. Prosjektet er fortsatt under utvikling.

Kilde: www.habr.com