So packen Sie die VueJS + NodeJS + MongoDB-Anwendung in Docker

Wie Sie dem vorherigen Artikel entnehmen können, habe ich an verschiedenen Projekten gearbeitet. Die ersten Tage in einem neuen Team verlaufen normalerweise gleich: Der Backender setzt sich zu mir und führt die magischen Schritte aus, um die Anwendung zu installieren und bereitzustellen. Docker ist für Frontend-Entwickler unverzichtbar, weil. Das Backend ist oft in einer Vielzahl von PHP/Java/Python/C#-Stacks geschrieben und die Vorderseite muss nicht jedes Mal die Rückseite ablenken, um alles zu installieren und bereitzustellen. Nur an einer Stelle habe ich eine Reihe von Docker-Jenkins mit transparenter Bereitstellung, Protokollen und Autotests gesehen.

Es wurden viele ausführliche Artikel über Docker geschrieben. Dieser Artikel konzentriert sich auf die Bereitstellung einer Single-Page-Anwendung mithilfe von VueJS/Vue Router, dem Serverteil in Form einer RESTful-API mit NodeJS und der Verwendung von MongoDB als Datenbank. Docker Compose wird zum Beschreiben und Ausführen mehrerer Containeranwendungen verwendet.

Warum Sie Docker brauchen

Mit Docker können Sie den Prozess der Bereitstellung einer Anwendung automatisieren. Der Entwickler muss keine Programme mehr selbst installieren und muss sich nicht mehr um Versionsinkompatibilitäten auf seinem Computer kümmern. Es reicht aus, Docker zu installieren und 1-2 Befehle in die Konsole einzugeben. Am bequemsten geht das unter Linux.

Erste Schritte

Setzen Docker und Docker komponieren

Ordnerstruktur

Wir erstellen 2 Ordner für Client- und Serveranwendungen. Eine Datei mit der Erweiterung .yml ist eine Konfiguration Docker komponierenHier werden die Anwendungscontainer definiert und verknüpft.
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

Wir erstellen 3 Dienste in Docker: für NodeJS, MongoDB und für Statik auf Vue. Zum Verbinden von Client und Server hinzugefügt Hängt vom Server ab. Um MongoDB mit der Server-API zu verknüpfen, verwenden Sie Links Mongo. Server, Client, Mongo sind die Namen der Dienste.

VueJS-Client

Im Ordner /Klient Die Anwendung befindet sich auf VueJS. Anwendung erstellt mit vue cli. Beim Erstellen eines Images wird die Clientanwendung in eine Reihe statischer Dateien in einem Ordner integriert /Distanz. Die Docker-Datei beschreibt eine Reihe von Befehlen zum Erstellen eines Images:

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

Beachten Sie, dass package.json getrennt von den übrigen Projektdateien kopiert und installiert wird. Dies geschieht aus Leistungsgründen, sodass der Inhalt des Ordners /node_modules bei der Neuerstellung zwischengespeichert wird. Jede Befehlszeile wird separat zwischengespeichert.

Am Ende, wenn der Container gestartet wird, wird der Befehl ausgeführt npm run dev. Dieser Befehl ist in package.json beschrieben:

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

Um Dateien aus einem Ordner auszuführen /Distanz, global eingestellt http-serverund im Paket dev-dependencies spa-http-serverdamit der Vue Router ordnungsgemäß funktioniert. Das Flag --push-state leitet zu index.html weiter. Das Flag -c mit einem Wert von 1 Sekunde wurde hinzugefügt http-Server Skripte wurden nicht zwischengespeichert. Dies ist ein Testbeispiel. Bei einem realen Projekt ist es besser, Nginx zu verwenden.

Erstellen Sie ein Feld im Vuex-Store apiHost: 'http://localhost:3000', wo der NodeJS-API-Port geschrieben ist. Der Client-Teil ist fertig. Jetzt gehen alle Anfragen vom Client an das Backend an diese URL.

NodeJS-Server-API

Im Ordner /server erstellen server.js und Dockerfile:

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

В server.js angezeigt wird URL für Datenbank const url = 'mongodb://mongo:27017/';. Wir erlauben domänenübergreifende Anfragen des Kunden:

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

Abschluss

Gehen Sie nun in das Projektverzeichnis und führen Sie es aus docker-compose build für Bildgebung und docker-compose up Container ausführen. Der Befehl hebt 3 Container an: Server, Client, Mongo. Für einen NodeJS-Server können Sie Hot-Reload konfigurieren, indem Sie ihn mit dem Benutzerordner verknüpfen. Und der Client wird derzeit so entwickelt, dass er lokal mit Hot-Reload läuft und separat ausgeführt wird Server и Mongo. Um einen separaten Dienst zu starten, geben Sie einfach dessen Namen an docker-compose up client. Vergessen Sie nicht, es manchmal zu tun prune und Entfernen von Containern (Containern), Netzwerken (Netzwerken) und Bildern (Images), um Ressourcen freizugeben.

Sie können den vollständigen Code sehen hier. Das Projekt befindet sich noch in der Entwicklung.

Source: habr.com