From 4cd9cac0e27847e3b1bb00f38639200d4016b62c Mon Sep 17 00:00:00 2001 From: Lukas Panni Date: Fri, 14 Jun 2024 12:20:03 +0200 Subject: [PATCH] Add example "project" + Docker-Deployment --- Material/Slides/13_FullStack_ToDo.md | 53 +++++ Material/Slides/14_Deployment_Docker.md | 250 ++++++++++++++++++++++++ 2 files changed, 303 insertions(+) create mode 100644 Material/Slides/13_FullStack_ToDo.md create mode 100644 Material/Slides/14_Deployment_Docker.md diff --git a/Material/Slides/13_FullStack_ToDo.md b/Material/Slides/13_FullStack_ToDo.md new file mode 100644 index 0000000..4a5a986 --- /dev/null +++ b/Material/Slides/13_FullStack_ToDo.md @@ -0,0 +1,53 @@ +--- +title: "Vorlesung Webengineering 1 - Praxis: Full-Stack Webanwendung" +topic: "Webengineering_1_13" +author: "Lukas Panni" +theme: "Berlin" +colortheme: "dove" +fonttheme: "structurebold" +fontsize: 12pt +urlcolor: olive +linkstyle: boldslanted +aspectratio: 169 +lang: de-DE +section-titles: true +plantuml-format: svg +... + + +# Anforderungen + +## Sammlung von Anforderungen + +### Funktionale Anforderungen + +- Was soll die Anwendung tun? + - Anforderungen an Funktionalität, Verhalten, ... + +### Nicht-funktionale Anforderungen + +- Wie soll die Anwendung etwas tun? + - Anforderungen an Qualität, Skalierbarkeit, Sicherheit, ... + +# Entwurf + +## Datenmodell + +- Welche Daten werden benötigt? +- Wie sind die Daten strukturiert? + +## Grundsätzliche Architektur + +- Zerlegung in Komponenten: Lösung des Gesamtproblems durch Zusammenarbeit +- Kommunikation zwischen Komponenten: Schnittstellen (im Web stark standardisiert!) +- Deployment der Komponenten: \rightarrow{} nächste Vorlesung: Deployment mit Docker + + +# Implementierung + +## Technologien + +- Backend: TypeScript, Express, bun +- Frontend: TypeScript, HTML, CSS + +### Gemeinsame Implementierung, beginnend mit dem Backend \ No newline at end of file diff --git a/Material/Slides/14_Deployment_Docker.md b/Material/Slides/14_Deployment_Docker.md new file mode 100644 index 0000000..eca1e66 --- /dev/null +++ b/Material/Slides/14_Deployment_Docker.md @@ -0,0 +1,250 @@ +--- +title: "Vorlesung Webengineering 1 - Exkurs: Deployment mit Docker" +topic: "Webengineering_1_14" +author: "Lukas Panni" +theme: "Berlin" +colortheme: "dove" +fonttheme: "structurebold" +fontsize: 12pt +urlcolor: olive +linkstyle: boldslanted +aspectratio: 169 +lang: de-DE +section-titles: true +plantuml-format: svg +... + + +# Grundlagen + +## Was ist Docker? + +- Open Source Software für Containervirtualisierung + - Aber auch Firma Docker Inc. +- `docker` heute als Synonym für Containervirtualisierung + +## Containervirtualisierung (1) + +### Recap: Webarchitekturen - Deployment + +- Leichtgewichtige Virtualisierung auf **Prozessebene** + - Betriebssystem(-Kern) von allen _Containern_ gemeinsam genutzt +- Isolation über Linux Kernel-Features + - Namespaces: Isolation von Prozessen, eigene "Sicht" auf System (Dateisystem, Netzwerk, ...) + - Cgroups (Control Group): Beschränkung von Hardware-Ressourcen (CPU, RAM, ...) + - \rightarrow{} Container voneinander isoliert, bringen eigene Umgebung (Binaries, Bibliotheken, Konfiguration, ...) mit + +## Containervirtualisierung (2) + +### Begriffe + +- _Container_: Instanz eines Images (ähnlich zu Objekt in OOP) +- _Image_: "Vorlage" für Container eines Typs (ähnlich zu Klasse in OOP) + - _Layer_: Teil eines Images (entfernt ähnlich zu Vererbung in OOP) + - Mehrere Layer bilden zusammen das Image, jedes fügt Dateien hinzu oder ändert bzw. entfernt bestehende +- _Dockerfile_: Beschreibung des Images, Build-Script für ein Image + + +## Docker Verwendung (1) + +### Installation + +- Docker Desktop für [Windows](https://docs.docker.com/desktop/install/windows-install/), [macOS](https://docs.docker.com/desktop/install/mac-install/) und [Linux](https://docs.docker.com/desktop/install/linux-install/) + - GUI für Arbeit mit Docker, einfachster Weg Docker (auch CLI) zu installieren + - Kommerzielle Nutzung kostenpflichtig! + - Alternativen: Podman Desktop, Rancher Desktop + +## Docker Verwendung (2) + +### CLI + +- Nach der Installation sollte die Docker CLI über die Kommandozeile verfügbar sein + - Testen: `docker --version`, `docker run hello-world` +- Wichtige Befehle: + - `docker run`: Starten eines Containers + - `docker build`: Erstellen eines Images aus einem Dockerfile + - `docker ps`: Anzeigen laufender Container + - `docker images`: Anzeigen vorhandener Images + +## Docker Verwendung (3) + +### Eigene Images erstellen - Dockerfiles + +```dockerfile +FROM debian:bookworm-slim + +COPY . /app + +WORKDIR /app + +CMD ["cat", "test.txt"] +``` + +- `docker build -t .` erstellt ein Image aus dem Dockerfile im aktuellen Verzeichnis +- `docker run ` startet einen Container mit dem Image + +## Docker Verwendung (4) + +### Erklärung Dockerfile + +- Jede Zeile erzeugt ein Layer +- `FROM debian:bookworm-slim`: Basisimage für das neue Image, hier Debian in der Variante "bookworm-slim" + - "Basis" für das neue Image, bringt Standard-Tools und -Bibliotheken mit + - [Docker Hub](https://hub.docker.com/) ist die Standard-Quelle für Images +- `COPY . /app`: Kopiert den Inhalt des aktuellen Verzeichnisses in das Image-Verzeichnis `/app` +- `WORKDIR /app`: Arbeitsverzeichnis für den Container auf `/app` setzen, alle weiteren Befehle in diesem Verzeichnis +- `CMD ["cat", "test.txt"]`: Führt `cat test.txt` im Container aus (bei Start) \rightarrow{} gibt Inhalt von `test.txt` aus + +## Docker Verwendung (5) + +### Ausführung von Containern + +`docker run [OPTIONS] [COMMAND]` + +- Häufige Optionen + - `-d`: Container im Hintergrund starten + - `-p :`: Portweiterleitung + - `-v :`: Volumen-Mounting, Dateien des Hosts im Container verfügbar machen -> Container kann Daten so persistent speichern + - `--rm`: Container nach Beenden automatisch löschen + - `-it`: Interaktiver Modus, z.B. für Shell-Zugriff / Debugging +- COMMAND: Befehl, der im Container ausgeführt wird, z.B. `bash` für Shell-Zugriff + +## Zusammenfassung Grundlagen + +- Docker ermöglicht Containervirtualisierung +- **Images** sind Vorlagen für **Container**, **Dockerfiles** beschreiben **Images** +- Docker CLI für Interaktion mit Docker (Bauen, Starten, Stoppen, ...) +- Vorgefertigte Images aus dem [Docker Hub](https://hub.docker.com/) können genutzt werden + +# Deployment von Webanwendungen mit Docker + +## Vorteile von Docker für Deployment + +- **Portabilität**: Image kann einfach auf andere Systeme gebracht werden, z.B. über öffentliche Registries wie Docker Hub oder als einzelne Datei (tar) +- **Konsistente Umgebung**: Entwicklungs- und Produktionsumgebung sind identisch + - Klar definierte Abhängigkeiten, keine "It works on my machine"-Probleme + - Wenn die Anwendung lokal im Container läuft, läuft sie auch auf einem Server im Container +- **Isolation**: Container sind voneinander isoliert +- **Skalierbarkeit**: Container können einfach dupliziert werden, z.B. für Lastverteilung + +## Deployment von statischen Webseiten (1) + +Statische Webseite = ohne Server-Logik, nur Auslieferung von HTML, CSS, JS + +### Was brauchen wir dazu im Image? + +## Deployment von statischen Webseiten (2) + +### Inhalt Image + +- HTML, CSS, JS-Dateien +- Möglichkeit HTTP-Requests mit diesen Dateien zu beantworten + - \rightarrow{} Webserver wie Nginx, Apache2 ... + - \rightarrow{} Node.js, Python, Ruby, ... mit entsprechenden Frameworks +- + Konfiguration für den Webserver, z.B. Port, Verzeichnis der Dateien, ... + +## Deployment von statischen Webseiten (3) + +### Dockerfile für statische Webseite mit Nginx + +```dockerfile +FROM nginx:alpine + +COPY static/ /usr/share/nginx/html +``` + +- Vorgefertigtes Image `nginx:alpine` erleichtert vieles: Nginx installiert, Standard-Konfiguration vorhanden, ... +- `COPY static /usr/share/nginx/html`: Kopiert den Inhalt des aktuellen Verzeichnisses in das Verzeichnis, das Nginx als Webroot nutzt +- `docker build -t my-static-website .` erstellt das Image + +## Deployment von statischen Webseiten (4) + +### Ausführen des Containers + +`docker run -p 8080:80 my-static-website` + +- Nginx verwendet den Standard-Port 80 +- Um Zugriffe von außen (auch Host) zu ermöglichen, wird der Port 80 des Containers auf den Port 8080 des Hosts weitergeleitet +- Webseite ist unter `http://localhost:8080` erreichbar + + +## Deployment von REST-APIs (1) + +### Was brauchen wir dazu im Image für JavaScript / TypeScript? + +## Deployment von REST-APIs (2) + +### Inhalt Image + +- JavaScript / TypeScript-Dateien mit Server-Logik + - Verarbeitung von HTTP-Requests, Zugriff auf Datenbanken / lokale Daten, ... + - **Abhängigkeiten** (Bibliotheken, Frameworks, ...)! +- JavaScript / TypeScript-Laufzeitumgebung + - Node.js + - Bun + +## Deployment von REST-APIs (3) + +### Dockerfile für REST-API mit Node.js + +```dockerfile +FROM node:lts + +COPY . /app +WORKDIR /app +CMD ["node", "src/index.js"] +``` + +- `node:lts` als Basisimage, bringt Node.js mit +- `COPY . /app`: Kopiert den Inhalt des aktuellen Verzeichnisses in das Image-Verzeichnis `/app` + - Voraussetzung: `npm install` wurde vorher ausgeführt + +## Deployment von REST-APIs (4) + +### Multi-Stage-Dockerfile + +```dockerfile +FROM node:lts AS build + +COPY package*.json . +RUN npm ci --only=production + +FROM node:lts AS app + +WORKDIR /app +COPY --from=build node_modules node_modules +COPY package.json src /app/ + +CMD ["node", "index.js"] +``` + +## Deployment von REST-APIs (5) + +### Multi-Stage-Dockerfile - Erklärung + +- Trennung von Build- und Laufzeitumgebung + - Build: Installation von Abhängigkeiten (hier: `express`) + - Laufzeit: Nur das Nötigste (hier: `node_modules`, `src` und `package.json`) wird kopiert + +\rightarrow{} Laufzeit-Image kann kleiner sein, da Development-Tools (z.B. `typescript`, `eslint`, ...) nicht benötigt werden. +\rightarrow{} In der Regel zu bevorzugen! + + +## Deployment von REST-APIs (6) + +### Dockerfile für REST-API mit Bun + +```dockerfile +FROM oven/bun as build + +COPY package.json bun.lockb / +RUN bun install --frozen-lockfile + +FROM oven/bun as app +WORKDIR /app + +COPY --from=build node_modules node_modules +COPY package.json src /app/ + +CMD ["bun", "run", "."] +``` \ No newline at end of file