Azure Storage als Webserver

Azure Storage liefert statischen Content aus

In der aktuellen 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, dass keine Logik oder Preprocessing auf dem Webserver läuft, schließt aber nicht die Dynamik von Typescript bzw. Javascript und CSS aus.

SPAs funktionieren z.B. mit Angular

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.

Azure Storage als Webserver - Storage - 20072018-Mobile-41KB, generic.de AG

Im Blade zur Konfiguration des Storage Account muss „Storage V2“ ausgewählt werden. Der Rest ist Standard.

 

Azure Storage als Webserver - Create Storage - 20072018-Mobile-14KB, generic.de AG

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“ stellen und die Startseite (normalerweise index.html) und eine Errorpage eintragen und auf „Save“ klicken.

 

Azure Storage als Webserver - Static Website - 20072018-Mobile-30KB, generic.de AG

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. In unserem Beispiel wäre das hier.

Azure Storage als Webserver - URL - 20072018-Mobile-54KB, generic.de AG

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 vornehmen. Wichtig ist, dass die eigentliche Webseite in den Container „$web“ kopiert wird, nur dort wird nach der spezifizierten Startseite (index.html) gesucht.

Azure Storage als Webserver - Web- 20072018-Mobile-21KB, generic.de AG

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.
Bitte aber die voreingestellten Werte anpassen, es ist sehr unwahrscheinlich, dass für eine Angular SPA 1 TB Speicherkapazität 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.