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 exact zelfde versies van alle componenten die in productie gebruikt worden.

Maak een Docker container voor de Django-omgeving (=backend-api)

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 enkel 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. 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 enkel 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 API-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.

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

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 voor dev 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 van Vue.js (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.js site met Vite te builden. Een aandachtspunt is de url naar de API die gebruikt wordt om gegevens te fetchen. Wij kiezen ervoor om die beschikbaar te maken op /api en dat is identiek op alle omgevingen. Mocht dat niet zo zijn dan moet dat variabel gemaakt worden.
• De Vue documentatie is prima en bevat veel documentatie die je kan helpen met bovenstaande. Gebruik ze dus!

Bouw een container die routeert naar /api

In Docker Compose is er geen ingebouwde manier om requests naar een specifieke url te sturen. Als je zoiets wil doen (en dat willen we, om zo gelijk mogelijk met staging/productie te zijn), dan moet je zelf daarvoor een container bouwen.

Je kan daarvoor uit veel opties kiezen, maar in de voorbeeldoplossing werd gewerkt met nginx. Ter inspiratie: dit is de configuratie die daarvoor gebruikt werd:

server {
    listen 80;

    location /api/ {
        proxy_pass http://backend-api:9000/;
        proxy_set_header Host $host;
    }

    location / {
        proxy_pass http://frontend-vue:80/;
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Het staat je vrij om andere oplossingen te gebruiken, maar zoals je ziet zal / naar de frontend-app gestuurd worden, en requests naar /api/ komen terecht bij de backend.

Als we zover zijn, wordt het tijd om Docker Compose te gaan gebruiken.

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.

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

tip

Mysql kan volledig geconfigureerd worden met environment variabelen. Gebruik die ook om te vermijden dat wachtwoorden ook op GIT terecht komen.

Maak een docker-compose setup op basis van deze containers

Tot nu toe werden de containers apart gebouwd en heb je ze ook getest.. Zorg met Docker Compose dat de containers beschikbaar zijn op poort 80. Daarvoor moet je dus de poortconfiguratie van de containers overschrijven in de compose file.

Bovenstaande setup zou je al moeten werkend krijgen op localhost.

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 --build uit te voeren. Door die --build zal de container telkens opnieuw gebouwd worden, erg belangrijk bij het ontwikkelen.. 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!