public/web-development/presentation.git

			@@ -4611,17 +4611,10 @@
			<section>
			<p>Wichtige Aspekte beim produktiven Betrieb von Anwendungen</p>
			<ul>
			<li>Stabilität</li>
			<li>Zugriffsschutz</li>
			<li>Ausfallsicherheit</li>
			<li>Sicherheitsupdates</li>
			</ul>
			</section>
			<section>
			<p>Wichtige Aspekte beim produktiven Betrieb von Anwendungen</p>
			<ul>
			<li>Zugriffsschutz</li>
			<li>Ausfallsicherheit</li>
			<li>Sicherheitsupdates</li>
			</ul>
			</section>
			<section>
			@@ -4630,8 +4623,7 @@
			<li>Webserver</li>
			<li>Proxies</li>
			<li>Laufzeitumgebungen</li>
			<li>Application-Server</li>
			<li>Prozess-Manager</li>
			<li>Application-Server / Prozess-Manager</li>
			<li>Remote-Zugänge</li>
			</ul>
			</section>
			@@ -4645,6 +4637,440 @@
			<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

			# Standard HTML Pfad bei Apache
			/var/www/html
			</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.conf

			# 'ServerName' einkommentieren und mit eigenem Host anpassen
			# Weitere Optionen je nach Fall anpassen, z.B. 'DocumentRoot'
			sudo vim www.vm-ubuntu-server.conf

			# 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:~/
			</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>
			<h3>NodeJS und PM2 einrichten</h3>
			</section>
			<section>
			<p>Installation mittels fnm (<code>fast node manager</code>)</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# Abhängigkeit 'unzip' installieren
			sudo apt install unzip

			# https://github.com/Schniz/fnm
			curl -fsSL https://fnm.vercel.app/install \| bash

			# Anschließend die .bashrc neuladen
			. ~/.bashrc

			# Aktuelle NodeJS LTS installieren
			fnm install --lts

			# Test
			node -v
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# PM2
			npm install -g pm2
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Richte auf dem Server ein kleines NodeJS-Projekt ein, welches eine beliebige Website zur Verfügung stellt (selber implementieren oder ein bestehendes kopieren). Kopiere das Projekt mit den bekannten Befehlen auf den Server an einen beliebigen Ort. Teste anschließend die Lauffähigkeit im Browser per IP und Port der Anwendung.</p>
			</section>
			<section>
			<h3>Einrichten eines Reverse-Proxy</h3>
			</section>
			<section>
			<img data-src="/assets/images/proxy-types.svg">
			</section>
			<section>
			<p>Aktivieren des benötigten Moduls</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# Apache 2 enable module
			sudo a2enmod proxy
			</code>
			</pre>
			<p>Neue Direktiven</p>
			<ul>
			<li>ProxyPass</li>
			<li>ProxyPassReverse</li>
			<li>ProxyRequests</li>
			</ul>
			</section>
			<section>
			<p>Notwendige Anpassungen am vhost</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# DocumentRoot entfernen / auskommentieren
			#DocumentRoot /var/www/html

			# Aus Sicherheitsgründen Forward Proxy deaktivieren
			ProxyRequests Off

			# ProxyPass [Quelle] [Ziel] (auf Port achten) => Weiterleitung
			ProxyPass / http://127.0.0.1:9000/

			# ProxyPassReverse [Quelle] [Ziel] (auf Port achten) => URL-Rewrite bei Redirects
			ProxyPassReverse / http://127.0.0.1:9000/
			</code>
			</pre>
			<p>Apache neu starten, um die Änderungen am vhost zu übernehmen</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			sudo systemctl reload apache2
			</code>
			</pre>
			</section>
			<section>
			<p>In das Verzeichnis der NodeJS-Anwendung wechseln und per PM2 starten</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			pm2 start --name my-super-app index.js
			</code>
			</pre>
			<p>Anschließend sollte die NodeJS-Anwendung unter der bereits bekannten Domain erreichbar sein.</p>
			</section>
			<section>
			<h3>Wireshark</h3>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Installiere Wireshark und starte anschließend einen Paket-Mitschnitt auf dem WLAN-Adapter. Setze den Filter oben auf "<code>ip.dst == 123.123.123.123</code>" (IP eurer virtuellen Maschine eintragen),
			besuche die in der VM eingerichtete Webseite in einem Browser und beobachte den Datenverkehr in Wireshark</p>
			</section>
			<section>
			<h3>Aktivierung von HTTPS</h3>
			</section>
			<section>
			<p>SSL-Zertifikat erstellen</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			openssl req -newkey rsa:4096 -x509 -sha256 -days 3650 -nodes -out cert.pem -keyout key.pem
			</code>
			</pre>
			<p>Anschließend die Fragen beantworten.</p>
			<p>Die eigentliche Domain für das Zertifikat ist bei "CN" (Common Name) einzutragen</p>
			</section>
			<section>
			<p>Aktivierung des entsprechenden Apache-Moduls:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			sudo a2enmod ssl
			</code>
			</pre>
			<p>Leserechte für den Rest der Welt an den Zertifikatsdateien setzen</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			chmod +r cert.pem key.pem
			</code>
			</pre>
			</section>
			<section>
			<p>Anpassung / Erstellung vhost in <code>sites-available</code></p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			sudo cp example.conf example-ssl.conf
			</code>
			</pre>
			<p>Den vhost für HTTP / Port 80 so konfigurieren, dass dieser nach HTTPS / Port 443 weiterleitet:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# example.conf
			# Sämtliche Proxy-Direktiven und andere Inhalt
			# dienende Direktiven auskommentieren:
			#ProxyPass ...
			#ProxyPassReverse ...

			# hinzufügen (auf Ziel-Domäne achten)
			Redirect Permanent / https://example.com
			</code>
			</pre>
			</section>
			<section>
			<p>Den vhost für HTTPS / Port 443 anpassen</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# example-ssl.conf
			# Port anpassen
			<VirtualHost *:443>

			# hinzufügen (auf korrekte Pfade achten)
			SSLEngine on
			SSLCertificateFile "/.../cert.pem"
			SSLCertificateKeyFile "/.../key.pem"
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# neuen vhost für SSL aktivieren:
			sudo a2ensite example-ssl.conf
			</code>
			</pre>
			<p>Anschließend den Apache neu starten:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			sudo systemctl restart apache2
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Inspiziere erneut den Datenverkehr zwischen eurem Browser und dem Server mittels Wireshark. Was fällt auf?</p>
			</section>
			<section>
			<p>Datenverkehr eines Browser in Wireshark sichtbar machen:</p>
			<p>CMD öffnen:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			REM Umgebungsvariable setzen:
			set SSLKEYLOGFILE=%USERPROFILE%\Desktop\sslkey.log
			REM Beliebigen Browser per Konsole starten (Ordner nach Bedarf vorher wechseln):
			chromium.exe
			REM oder
			firefox.exe
			</code>
			</pre>
			<p>Die TLS-Schlüssel werden nun vom Browser in der festgeleten Datei geloggt</p>
			</section>
			<section>
			<p>Eben angegebene Datei in Wireshark einstellen:</p>
			<p>Bearbeiten > Einstellungen > Protocols > TLS > (Pre)-Master-Secret log filename</p>
			</section>
			</section>
			</div>
			</div>