---
# System prepended metadata

title: SQ05B

---

> [name=Lucas]
> [time=Wed, Mar 21, 2023]
> [name=Lukas]
> [time=Wed, Mar 21, 2023] [color=#378fb2]
> [hackmd.io/@LucLukWissM324/HkOwKeDgh](https://hackmd.io/@LucLukWissM324/HkOwKeDgh)

# SQ05B

## Aufgabe 1: 
##### Konzept wie mit der ToDo App geabreitet werden soll:

<div style="display:flex; flex-direction:column; justify-content:center; align-items:center;">
    <img src="https://i.imgur.com/nVL0xn0.png" style="filter:drop-shadow(0 0 5px black); border-radius:10px;">
    <p style="margin-top:2vh;">
        Benutzer bennent sein ToDo
    </p>
    <img src="https://i.imgur.com/Ytkq82D.png" style="margin-top:2vh; filter:drop-shadow(0 0 5px black); border-radius:10px;">
    <p style="margin-top:2vh;">
        Benutzer wählt die Priorität des ToDo's
    </p>
    <img src="https://i.imgur.com/sggHK9h.png" style="margin-top:2vh; filter:drop-shadow(0 0 5px black); border-radius:10px;">
    <p style="margin-top:2vh;">
        Benutzer fügt ToDo hinzu
    </p>
    <img src="https://i.imgur.com/yooDOfV.png" style="margin-top:2vh; filter:drop-shadow(0 0 5px black); border-radius:10px;">
    <p style="margin-top:2vh;">
        Sobald ToDo erledigt ist, kann der Benutzter sie als "Done" markieren/löschen
    </p>
    <hr style=" width:100%;">
    <h3>
        Ablauf Diagramm
    </h3>
    <img src="https://i.imgur.com/zehUz5a.png" style="margin-top:2vh; filter:drop-shadow(0 0 5px black); border-radius:10px;">
</div>



---


## Aufgabe 2
##### Installatio des Ubuntu Server

Auf https://ubuntu.com/download/desktop haben wird das Server .iso heruntergeladen.
<div style="display:flex; flex-direction:column; justify-content:center; align-items:center;">
    <img src="https://i.imgur.com/HKNeaw0.png" style="filter:drop-shadow(0 0 5px black); border-radius:10px;">
<p style="text-align:center; margin:2vh">
        Nun haben wir den Ubuntu Server in VirtualBox installiert.
    </p>
<img src="https://i.imgur.com/Z8n6mgK.png" style="filter:drop-shadow(0 0 5px black); border-radius:10px;">

<p style="text-align:center; margin:2vh">
       2GB Ram und 2 CPU Cores sollten für diesen zweck des Deploy Servers auzsreichend sein.
    </p>
    <img src="https://i.imgur.com/MBRMTE8.png" style="filter:drop-shadow(0 0 5px black); border-radius:10px;">
    
<p style="text-align:center; margin:2vh">
        Login: Student<br>
PW: Student

Anschlissen haben wir für das ubuntu System ein Update durchgeführt
    </p>
</div>

```bash
sudo apt-get update

```

Für die Installation des Tomcat haben wir folgende Dokumantation verwendet: https://linuxhint.com/install_apache_tomcat_server_ubuntu_2204/

```bash
sudo apt install openjdk-11-jdk
```

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/jIVC4tg.png" style="filter: drop-shadow(0 0 5px black); border-radius:4px;">
</div>

Tomcat benötigt nun noch eine konfiguration für den User.
```bash
sudo useradd -m -U -d /opt/tomcat -s /bin/false tomcat
```
Finden des apt package auf Ubuntu:
```bash
sudo apt-cache search tomcat
```
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/v4qz91p.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Installation vom Tomcat 9
```bash
sudo apt install tomcat9 tomcat9-admin
```
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/lWU5yvT.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Nun den Tomcat Server Starten
>!!! Dies muss nach jedem neustart ausgeführt werden. Oder in die System Konfig hinzugefügt werden.
```bash
sudo systemctl start tomcat9
```
mit folgendem befehl kann überprüft werden ob der Server korrekt Konfiguriert ist. 
```bash
ss -ltn
```
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/5TGR0vm.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Listen auf Port 8080 - der Apache ist gestarted.

Um auch von ausserhalb der VM auf die Seiten zugreifen zu können benötigt es noch eine port Weiterleitung in VirtualBox. Port 8001 auf 8080(http).

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/uTySrt2.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

:heavy_check_mark: Zugriff auf den Tomcat Apache von ausserhalb des VirtualBox UbuntuServer ist erfolgreich. (localhost:8001)

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/4N95cfL.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

---

## Aufgabe 3.
##### Gehe zu den Pipelines und lade dir die Artefakte runter.
Unter Ci/CD -> Jobs kann man die Artefakte herunterladen.

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/ia6V0D6.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/qfnO8Tc.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>


Die Zip datei mit den Artefakten:
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/ahkN0F7.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/TjtyjCd.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>


---

## Aufgabe 4.
##### Deploye die Artefakte in die VM unter den richtigen Pfaden (Tomcat/Java und/oder Apache)
Um das deplomyment auf der VM zu vereinfachen haben wir die Artefakte auf ein neues git Repository deponiert.
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/FlQFa5W.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Auf dem Server haben wir dann per git pull die Artefakte heruntergeladen.
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/6Vug2wG.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Für das Frontend haben wir die Artefakte in den tomcat9/webapps/ROOT Ordner kopiert.
```bash
cp build/ /var/lib/tomcat9/webapps/ROOT
```
Und dann war die Frontend Applikation bereits Online.
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/VCWRyY4.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>

Die Artefakte des Backends sind ein single ".war" file.
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/MF6g8jL.png" style="filter: drop-shadow(0 0 5px black); border-radius: 2px;">
</div>

Die File muss nun nur noch auf dem Ubuntu Server in den Ordner '/var/lib/tomcat9/webapps/ROOT/' kopiert werden
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/5JFtn1K.png" style="filter: drop-shadow(0 0 5px black); border-radius: 2px;">
</div>


---

## Aufgabe 5.
##### Überprüfe, dass die Server starten und die Seite von einem Browser aufgerufen werden kann(Grundfunktion)

Die Komplette Webapp ist nun erreichbar:
<div style="display:flex; justify-content:center; margin:5vh;">
<img src="https://i.imgur.com/oTWO0rZ.png" style="filter: drop-shadow(0 0 5px black); border-radius: 5px;">
</div>


Was eigentlich fast zu erwarten war, ist, dass die Kommunikation zwischen dem Frontend und dem Backend nicht ganz funktioniert. Dafür wären weitere Änderungen am Backend notwendig, was jedoch nicht Teil der Sidequest ist. Der in der Browser-Konsole ersichtliche CORS-Fehler bedeutet jedoch, dass das Backend auch auf dem Server deployed wurde. 
