Wie aus dem vorherigen Artikel ersichtlich ist, habe ich mit 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 zum Deployment der Anwendung durch. Docker ist für Frontend-Entwickler unverzichtbar, da das Backend oft in einer Vielzahl von Stacks wie PHP/Java/Python/C# geschrieben ist und das Frontend den Backend-Entwickler nicht ständig ablenken muss, um alles zu installieren und bereitzustellen. Nur an einem Ort habe ich ein Docker-Jenkins-Setup mit transparentem Deployment, Logs und integrierten automatisierten Tests gesehen.
Es sind viele ausführliche Artikel über Docker geschrieben worden. In diesem Artikel geht es um die Bereitstellung einer Single Page Application unter Verwendung von VueJS/Vue Router, wobei der Server als RESTful API mit NodeJS fungiert und MongoDB als Datenbank verwendet wird. Docker Compose wird zum Beschreiben und Starten mehrerer Anwendungscontainer verwendet.
Warum wird Docker benötigt
Docker ermöglicht die Automatisierung des Bereitstellungsprozesses einer Anwendung. Der Entwickler muss keine Programme mehr selbst installieren und sich nicht mit Versionsinkompatibilitäten auf seiner Maschine herumschlagen. Es genügt, Docker zu installieren und 1-2 Befehle in die Konsole einzugeben. Am bequemsten ist dies unter Linux.
Erste Schritte
Installation and
Ordnerstruktur
Erstellen Sie 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 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 dem Dockerfile in /server überschrieben werden
ports:
- "3000:3000"
links:
- mongo
client:
build: client/
#command: http-server ./dist #hier kann der CMD aus dem 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 für Statisches auf Vue. Um den Client mit dem Server zu verbinden, wurde depends on serverhinzugefügt. Für die Verlinkung von MongoDB mit der Server-API wird links mongoverwendet. Server, Client, Mongo — das sind die Namen der Dienste.
Client mit VueJS
Im Verzeichnis /client beinhaltet eine Anwendung in VueJS. Die Anwendung wurde mit erstellt. Beim Erstellen des Images wird die Client-Anwendung in einer Sammlung statischer Dateien im Ordner /distgebaut. Im Dockerfile sind die Befehle zum Erstellen 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 package.json separat von den anderen Projektdateien kopiert und installiert wird. Dies geschieht zur Verbesserung der Leistung, um den Inhalt des Ordners /node_modules bei einem erneuten Build zwischenzuspeichern. Jede Zeile-Befehl wird einzeln zwischengespeichert.
Am Ende wird beim Start 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, und im dev-dependencies-Paket spa-http-server, damit der Vue Router korrekt funktioniert. Das Flag —push-state leitet auf index.html um. Das Flag -c mit dem Wert 1 wurde hinzugefügt, damit http-server Skripte nicht zwischengespeichert werden. Dies ist ein Testbeispiel; in einem realen Projekt ist es besser, nginx zu verwenden.
Im Vuex-Store erstellen wir das Feld apiHost: 'http://localhost:3000', wo der Port der NodeJS API angegeben wird. Der Client ist bereit. Nun gehen alle Anfragen vom Client an den Backend auf diese URL.
NodeJS server API
Im Verzeichnis /server erstellen wir server.js und Dockerfile:
FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
Im server.js angegeben url für die Datenbank const url = 'mongodb://mongo:27017/';. Wir erlauben Cross-Origin-Anfragen vom Client aus:
const clientUrl = 'http://localhost:8081';
const corsOptions = {
origin: clientUrl,
optionsSuccessStatus: 200, \\ einige ältere Browser (IE11, verschiedene SmartTVs) kommen mit 204 nicht klar
};
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 gehen wir in das Verzeichnis des Projekts und starten docker-compose build , um die Images zu bauen und docker-compose up um die Container zu starten. Der Befehl hebt 3 Container an: server, client, mongo. Für den NodeJS-Server können Sie Hot-Reload einstellen, indem Sie ihn mit dem Benutzerordner verknüpfen. Der Client in der Entwicklungsphase kann lokal mit Hot-Reload gestartet werden, indem Sie separat server und mongostarten. Um einen einzelnen Dienst zu starten, geben Sie einfach seinen Namen an docker-compose up client. Vergessen Sie nicht, gelegentlich prune und das Löschen von Containern (containers), Netzwerken (networks) und Images (images) durchzuführen, um Ressourcen freizugeben.
Den vollständigen Code können Sie einsehen . Das Projekt ist noch in der Entwicklungsphase.
Quelle: habr.com
