Development setup

Eerst en vooral maken we een omgeving die kan gedeeld worden door het frontend-ontwikkelteam zodat die kunnen gaan ontwikkelen op een systeem dat erg dicht aanleunt bij de productiesetup.

We gebruiken daarvoor uiteraard Docker, maar ook Docker Compose. Ontwikkelaars zullen dan met het commando docker compose up op eender welke machine een realistische ontwikkelomgeving kunnen opzetten, met de exacte versies van alle componenten die in productie gebruikt worden.

Maak een Docker container voor de Django-omgeving

Specifieke requirements:

• Vertrek in de Dockerfile van een lege python-container waar je de verdere componenten zelf toevoegt.
• Maak de api beschikbaar op poort 9001.
• Zorg dat gunicorn gebruikt wordt om de site te serven.
• Bij het opstarten van de container moeten ook de migraties uitgevoerd worden. Zo zijn we zeker dat de databank op elk moment de juiste versies heeft van alle componenten. Om deze stappen mogelijk te maken at boot time zal je een klein script moeten maken, dat meteen ook het entrypoint van je container vormt. Voor de juiste commando's om de migraties voor te bereiden en uit te voeren kan je de documentatie van Django raadplegen. Zorg dat je zeker niet enkele de algemene migratie doet, maar ook die van de site (events) zelf!
• Maak bij de opstart meteen ook een superuser aan voor Django, zodat je kan aanmelden in het admin-paneel.
• Standaard zal django gebruik maken van een SQLite db, wat niet veel meer is dan een bestand. Op dit moment is dat prima, later in de opgave zullen we dat aanpassen.

Als het gelukt is om de image te bouwen en de container te starten, zou het moeten lukken om te surfen naar deze site. Je krijgt dan een overview van het aantal (1) API endpoints. Om het niet nodeloos complex te maken, is er geen authenticatie nodig op deze API.

Bouw je frontend-omgeving op basis van Vue

Uiteindelijk (na afloop van dit project) zullen we voor de Vue applicatie drie verschillende containers bouwen:

• Een eerste voor de ontwikkelaar.
• Een tweede voor de staging omgeving
• Een derde voor de productieomgeving.

Hou daar rekening mee met de naamgeving van je Dockerfiles. (bijvoorbeeld Dockerfile-dev)

Bij het bouwen van de image hou je ook rekening met onderstaande:

• Maak deze container beschikbaar op poort 8001
• Gebruik de development mode van Vue/Vite voor de development container. Zo heeft de ontwikkelaar ook de mogelijkheid om de development tools in de browser te installeren en te gebruiken. Je kan dat ook testen in de browser door de Vue dev extensie te installeren.
• Bij deze testomgeving gebruik je de ingebouwde dev-server (dus NIET builden)
• Koppel je lokale storage (specifiek de src-directory) in de container als een mount. Zo zal elke wijziging die de ontwikkelaar doet meteen zichtbaar zijn in zijn browser. Op deze manier kan je snel ontwikkelen met de garantie dat je exact hetzelfde resultaat zal zien op je staging en productie.
• Dezelfde code kan dan wel gebruikt worden om de Vue site met Vite te builden, maar er zal toch een minimale wijziging nodig zijn om ervoor te zorgen dat elke omgeving naar de juiste API connecteert (je development code met de development-API, de staging-site met de staging-API en de productiecode met de productie-API). Werk daarvoor met een environment-file voor elke omgeving ('mode'). Daar kan de Vue-documentatie je opnieuw bij helpen. Bij elke build zal je dan de juiste .env.xxxxxxx file naar je container kopieren zodat de juiste API url gebruikt wordt. In de file /frontend/components/ApiFetch.vue kan je zien dat deze omgevingsvariabele opgepikt wordt als import.meta.env.VITE_API_HOST.
• De Vue documentatie is prima en bevat veel documentatie die je kan helpen met bovenstaande. Gebruik ze dus!

Test de combinatie van deze twee containers

Nu moet je in staat zijn om een development setup actief te maken. Als je de twee containers tegelijk actief zet moet de site volledig kunnen werken: de events moeten zichtbaar worden op de pagina.

Over CORS...

In realiteit is het soms een uitdaging om een client en een API aan elkaar te koppelen. Heel vaak zit CORS in de weg. Dat is een beveiliging die ervoor zorgt dat niet zomaar elke client een request kan doen naar je API, enkel requests van hetzelfde domein worden vertrouwd. Zeker op het moment dat je ontwikkelt kan dat flink vervelend zijn.

Elk framework heeft wel een manier om deze CORS-beveiliging aan te passen en te configureren. Om jullie de zoektocht te besparen werd deze aanpassing al gedaan in de Django config.

Vervang de lokale Sqlite databank door mysql

Tot nu toe gebruikten jullie SQLite als ingebouwde databank. Vervang deze door een Docker container met MySQL 8.

In de settings.py van Django zal je uiteraard wel wat moeten wijzigen...

tip

Mysql kan volledig geconfigureerd worden met environment variabelen. Een match made in heaven als je werkt met containers...

Maak een docker-compose setup op basis van deze twee containers

Tot nu toe werden de containers apart gebouwd en gestart. Zorg met Docker Compose dat de containers beschikbaar zijn op poort 9000 en 8000. Daarvoor moet je dus de poortconfiguratie van de containers overschrijven in de compose file.

Bovenstaande setup zou je al moeten werkend krijgen op localhost.

warning

Let wel op: in de vue app wordt verwezen naar de api via de omgevingsvariabele die je in de env file configureerde. Als je dat doet op basis van een DNS-naam, dan zal je je lokale host file moeten aanpassen zodat je vanop je eigen pc deze API kan bereiken. Docker compose zal voor een automatische dns-link zorgen tussen de containers, maar daar heeft je browser op je eigen pc geen weet van.

Je moet op dit punt kunnen surfen naar de vue-website, die op zijn beurt de data uit de api toont. Als je een aanpassing doet in de src files, zou die ook meteen zichtbaar moeten zijn op de site.

tip

het opstarten van mysql kan wel een aantal seconden duren. Als je Django container sneller is, zal die crashen omdat nog geen connectie kan gelegd worden met de databank. Er zijn slimme manieren om dat op te lossen, maar het kan ook eenvoudig: zet bijvoorbeeld een sleep commando in je django-entrypoint, zodat die enkele seconden wacht om te connecteren met de databank.

testen van de dev-setup

De dev-setup kan getest worden door alle images van je systeem te verwijderen en docker compose up uit te voeren. Als bovenstaande prima lukte, dan zal je setup na enkele seconden volledig werken, en zal je ook kunnen ontwikkelen in je dev-container via de source code die gemount werd.

Plaats de instructies voor het gebruik van deze setup in een korte Readme-file, en je bent klaar met het eerste deel. Je zou dit dus kunnen bezorgen aan de ontwikkelaars zodat zij verder kunnen. Voor jullie betekent het dat er kan gestart worden met het configureren van de staging- en productie-omgeving!