Praxis Übung Teil 2: "docker-compose.yml" u. "docker-compose" mit node.js/node-sass u. nginx Webserver
Wir haben Docker Images mit einer exemplarischen "nodejs" Installation erstellt. Diese liegt zum Glück bereits fertig konfiguriert vor [1].
Löschen Sie die bestehenden Images ("docker rmi --help") oder räumen komplett auf mit "docker system prune -a --volumes":
Vorsicht: Das löscht sämtliche, bestehenden docker Umsetzungen ...
[1] DockerHub: node
Im folgenden werden wir "node.js" mit einem "node-sass" Modul zur Kompilierung von .scss Daten erstellen
und unsere Ergebnisse gleich über einen "nginx" Webserver zur Anzeige bringen.
Legen Sie sich auf Laufwerk "D:" folgende Verzeichnisstruktur an:
- D:\docker-nodejs
- D:\docker-nodejs\src
- D:\docker-nodejs\src\scss
- D:\docker-nodejs\src\css
- D:\docker-nodejs\src\www
Erstellen Sie in "D:\docker-nodejs\src\scss" eine "theme.scss":
Code:
@charset "UTF-8";
// scss Comment ...
$bgcolor: yellow;
/* CSS Comment ... */
body {
background: $bgcolor;
margin: 0;
padding: 0;
}
Erstellen Sie in "D:\docker-nodejs\src\www" eine "index.html":
Code:
<html>
<head>
<link rel="stylesheet" href="css/theme.css">
</head>
<body>
<h1>Willkommen</h1>
</body>
</html>
Erstellen Sie in "D:\docker-nodejs" eine "package.json":
Code:
{
"name": "boilerplate",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "node-sass src/scss -o src/css --recursive ",
"dev:sass": "npm run sass -- --output-style expanded --source-map true ",
"predev:watch": "npm run dev:sass",
"watch": "npm run dev:sass -- -w",
"prod:sass": "npm run sass -- --output-style compressed"
},
"license": "MIT",
"dependencies": {
"node-sass": "^4.9.3"
}
}
Erstellen Sie in "D:\docker-nodejs" ein "Dockerfile":
Code:
# Base Image
FROM node:8.11.3-alpine
# Copy package.json - relative from current directory to /nodeapp folder in container
COPY /$PWD/package.json /nodeapp/package.json
# Set working directory in container
WORKDIR /nodeapp
# Install node modules from package.json in working directory
RUN npm install
Erstellen Sie in "D:\docker-nodejs" eine "docker-compose.yml":
Code:
# Syntax Version - see https://docs.docker.com/compose/compose-file/compose-file-v2/
version: '2.2'
services:
# service "nodejs": Use node.js with node-sass
nodejs:
container_name: node-sass
build:
context: .
dockerfile: Dockerfile
image: dev/nodejs:1.0
working_dir: /nodeapp
environment:
- NODE_ENV=production
volumes:
- $PWD/package.json:/nodeapp/package.json
- $PWD/src:/nodeapp/src
init: true
# [1] Possible Start Command - Better ommit and use in console:
# "docker-compose run --rm nodejs sh"
# or "winpty docker-compose run --rm nodejs sh"
# Here we can then work with npx / npm as usual ...
# [2] Using "exec form" here:
# to process running as PID 1
#command: ["npm", "run", "watch", "--silent"]
# service "web": Use nginx webserver
web:
container_name: webserver-nginx
image: nginx:latest
ports:
- "8080:80"
volumes:
- $PWD/src/www:/usr/share/nginx/html
- $PWD/src/css:/usr/share/nginx/html/css
Starten Sie die GitBash-Konsole und wechseln in das Verzeichnis "D:\docker-nodejs".
Geben Sie "docker-machine ip" ein und merken Sie sich die IP-Adresse - in meinem Fall: 192.168.99.100
Wenn Sie jetzt zum ersten Male den Befehl "docker-compose up" eingeben passiert folgendes:
- Es werden unsere Images erzeugt/geladen
- Es werden Container "node-sass"/"webserver-nginx" erstellt - entsprechend den Angaben in Services "nodejs" und "web"
- In der letzten Zeile erhalten Sie eine Ausgabe der Art: "node-sass exited with code 0"
Starten Sie Ihren Browser und geben ein: http://[Ihre docker-machine IP-Adresse]:8080
- Sie erhalten unsere "index.html" - aber mit weißen Hintergrund.
- Sie erhalten in der GitBash-Konsole die logs des nginx Webservers
Beenden Sie in der GitBash-Konsole die Ausgabe via "CTRL+C" (Strg + c auf der Tastatur).
Dies beendet den Container "webserver-nginx" - also unseren Webserver. Sehen Sie sich die vorhandenen Container an: "docker ps -a"
Es wurde durchaus ein Container "node-sass" angelegt - dieser aber sofort beendet.
Genau dies wurde uns mit der Angabe "node-sass exited with code 0" mitgeteilt. Warum?
Wir haben in der "docker-compose.yml" für den Servcie "nodejs" kein Start Kommando hinterlegt. Es gibt also nichts was auszuführen wäre.
Sie könnten jetzt hier die Zeile #command: ["npm", "run", "watch", "--silent"] auskommentieren und "docker-compose up" erneut ausführen.
Es würde unser "watch" Script aus der "package.json" ausgeführt und eine "theme.css" im Verzeichnis "src/css" erstellt
und weiterhin auf Änderungen in der "src/scss/theme.scss" gewartet.
Wenn wir dann allerdings wieder mit "CTRL+C" den npm watch Task beenden möchten, würde auch gleichzeitig unser Webserver gestoppt.
Nicht unbedingt was wir möchten. Gehen Sie folgendermaßen vor:
Code:
docker-compose up -d"
bzw./oder
docker-compose start
Dies startet zumindest wieder unseren Webserver - im detached Modus. Im Anschluß können wir weitere Befehle in der Konsole eingeben:
Code:
docker-compose run --rm nodejs sh
Hinweis:
Wenn Sie hier keinen Prompt sehen oder Sie erhalten Ausgaben wie: "the input device is not a TTY. If you are using mintty, try prefixing the command with 'winpty'"
Dies ist bedingt durch die Auswahl während der "Git für Windows" Installation [1]. Dann probieren Sie es so:
winpty docker-compose run --rm nodejs sh
[1]
Git Konfiguration: MinTTY Git Bash
Wir befinden uns jetzt im Container "node-sass" und können machen was wir wollen ...
Starten Sie das npm Script aus der "package.json": "npm run watch --silent".
- Es wird eine "src/css/theme.css" erstellt.
- Starten Sie Ihren Browser: http://[Ihre docker-machine IP-Adresse]:8080
- Unsere Webseite hat jetzt einen gelben Hintergrund
- Ändern Sie die "theme.scss" auf Ihrem Rechner/Host im Verzeichnis "src/scss" und refreshen den Browser
- Ihre Änderungen wurden übernommen
- Beenden Sie den npm watch Task via "CTRL+C"
- Starten Sie ein anderes npm Script: "npm run prod:sass"
- Refreshen Sie den Browser - Die CSS Angaben wurden komprimiert
- Verlassen Sie den Container mit: "exit"
- Stoppen Sie den Webserver mit: "docker-compose stop"
Innerhalb des Containers könnten Sie auch weitere, bel. npm Module installieren. Diese existieren solange wie der Container "node-sass"
ebenfalls existiert. Löschen Sie den Container "node-sass" gehen auch die Änderungen verloren.
Sie müßten dann das Image "dev/nodejs" mit den aktuellen Direktiven der "package.json" neu builden: "docker-compose up" bzw. "docker-compose build" ...
Die Änderungen in "src/scss/theme.scss" bzw. "src/css/theme.css" bleiben - auf Ihrem Host/Rechner - in jedem Fall vorhanden.