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

Wie Sie dem vorherigen Artikel entnehmen können, habe ich mit verschiedenen Projekten gearbeitet. Die ersten Tage in einem neuen Team verlaufen normalerweise genauso: Das Back-End sitzt bei mir und führt magische Aktionen aus, um die Anwendung zu installieren und bereitzustellen. Docker ist seitdem unverzichtbar für das Frontend Das Backend ist häufig auf einer Vielzahl von PHP / Java / Python / C # -Stacks geschrieben, und die Front muss nicht jedes Mal das Backend ablenken, um alles zu installieren und bereitzustellen. Nur an einer Stelle sah ich ein paar Docker-Jenkins mit einer transparenten Bereitstellung, Protokollen, die durch Selbsttests verfälscht wurden.

Es wurden viele detaillierte Artikel über Docker geschrieben. In diesem Artikel wird die Bereitstellung einer Einzelseitenanwendung mit VueJS / Vue Router, dem Serverteil als RESTful-API mit NodeJS und MongoDB als Datenbank beschrieben. Docker Compose wird zum Beschreiben und Ausführen mehrerer Containeranwendungen verwendet.

Warum brauche ich einen Hafenarbeiter?

Mit Docker können Sie den Prozess der Bereitstellung einer Anwendung automatisieren. Der Entwickler muss keine eigenen Programme mehr installieren, um die Inkompatibilität von Versionen auf seinem Computer zu beheben. Es reicht aus, Docker zu installieren und 1-2 Teams in die Konsole zu treiben. Dies ist unter Linux am bequemsten.

Erste Schritte

Installieren Sie Docker und Docker Compose

Ordnerstruktur

Wir erstellen 2 Ordner für Client- und Serveranwendungen. Eine Datei mit der Erweiterung .yml ist eine Docker Compose- Konfiguration, in der Anwendungscontainer definiert und verknüpft 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 #   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 Statics on Vue. Um den Client mit dem Server zu verbinden, wird je nach Server hinzugefügt. Links Mongo wird verwendet, um MongoDB mit der Server-API zu verknüpfen. Server-, Client-, Mongo-Service-Namen.

Client auf VueJS

Der Ordner / client enthält die Anwendung auf VueJS. Anwendung mit Vue Cli erstellt . Beim Erstellen des Abbilds erstellt die Clientanwendung eine Reihe statischer Dateien im Ordner / dist . Dockerfile 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"] 

Bitte beachten Sie, dass package.json separat von den übrigen Projektdateien kopiert und installiert wird. Dies geschieht aus Gründen der Leistung, damit der Inhalt des Ordners / node_modules beim Neuerstellen zwischengespeichert wird. Jede Befehlszeile wird separat zwischengespeichert.

Wenn der Container gestartet wird, wird schließlich der Befehl npm run dev ausgeführt. Dieser Befehl wird in package.json beschrieben:

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

Um Dateien aus dem Ordner / dist auszuführen, wird der http-server global installiert und das Paket spa-http-server in dev-Abhängigkeiten eingerichtet, damit Vue Router ordnungsgemäß funktioniert. Das Flag –push-state leitet zu index.html weiter. Das Flag -c mit dem Wert 1 Sekunde wird hinzugefügt, damit der HTTP-Server keine Skripts zwischenspeichert. Dies ist ein Testfall, bei einem realen Projekt ist es besser, Nginx zu verwenden.

Erstellen Sie im Vuex-Speicher das apiHost: 'http://localhost:3000' , in dem der NodeJS-Api-Port registriert ist. Der Client-Teil ist fertig. Jetzt gehen alle Anfragen vom Client an die Rückseite zu dieser URL.

NodeJS-Server-API

Erstellen Sie im Ordner /server die Dateien server.js und Dockerfile:

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

Server.js gibt die URL für die Datenbank an 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)); }); 

Fazit

Wechseln Sie nun in das Projektverzeichnis und führen Sie docker-compose build Images docker-compose build , und docker-compose up , um die Container zu starten. Der Befehl wird 3 Container auslösen : Server, Client, Mongo . Für einen Server auf NodeJS können Sie das Hot-Reload konfigurieren, indem Sie es dem Benutzerordner zuordnen. Der Client wird derzeit für die lokale Ausführung mit Hot-Reload entwickelt, wobei Server und Mongo separat ausgeführt werden . Um einen separaten Dienst zu starten, geben Sie einfach seinen Namen docker-compose up client . Denken Sie daran, manchmal Container, Netzwerke und Bilder zu prune und zu löschen, um Ressourcen freizugeben.

Den vollständigen Code finden Sie hier . Das Projekt befindet sich noch in der Entwicklung.