From 198067ddffd2bc8f90fc93410b1b00eb89e1e280 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 10 Mär 2025 16:14:20 +0100
Subject: [PATCH] Merge branch 'draft'
---
assets/images/ubuntu-installation.png | 0
index.html | 388 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
assets/images/administration-timeout-20s.png | 0
3 files changed, 388 insertions(+), 0 deletions(-)
diff --git a/assets/images/administration-timeout-20s.png b/assets/images/administration-timeout-20s.png
new file mode 100644
index 0000000..732e14a
--- /dev/null
+++ b/assets/images/administration-timeout-20s.png
Binary files differ
diff --git a/assets/images/ubuntu-installation.png b/assets/images/ubuntu-installation.png
new file mode 100644
index 0000000..7ab46b5
--- /dev/null
+++ b/assets/images/ubuntu-installation.png
Binary files differ
diff --git a/index.html b/index.html
index 710cff3..96a514b 100644
--- a/index.html
+++ b/index.html
@@ -4484,6 +4484,394 @@
<li>Die gefundenen Primzahlen können ausgegeben werden, müssen aber nicht. In erster Linie geht es darum, die Arbeit auf mehrere Threads aufzuteilen.</li>
</ul>
</section>
+ <section>
+ <h3>Multi Page Applications</h3>
+ </section>
+ <section>
+ <p>Im Gegensatz zu einer SPA ("Single Page Application") teilt sich eine Multi Page Application in mehrere Unterseiten auf, die sich per URL z.B. im Browser adressieren lassen.</p>
+ </section>
+ <section>
+ <p>In einem neuen Ordner / Projekt:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ npm init -y
+
+ npm install express pug
+
+ mkdir public
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // index.js (s. examples 010-nodejs/mpa.js)
+ const express = require("express");
+ const app = express();
+
+ app.use(express.static("public"));
+
+ app.listen(3002);
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Fülle das Verzeichnis "public" mit jeweis einer HTML-Datei für eine "Home"- und eine "About Us"-Seite, die beide eine einfache Navigations-Leiste enthalten (simple <code>span</code> mit Link (href)), um zwischen diesen beiden Seiten navigieren zu können.
+ Unterscheiden sollen sich diese beiden Seiten durch ihren "Inhalt", indem dort einfach "Home" und "About Us" enthalten ist.</p>
+ </section>
+ <section>
+ <h3>Serverseitiges Rendern</h3>
+ </section>
+ <section>
+ <p>Template-Engine "pug"</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html
+ head
+ body
+ div This is a div with some text
+ #main.my-class This is also a div with short-hands for id and class
+ a(href="/") This is a link with href
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Conditionals</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html
+ head
+ body
+ if name
+ div Hello #{name}!
+ else
+ div Hello Anonymous"
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Extension / Inheritance</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ // layout.pug
+ html
+ head
+ body
+ div Some static content
+ block content
+
+ // page.pug
+ extends layout.pug
+
+ block content
+ div This is my home content
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Pug in Express</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ mkdir views
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // ...
+
+ app.set('view engine', 'pug');
+
+ app.get('/', (req, res) => {
+ // file name without .pug and some data passed to the template
+ res.render('index', { title: 'Hey', message: 'Hello there!' })
+ });
+
+ app.listen(3002);
+ </code>
+ </pre>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ // views/index.pug
+ html
+ head
+ title #{title}
+ body #{message}
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere die Seiten aus dem vorherigen Beispiel mit Pug (nutze Vererbung, um die Navigationsleiste nicht doppelt implementieren zu müssen) und
+ baue einen Gruß im Seitentext mit dynamischen Namen ein, den man z.B. in der URL als Query-Parameter "?name=Joe" angibt und der im Server ausgewertet wird.</p>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>Betrieb von Anwendungen</h2>
+ </section>
+ <section>
+ <p>Wichtige Aspekte beim produktiven Betrieb von Anwendungen</p>
+ <ul>
+ <li>Stabilität</li>
+ <li>Zugriffsschutz</li>
+ <li>Sicherheitsupdates</li>
+ <li>Ausfallsicherheit</li>
+ </ul>
+ </section>
+ <section>
+ <p>Typische Werkzeuge beim Betrieb</p>
+ <ul>
+ <li>Webserver</li>
+ <li>Proxies</li>
+ <li>Laufzeitumgebungen</li>
+ <li>Application-Server / Prozess-Manager</li>
+ <li>Remote-Zugänge</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Beispielhafte Produktivumgebung mit lokaler VM</h3>
+ </section>
+ <section>
+ <p>Vorbereitungen</p>
+ <ul>
+ <li>Oracle VirtualBox</li>
+ <li>Ubuntu Server 24.04</li>
+ </ul>
+ </section>
+ <section>
+ <p>Eckdaten für die VM</p>
+ <ul>
+ <li>2048 MB Ram</li>
+ <li>Netzwerktyp "Brücke" / "Bridge"</li>
+ <li>Linux / Ubuntu (64-Bit)</li>
+ <li>20GB HDD</li>
+ </ul>
+ </section>
+ <section>
+ <img data-src="/assets/images/ubuntu-installation.png">
+ </section>
+ <section>
+ <p>Nach der Installation in der VM mit den bekannten Credentials anmelden und die IP in Erfahrung bringen:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ ip a
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP [...]
+ link/ether 08:00:27:43:e5:2c brd ff:ff:ff:ff:ff:ff
+ inet 10.0.0.166/16 metric 100 brd 10.0.255.255 scope global dynamic enp0s3
+ valid_lft 863191sec preferred_lft 863191sec
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Anmeldung am Server</h3>
+ <p>Nach der Installation am Server anmelden</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ ssh user@domain [-p 12345]
+ </code>
+ </pre>
+ <p>Beispiele für eine Domain: localhost, www.example.com, 127.0.0.1, [0:0:0:0:0:0:0:1], [::1]</p>
+ </section>
+ <section>
+ <p>Es kann auch der bei der Installation des Servers angegebene Host-Name verwendet werden, z.B.</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # "vm-ubuntu-server"
+ ssh user@vm-ubuntu-server
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Pakete aktualisieren</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Paketlisten updaten
+ sudo apt update
+
+ # Pakete updaten
+ sudo apt upgrade
+ </code>
+ </pre>
+ <p>sonstige Werkzeuge installieren</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ sudo apt install vim git curl build-essential
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ordner-Navigation</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # In einen Ordner gehen
+ cd [Ordner]
+
+ # Zum vorherigen Ordner gehen
+ cd -
+
+ # Längere Ordnerpfade sind auch möglich
+ # realtiv
+ cd a/b/c/d
+
+ # absolut
+ cd /var/www/html
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ordner erstellen und löschen</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Einen Ordner erstellen
+ mkdir my-folder
+
+ # Mehrere Hierarchien
+ mkdir -p a/b/c/d
+
+ # Mehrere Ordner
+ mkdir a b c
+
+ # Ordner rekrusiv löschen
+ rm -rf [Ordner]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ordner und Dateien kopieren und verschieben</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Ordner kopieren
+ cp -r quelle ziel
+
+ # Datei kopieren
+ cp quelle ziel
+
+ # Ordner und Dateien verschieben
+ mv quelle ziel
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Eigenen User anlegen</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # User anlegen
+ # -m => Home Ordner anlegen
+ # -G => zur angegeben Gruppe hinzufügen
+ # -s => Pfad zur Shell, in diesem Fall /bin/bash
+ useradd [user] -m -G sudo -s /bin/bash
+
+ # Passwort setzen
+ passwd [user]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Authentifizierung per SSH-Key-Pair</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Schlüsselpaar lokal erzeugen, falls nicht vorhanden
+ ssh-keygen
+
+ # Inhalt aus Datei kopieren:
+ cat ~/.ssh/id_rsa.pub
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Auf dem Server in folgenden Datei einfügen (Public Key pro Zeile):
+ ~/.ssh/authorized_keys
+ </code>
+ </pre>
+ <p>anschließend wird kein Passwort mehr beim Login benötigt</p>
+ </section>
+ <section>
+ <h3>Apache einrichten</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ sudo apt install apache2
+ </code>
+ </pre>
+ <p>Einrichtung überprüfen</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Oder im Browser aufrufen:
+ curl http://vm-ubuntu-server
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Aufbau der Apache-Konfiguration</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Hauptdatei, selten gebraucht
+ /etc/apache2/apache2.conf
+
+ # Verfügbare vhosts
+ /etc/apache2/sites-available/*.conf
+
+ # Aktivierte vhosts, Symlinks auf obige verfügbare
+ /etc/apache2/sites-enabled/*.conf
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>vhost (virtual host) einrichten</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ cd /etc/apache/sites-available
+
+ # 000-default.conf als Vorlage nutzen
+ # vm-ubuntu-server durch eigenen Host ersetzen
+ sudo cp 000-default.conf www.vm-ubuntu-server
+
+ # 'ServerName' einkommentieren und mit eigenem Host anpassen
+ # Weitere Optionen je nach Fall anpassen, z.B. 'DocumentRoot'
+ sudo vim www.vm-ubuntu-server
+
+ # vhost / Site aktivieren
+ sudo a2ensite www.vm-ubuntu-server.conf
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Domains lokal auf dem Entwicklungssystem bekannt machen:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Windows
+ # z.B. mit Notepadd++ editieren. Benötigt Administrator-Rechte
+ C:\Windows\System32\drivers\etc\hosts
+
+ # Unix
+ # z.B. mit vim editieren. Benötigt Administrator-Rechte
+ /etc/hosts
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # unten hinzufügen
+ [IP des Servers] www.vm-ubuntu-server
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Dateien zum Server kopieren</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # scp [Quelle] [Ziel], z.B.
+ scp index.html user@domain:~/html
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Richte die Sub-Domain <code>www.vm-ubuntu-server</code> ein und liefere unter dieser Adresse eine beliebige HTML-Seite aus. Dies kann eine minimale selbstgeschriebene oder eine beliebige komplexere aus den vergangenen Veranstaltungen sein, z.B. aus den CSS-Themen (jedoch keine NodeJS-Projekte).</p>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3