Update Umsetzung

Projektarbeit-3/Umsetzung.md

@@ -52,3 +52,44 @@ noch nicht sicher, ob in die jeweilige Komponente
 * Docker
 * Domain
 * SSL-Zertifikat (Let's encrypt)
+
+Da es sich um ein Web-Projekt handelt, lag die Idee nahe, es auf einem Server in der Cloud zu deployen. Wir haben uns hierbei für den Anbieter [Hetzner](https://hetzner.cloud) entschieden. Dort läuft ein Ubuntu 20.04 Server mit zwei CPU Kernen und 2 Gigabyte Arbeitsspeicher. Dies ist vollkommen ausreichend für dieses Projekt. In der Serverkonsole kann man CPU, Festplatte und Netzwerk beobachten.
+<table>
+  <tr>
+    <td><img src="uploads/93374f2c68b565c51c08f586a09f6bbe/image.png"></img></td>
+    <td><img src="uploads/653e0302062832053f44d33441ea7dbc/image.png"></img></td>
+  </tr>
+</table>
+Anmerkung: Da dieses Projekt aus zwei Komponenten besteht, war es nicht mehr möglich es auf einem statischen Hoster, wie z.B. Gitlab-Pages, zu deployen.
+
+Der Webserver unserer Wahl war Nginx, er bietet exzellente Performance für statische Dateien (unser Angular Frontend) und den Reverse-Proxy Modus für das Backend im Docker Container.
+
+Nginx ist so konfiguriert, dass er immer auf eine sichere HTTPS-Verbindung umleitet. Dies wird durch einen einfachen 301-Redirect erreicht
+```
+server {
+    listen 80;
+    listen [::]:80;
+    server_name it-schwarz.net www.it-schwarz.net;
+    return 301 https://$host$request_uri;
+}
+```
+Um ein SSL-Zertifikat zu bekommen, muss eine Domain angegeben werden, es wurde hierfür eine geparkte Domain eines Teammitglieds genutzt. Auf diese wurde ein Let's Encrypt Zertifikat über den Certbot gelegt. Zur einfacheren Konfiguration wurde nur TLS 1.3 verwendet. Dies bedeutet zwar, dass ältere Browser ausgeschlossen werden, aber dies ist vollkommen ausreichend für diese Art von Projekt, da alle gängigen Browser TLS 1.3 unterstützen. Die Konfiguration wurde mit der Hilfe von dem [Mozilla SSL Config Generator](https://ssl-config.mozilla.org/#server=nginx&version=1.17.7&config=modern&openssl=1.1.1d&ocsp=false&guideline=5.6) generiert.
+
+Weiter musste eine "location"-Direktive für das Frontend angegeben werden, und eine für das Backend.
+```
+location /api/ {
+    proxy_pass "http://localhost:8080/api/";
+}
+
+location / {
+   try_files $uri $uri/ /index.html;
+}
+```
+Die erste Direktive nimmt alle URLs mit "api" und leitet sich an unser Backend weiter. Die zweite leitet alle anderen Requests auf die index.html Seite weiter, da Angular als Single-Page-App alle Routen über die gleiche Datei verarbeitet.
+Anmerkung: Es ist nicht schlimm, dass auf das Backend intern ohne HTTPS zugegriffen wird, da Nginx allen anderen SSL Traffic nach außen abdeckt, und auf der Loopback-Adresse des Servers keine Gefahr besteht.
+
+Wie Oben schon erwähnt läuft das Backend in einem Docker Container, was weitere Konfiguration der Maschine überflüssig macht. Es muss lediglich der Container an das Loopback-Interface des Servers gebunden werden.
+```bash
+docker run -v $(pwd):/app -p 127.0.0.1:8080:80 --restart always -d geovis-backend
+```
+Port 8080 ist hierbei derselbe Port wie in der Nginx Konfiguration oben.