Azure Storage liefert statischen Content aus
In der aktuelle Preview Version des Azure Storage Dienstes gibt es die Möglichkeit statische Webseiten zu hosten. Was zunächst relativ unspannend klingt, ist auf den zweiten Blick doch eine interessante Option, denn „statische Webseiten“ bedeutet ja nur das keine Logik oder Preprocessing auf dem Webserver läuft, schließt aber nicht die Dynamik von Typescript bzw. Javescript und CSS aus.
SPAs z.B. mit Angular funktionieren
So kann man z.B. eine Angular SPA über diesen Weg zur Verfügung stellen ohne einen eigenen Webserver oder eine Azure Function. Aufrufe von REST- /WebApis z.B. Azure Functions sind über die Angular SPA natürlich möglich, da diese ja nicht über den Webserver laufen, sondern direkt vom Client / Webbrowser initiiert werden. Möchte man als URL seinen eigenen Domainnamen haben, ist dies ebenfalls durch einen CNAME Eintrag im DNS möglich.
Einrichten des Azure Storage
Die Einrichtung eines passenden Azure Storage Accounts folgt dem üblichen Ablauf. Im Azure Portal ganz oben auf „+Create a resource“ klicken. In dem erscheinenden Blade „Storage“ und anschließenden „Storage account“ auswählen.
Im Blade zur Konfiguration des Storage account muss „Storage V2“ ausgewählt werden. Der Rest ist Standard.
Die Erstellung des Storage Accounts dauert ca. 30 Sekunden. Nachdem der Storage Account erstellt wurde, diesen öffnen und in der Sektion „Settings“ auf „Static website (preview)“ klicken. Hier bei „Static website“ den Switch auf „Enabled“ stehen und die Startseite ( normalerweise index.html) und eine Errorpage eintragen und auf „Save“ klicken.
Danach werden weitere Informationen eingeblendet. Im Hintergrund wurde ein Blob-Container in diesem Azure Storage Account mit dem Namen „$web“ erstellt. Zu sehen ist jetzt auch der URL (Primary endpoint) über den später die Website aufgerufen werden kann.
Azure CDN als Latenz Booster
Setzt man jetzt noch das Azure CDN ( Content Delivery Network ) davor hat man überall in der Welt sehr geringe Latenzen bzgl. statischem Content und den notwendigen Assets! Ideal wenn die Anwendung viele Bilder, PDFs, usw. zur Verfügung stellt.
Azure Storage befüllen
Um die Webseite oder Angular App und Assets im Azure Storage zur Verfügung stellen kann man dies direkt im Azure Portal, per Azure Storage Explorer oder per VS Code Extension. Wichtig ist die eigentliche Webseite in den Container „$web“ kopiert wird, nur dort wird nach der spezifizierten Startseite (index.html) gesucht.
Preise
Sollten sich die Preise von Azure Storage durch diese Erweiterung nicht verändern, starten die Kosten bei €0,0166 pro GB zzgl. €0,0037 pro 10.000 Lesevorgänge. Die Kosten können einfach über den Azure Preisrechner ermittelt werden. https://azure.microsoft.com/de-de/pricing/calculator/
Bitte aber voreingestellte Werte anpassen, es ist sehr unwahrscheinlich dass für eine Angular SPA 1 TB Speicherkapazit benötigt wird.
Fazit
Mit diesem Ansatz bekommt man sehr günstig eine performante und unkomplizierte Lösung für das Hosting z.B. einer Angular App. In Verbindung mit Azure CDN ist der Ansatz sogar bzgl. Latenz unabhängig davon in welcher Region der Azure Storage gehostet wird.