Merge pull request #92 from SELab-2/docs/keycloak

Breidt documentatie uit met Keycloak

README.md

@@ -10,7 +10,7 @@ Projectopgave</a></span>
 </p>
 
 <ul align="center" style="list-style-type: none">
-<li>Projectleider: Fransisco Van Langenhove (<a href="https://github.com/Gabriellvl">@Gabriellvl</a>)</li>
+<li>Projectleider: Fransisco Gabriel Van Langenhove (<a href="https://github.com/Gabriellvl">@Gabriellvl</a>)</li>
 <li>Technische lead: Tibo De Peuter (<a href="https://github.com/tdpeuter">@tdpeuter</a>)</li>
 <li>Systeembeheerder: Timo De Meyst (<a href="https://github.com/kloep1">@kloep1</a>)</li>
 <li>Customer relations officer: Adriaan Jacquet (<a href="https://github.com/WhisperinCheetah">@WhisperinCheetah</a>)</li>
@@ -21,17 +21,28 @@ en lessen kunnen samenstellen hun leerlingen en hun vooruitgang kunnen opvolgen.
 
 ## Installatie
 
+Om de applicatie in te stellen voor een productieomgeving, volg de [installatiehandleiding](https://github.com/SELab-2/Dwengo-1/wiki/Administrator:-Productie-omgeving).
+
+Alternatief kan je één van de volgende methodes gebruiken om de applicatie lokaal te draaien.
+
 ### Quick start
 
 1. Installeer Docker en Docker Compose op je systeem (zie [Docker](https://docs.docker.com/get-docker/) en [Docker Compose](https://docs.docker.com/compose/)).
 2. Clone deze repository.
-3. Voer `docker compose up` uit in de root van de repository.
+3. In de backend, kopieer `.env.example` (of `.env.development.example`) naar `.env` en pas de variabelen aan waar nodig.
+4. Voer `docker compose up` uit in de root van de repository.
+5. Optioneel: Configureer de applicatie aan de hand van de [configuratiehandleiding](https://github.com/SELab-2/Dwengo-1/wiki/Administrator:-Productie-omgeving#dwengo-1-configuratie).
 
 ```bash
 docker compose version
 git clone https://github.com/SELab-2/Dwengo-1.git
-cd Dwengo-1
+cd Dwengo-1/backend
+cp .env.example .env
+# Pas .env aan
+nano .env
+cd ..
 docker compose up
+# Configureer de applicatie
 ```
 
 ### Handmatige installatie
@@ -46,8 +57,9 @@ De tech-stack bestaat uit:
 
 - **Frontend**: TypeScript + Vue.js + Vuetify
 - **Backend**: TypeScript + Node.js + Express.js + TypeORM + PostgreSQL
+- **Identity provider**: Keycloak
 
-Voor meer informatie over de keuze van deze tech-stack, zie [designkeuzes](https://github.com/SELab-2/Dwengo-1/wiki/Design-keuzes).
+Voor meer informatie over de keuze van deze tech-stack, zie [designkeuzes](https://github.com/SELab-2/Dwengo-1/wiki/Developer:-Design-keuzes).
 
 ## Bijdragen aan Dwengo-1
 

backend/README.md

@@ -20,3 +20,10 @@ npm run dev
 npm run build
 npm run start
 ```
+
+## Keycloak configuratie
+
+Tijdens development is het voldoende om gebruik te maken van de keycloak configuratie die automatisch ingeladen wordt.
+
+Voor productie is het ten sterkste aangeraden om keycloak manueel te configureren.
+Voor meer informatie, zie de [administrator-handleiding](https://github.com/SELab-2/Dwengo-1/wiki/Administrator:-Productie-omgeving#installatie-en-server-configuratie).

docs/architecture/schema.py

@@ -1,30 +1,49 @@
-from diagrams import Cluster, Diagram
+from diagrams import Cluster, Diagram, Edge
 from diagrams.custom import Custom
 from diagrams.onprem.certificates import LetsEncrypt
-from diagrams.onprem.container import Docker
 from diagrams.onprem.database import PostgreSQL
 from diagrams.onprem.logging import Loki
 from diagrams.onprem.monitoring import Grafana
 from diagrams.onprem.network import Nginx
+from diagrams.programming.flowchart import InputOutput
 from diagrams.programming.framework import Vue
 from diagrams.programming.language import Nodejs
-from diagrams.programming.flowchart import InputOutput
 
 with Diagram("Dwengo-1 architectuur", filename="docs/architecture/schema", show=False):
-    reverse_proxy = Nginx("reverse proxy")
+    ingress = Nginx("Reverse Proxy")
-    reverse_proxy >> LetsEncrypt("SSL")
+    certificates = LetsEncrypt("SSL")
 
-    with Cluster("Docker"):
+    with Cluster("Dwengo VZW"):
-        Docker()
-
-        frontend = Vue("/")
-        backend = Nodejs("/api")
-        reverse_proxy >> frontend
-        frontend >> backend >> InputOutput("MikroORM") >> PostgreSQL()
-
-        backend >> Loki("logging") >> Grafana("monitoring")
-
-    with Cluster("Dwengo"):
         dwengo = Custom("Dwengo", "../../assets/img/dwengo-groen-zwart.png")
 
-    backend >> dwengo
+    with Cluster("Dwengo-1"):
+        frontend = Vue("/")
+        backend = Nodejs("/api")
+        identity_provider = Custom("IDP", "../../assets/img/keycloak.png")
+
+        database = PostgreSQL("Database")
+        orm = InputOutput("MikroORM")
+        orm >> Edge(label="map") << database
+
+        with Cluster("Observability"):
+            logging = Loki("Logging")
+            logging << Edge(color="firebrick", style="dashed") << Grafana("Monitoring")
+
+        dependencies = [
+            dwengo,
+            logging,
+            orm
+        ]
+
+        backend >> dependencies
+
+    service = [
+        frontend,
+        backend,
+        identity_provider,
+        certificates
+    ]
+
+    ingress \
+    >> Edge(color="darkgreen") \
+    << service