Frontend-hosting op AWS met goede performance, lage kosten en hoge schaalbaarheid

Rik Tonnard

Geschreven door Rik Tonnard op 25-5-2022

In deze blog post zullen we zien hoe we frontend-applicaties kunnen hosten op AWS zonder veel gedoe, maar met heel veel voordelen. Deze manier levert heel goede performance op voor lage kosten. Hoewel we hier AWS gebruiken, is deze methode ook prima te gebruiken met soortgelijke diensten op andere Cloud-platforms.

AWS S3

Hosting op S3

Frontend-applicaties zijn, na het build-proces, meestal niets meer dan statische bestanden. Het is vaak een enkel index-bestand, wat scripts, en andere bestanden zoals afbeeldingen en fonts. Om deze beschikbaar te maken voor web browsers, hebben we echter nog steeds een web server nodig om deze bestanden aan te bieden.

Die web server kan op een aantal plekken in je stack leven. Als je al een backend-applicatie hebt, kan het framework wat je gebruikt vaak statische bestanden aanbieden. Web frameworks zoals Ruby on Rails en Django kunnen dit doen. Deze web frameworks zijn echter meestal niet zo goed op het gebied van performance. Ze zijn geoptimaliseerd voor developer experience. Omdat statische bestanden hosten relatief simpel is, is developer experience minder belangrijk en kunnen we beter de focus leggen op performance.

Eén manier om performance te verbeteren is door een simpelere web server te gebruiken die meer performance kan leveren. Nginx en Apache zijn hier erg geschikt voor. Je kan met deze servers zelf geen applicaties bouwen, maar voor het aanbieden van statische bestanden of het doorsturen van andere requests naar de application server als reverse proxy zijn ze erg geschikt.

Dit is al een mooie verbetering ten opzichte van het aanbieden door de application server. We kunnen echter nog verder gaan door gebruik te maken van de voordelen van de Cloud. Een web server zoals Nginx of Apache zullen we zelf moeten onderhouden. We zullen de configuratie zelf moeten schrijven, we zullen deze up to date moeten houden om security vulnerabilities te vermijden en we moeten zelf zorgen dat deze meeschaalt met het verkeer. Als het drukker wordt, kan het nodig zijn om meer web servers te draaien om het verkeer aan te kunnen.

Er zijn Cloud-producten om ons werk uit handen kunnen nemen. AWS biedt bijvoorbeeld de service S3 aan, waar we bestanden op kunnen zetten. S3 kan deze bestanden ook aanbieden aan web browsers, en fungeert in dit geval als de web server voor deze bestanden. Superhandig, want AWS zorgt ervoor dat dit altijd veilig is en vooral ook heel snel. We hoeven zelf niet bij of af te schalen, AWS regelt dat voor ons. Ook kunnen we er van uit gaan onze frontend altijd beschikbaar is. S3 slaat de data standaard op in meerdere Availability Zones, en een availability zone bevat één of meerdere data centers die volledig los van elkaar draaien.

Performance verder verbeteren met CloudFront

We kunnen nog verder gaan, met een andere dienst van AWS: CloudFront. CloudFront heeft servers over de hele wereld staan die als cache kunnen fungeren. Een Content Delivery Network, of CDN, wordt dit meestal genoemd. S3 slaat de bestanden standaard in een regio op, bijvoorbeeld Ierland, Frankfurt of het oosten van de VS. Gebruikers dichtbij waar de data staat opgeslagen, kan dan snel de applicatie laden. Haal je data echter op van verder weg, dan duurt dit langer.

Met CloudFront vraagt de eindgebruiker de bestanden niet op bij S3, maar bij CloudFront. CloudFront zorgt ervoor dat de gebruiker dit automatisch doet bij de dichtstsbijzijnde Edge Location. Deze Edge Location haalt bij de eerste aanvraag de bestanden op bij S3, maar bewaart deze ook. Als vervolgens een andere gebruiker in dezelfde regio hetzelfde bestand opvraagt, dan heeft CloudFront deze al en kan hierdoor deze heel snel terugsturen naar de gebruiker.

CloudFront kan op deze manier voor S3 worden gezet, maar ook voor een backend-applicatie. Hiermee kan ook extra performance worden gewonnen. Ook kan CloudFront op basis van de URL het verkeer naar de juiste bron doorsturen.

Caching to the max

Wat CloudFront doet, is in feite caching. De data wordt vastgehouden op een locatie, waardoor deze niet berekend hoeft te worden of te worden opgehaald uit een externe dienst. Caching kan op meerdere lagen gebeuren. CloudFront gebruikt caching om data korter bij de eindgebruiker te brengen. Web browsers gebruiken ook caching om ervoor te zorgen dat de data op de computer van de eindgebruiker zelf blijft staan.

Caching komt performance vaak sterk ten goede, maar heeft ook een nadeel: als je cache oude data bevat, zal de gebruiker ook de oude bestanden krijgen.

Gelukkig hoeft dit bij de bestanden voor frontend-applicaties geen probleem te zijn. Het voordeel wat we hier hebben is dat we zelf de frontend-applicatie aanbieden via een HTML-bestand. We kunnen ervoor zorgen dat deze altijd de laatste versie van alle bestanden laat ophalen.

Dit doen we met behulp van fingerprinting. Dit betekent dat we een hash van de inhoud van het bestand in de bestandsnaam zetten. Iedere keer dat we een bestand aanpassen krijgt deze hierdoor een nieuwe bestandsnaam, waardoor de cache, zoals CloudFront, deze niet herkent, en deze opnieuw wordt opgehaald bij S3. Bij volgende requests zit deze weer in de cache en is de request supersnel. Ook kunnen we zo onze bestanden maximaal laten cachen door web browsers, zonder dat een gebruiker ooit oude bestanden krijgt.

Om dit te gebruiken, zul je in je build-proces moeten zorgen voor de fingerprinting. De meeste web frameworks en tooling ondersteunt dit al. Hier kun je bijvoorbeeld vinden hoe je dit doet met:

Op deze bestanden kun je vervolgens in S3 de `Cache-Control` headers instellen, via de object metadata instellen. Omdat we steeds nieuwe bestanden maken kunnen we de caching zo instellen dat de caches dit weten, en nooit bestanden onterecht opnieuw hoeven we op de te halen. Hoe je de cache control het beste kan instellen voor deze bestanden, lees je op MDN.

Bij Cloud Legends kunnen we je helpen


Klinkt dit nou allemaal als abracadabra, en zoek je iemand die hier mee kan
helpen. Neem gerust contact met ons, en we leggen je graag meer uit.

Bij Cloud Legends staat privacy hoog in het vaandel. Wij vinden het belangrijk dat er zorgvuldig wordt omgegaan met de data die onze bezoekers achterlaten. De data wordt enkel gebruikt voor analyses, zodat we de gebruikerservaring van onze websitebezoekers kunnen verbeteren. Tevens zorgen de cookies ervoor dat er relevante advertenties worden getoond. Lees meer over het gebruik van cookies in ons privacy statement.

Ik ga akkoord