In vier stappen image hosting instellen met Azure Storage Accounts & Content Delivery Network

Voor dit stappenplan is er vanuit gegaan dat er al een Azure subscription met de benodigde opties is opgezet en basiskennis van de Azure portal bekend is. Volg deze link voor meer informatie over het opzetten van een Azure subscription.

Stap 1: een storage account in Azure opzetten

Voeg een nieuw Storage Account resource toe aan je Azure subscription. Maak hier indien gewenst een nieuwe resource groep voor aan. De volgende instellingen zijn belangrijk:

• Network access: Enable public access from all networks
• Network routing: Microsoft routing

Zodra het storage account is aangemaakt, ziet de overview pagina van deze nieuwe resource er als het goed is ongeveer zo uit:

Klik vervolgens aan de linkerzijde van het scherm onder Data management op Static website. Activeer op deze pagina de static website optie. Vervolgens zie je hier dat er een nieuwe Azure Storage container is aangemaakt, $web. Daarnaast is ook een Primary endpoint aangemaakt, hiermee kan overal op het internet de $web folder worden bereikt.

Wanneer er afbeeldingen of andere bestanden aanwezig zijn in de container, zijn deze nu al te bereiken met de volgende url:

{Primary endpoint}/{document name}

Praktisch is dit alles wat nodig is om afbeeldingen te hosten op Azure, maar het kan nog beter!

Stap 2: het Content Delivery Network aanzetten

Een van de opties van het nieuwe storage account is Azure CDN. Klik aan de linkerzijde van het scherm onder Security + networking op Azure CDN.

Creëer hier een nieuw endpoint. Verzin een naam en maak een keuze voor Pricing tier. Voor nu is “Microsoft CDN” voldoende. Het CDN endpoint name is het subdomein dat bij het opvragen van de afbeeldingen in de url zal staan: {subdomein}.azureedge.net, tenzij een ander domein als endpoint gebruikt wordt, hierover onderstaand meer informatie.

Nu kunnen de afbeeldingen via het CDN endpoint worden gedownload:
{subdomein}.azureedge.net/{document name}. Bijvoorbeeld sharevalue.azureedge.net/logo.png

Op het eerste gezicht ziet het resultaat er misschien hetzelfde uit, maar de voordelen van een CDN zijn op grotere schaal pas echt van toepassing. Standaard distribueert Azure CDN wereldwijd de inhoud van het storage account. Zo worden op meerdere servers over heel de wereld afbeeldingen in caches vastgehouden, met als doel om de eindgebruiker, waar dan ook, zo snel mogelijk van dienst te kunnen zijn.

Stap 3: het CDN configureren

Open voor meer opties voor het configureren van het CDN het endpoint waarmee je de bestanden wilt aanroepen. Mogelijk moet je hier nog een nieuw endpoint aanmaken, dit kan door op het + icoon links boven te klikken.

Aan de linkerkant zijn vervolgens meerdere opties te zien:

Onder Custom domains kan een eigen domein gebruikt worden, in plaats van de standaard gegeven {subdomein}.azureedge.net.

Een aantal opties die veel impact kunnen hebben op de performance zijn:

• Compression (al is het ook slim om hier zelf iets voor te implementeren, zoals automatische thumbnail generatie via event grid)
• Caching rules
• Optimization (voor complexere opstellingen, niet geschikt voor static website)

Stap 4: afbeeldingen uploaden naar het storage account

Voor het uploaden van bestanden naar het storage account zijn veel opties. Hier is een voorbeeld van code voor het uploaden van een bestand in C#:

In dit voorbeeld wordt gebruik gemaakt van de packages: Azure.Storage.Blobs van Microsoft, en Mimemapping van Matthew Little.

Zo heb je in 4 stappen een oplossing voor image hosting in je web applicatie! Naast deze opstelling zijn er natuurlijk nog veel meer mogelijke keuzes. Met deze oplossing zal je niet snel worden gelimiteerd in capaciteit, en zal de response time voor de meeste doeleinden zeer snel zijn.