Wie man eine VueJS + NodeJS + MongoDB Anwendung in Docker packt

Wie aus dem vorherigen Artikel hervorgeht, habe ich an verschiedenen Projekten gearbeitet. Die ersten Tage im neuen Team verlaufen normalerweise gleich: der Backend-Entwickler setzt sich zu mir und führt magische Aktionen zur Installation und Bereitstellung der Anwendung durch. Docker ist für Frontend-Entwickler unentbehrlich, da das Backend oft auf einem breiten Spektrum von Stacks wie PHP/Java/Python/C# geschrieben ist, und das Frontend nicht jedes Mal den Backend-Entwickler ablenken muss, um alles zu installieren und bereitzustellen. Nur an einem Ort habe ich ein Setup mit Docker-Jenkins gesehen, das eine transparente Bereitstellung mit Protokollen und integrierten automatisierten Tests hat.

Es gibt viele ausführliche Artikel über Docker. In diesem Artikel geht es um die Bereitstellung einer Single Page Application mit VueJS/Vue Router, während der Serverteil als RESTful API mit NodeJS und MongoDB als Datenbank verwendet wird. Für die Beschreibung und den Start mehrerer Container-Anwendungen wird Docker Compose verwendet.

Warum ist Docker nötig?

Docker automatisiert den Bereitstellungsprozess von Anwendungen. Entwickler müssen nicht mehr selbst Programme installieren oder Versioninkompatibilitäten auf ihrem Rechner bekämpfen. Es genügt, Docker zu installieren und 1-2 Befehle in die Konsole einzugeben. Am bequemsten geht das unter Linux.

Erste Schritte

Installieren Sie Docker und Docker Compose

Ordnerstruktur

Wir erstellen 2 Ordner für die Client- und Serveranwendungen. Die Datei mit der Endung .yml ist die Konfiguration. Docker Compose, in der die Container der Anwendung definiert und miteinander verbunden werden.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #Hier kann der CMD aus Dockerfile in /server überschrieben werden
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #Hier kann der CMD aus Dockerfile in /client überschrieben werden
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Wir erstellen 3 Dienste in Docker: für NodeJS, MongoDB und statische Dateien mit Vue. Um den Client mit dem Server zu verbinden, wurde depends on serverhinzugefügt. Um MongoDB mit der Server-API zu verknüpfen, wird links mongoverwendet. Server, Client, Mongo — das sind die Namen der Dienste.

Client in VueJS

Im Ordner /client Die Anwendung ist in VueJS implementiert. Sie wurde mit Vue CLI. Bei der Erstellung des Images wird die Client-Anwendung in eine Sammlung statischer Dateien im Ordner generiert. /dist. Im Dockerfile sind die Befehle zur Erstellung des Images beschrieben:

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

Bitte beachten Sie, dass die package.json getrennt von den anderen Projektdaten kopiert und installiert wird. Dies geschieht zur Leistungsoptimierung, damit der Inhalt des Ordners /node_modules beim erneuten Erstellen zwischengespeichert wird. Jeder Befehl wird separat zwischengespeichert.

Am Ende wird beim Starten des Containers der Befehl ausgeführt npm run dev. Dieser Befehl ist in der package.json beschrieben:

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

Um die Dateien aus dem Ordner /dist, wird global installiert http-server, während im dev-dependencies das Paket spa-http-server, installiert wird, damit der Vue Router korrekt funktioniert. Das Flag —push-state leitet auf index.html um. Das Flag -c mit dem Wert 1 Sekunde wurde hinzugefügt um http-server die Skripte nicht zwischenzuspeichern. Dies ist ein Testbeispiel; in einem echten Projekt ist es besser, nginx zu verwenden.

Im Vuex-Store erstellen wir ein Feld apiHost: 'http://localhost:3000', wo der Port der NodeJS API festgelegt wird. Der Client-Bereich ist bereit. Nun gehen alle Anfragen vom Client an diese URL.

NodeJS Server API

Im Ordner /server erstellen wir server.js und Dockerfile:

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

In server.js angegeben wird url für die Datenbank const url = 'mongodb://mongo:27017/';. Wir erlauben Cross-Domain-Anfragen vom Client:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // einige ältere Browser (IE11, verschiedene SmartTVs) haben Probleme mit 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));
  });

Fazit

Jetzt wechseln wir in das Projektverzeichnis und starten docker-compose build zum Erstellen von Images und docker-compose up zum Starten von Containern. Der Befehl wird 3 Container starten: server, client, mongo. Für den NodeJS-Server kann man Hot-Reload konfigurieren, indem man ihn mit dem Benutzerverzeichnis verbindet. Der Client wird in der Entwicklungsphase lokal mit Hot-Reload gestartet, indem man ihn separat ausführt server und mongo. Um einen separaten Dienst zu starten, geben Sie einfach seinen Namen an docker-compose up client. Vergessen Sie nicht, manchmal prune und das Löschen von Containern, Netzwerken und Images, um Ressourcen freizugeben.

Den gesamten Code können Sie einsehen hier. Das Projekt befindet sich noch in der Entwicklungsphase.

Quelle: habr.com