Statische Web Apps und Websites in Azure CI/DC-Integration in Azure Static WebApp

Mit den Azure App Services erhalten Entwickler eine leistungsfähige PaaS-Umgebung, die Continuous Integration von Haus aus unterstützt. Dieser Artikel demonstriert exemplarisch die GitHub-Anbindung beim Bereitstellen einer statischen WebApp mit JavaScript.

Mit dem Service „Azure Static WebApp“ lassen sich – auf Basis von Änderungen in einem von Azure unterstützten Coder-Repository – automatisch Web-Apps in Azure recht komfortabel bereitstellen. Sobald Sie eine solche Azure Static Web Apps-Ressource erstellen, interagiert Azure wahlweise direkt mit Azure DevOps oder GitHub.

Das jeweilige Quellcodeverwaltungssystem überwacht dann automatisch den gewünschten Branch auf Änderungen. Wenn Sie also einen neuen Commit an den überwachten Branch pushen oder Pull Requests für den überwachten Branch annehmen, sorgt die Azure-Plattform automatisch für das Ausführen eines Builds, um Ihre App und die API in Azure bereitzustellen.

Im Falle klassischer Azure Web Apps (mit .NET/ASP, NodeJS, PHP, Python, Go usw.) funktioniert das selbstredend genauso. Wir starten aber unsere kleine CI/CD-Workshop-Serie der Einfachheit halber am Beispiel einer Static-Web-App-Ressource.

Über statische Web Apps

Beliebte Frameworks und Bibliotheken für das Erstellen statischer Web-Apps sind beispielsweise React, Angular, Vue, Svelte oder Blazor, weil für auf diese Weise erstellte Apps kein serverseitiges Rendering benötigt wird. Solche Apps bestehen dann üblicherweise aus HTML-, JavaScript-, Image- und CSS-Ressourcen.

Bei einem herkömmlichen Webserver werden meist jedoch alle Ressourcen von einem einzelnen Webserver oder Loadbalancer über die ggf. benötigten API-Endpunkte bereitgestellt. Eine statische Web App wiederum stellt statische Ressourcen getrennt von einem herkömmlichen Webserver mit Hilfe von ggf. über auf der ganzen Welt verteilten Endpunkten bereit.

Mit Hilfe einer solchen „Verteilung“ lassen sich Dateien deutlich schneller zum Endbenutzer ausliefern, da sie diesem physisch näher sind. Außerdem werden API-Endpunkte mithilfe einer serverlosen Architektur gehostet, sodass überhaupt kein vollwertiger Back-End-Server erforderlich ist.

Statische Websites auf Azure Storage

In diesem Kontext drängt sich ein kleiner Exkurs auf: Eine weitere komfortable Art, eine statische Website auszuliefern, ist ein Azure Storage Account. Hier genügt es, unter „Datenverwaltung / Statische Webseite“ den Schalter „Statische Webseite“ auf „Aktiviert“ zu setzen sowie den Pfad zum Index-Dokument anzugeben und der Dienst generiert automatisch den Endpunkt: https://ditdewebsitesa.z1.web.core.windows.net/.

Wem das optisch nicht schön genug ist, kann Diesen mit einem CNAME-Eintrag auf eine selbst gehostete Domain umleiten.

Der Storage-Account-Dienst erzeugt dann automatischen einen Blob-Container mit dem Namen „$web“ in den Sie dann den Content ihrer statischen HTML oder JS-Seite kopieren. Eine herkömmliche Compute-Ressource (VM oder Docker-Container) zur Auslieferung der Webseite müssen Sie hier ebenso wenig bereitstellen, wie beim PaaS-Dienst Azure Static Web App.

Außerdem bezahlen Sie lediglich für die Storage-Kosten, also die Größe der Webseite, die deren Speicherung erfordert, die Transaktionen und die Abrufe. Dafür können Sie ein Speicherkonto im Gegensatz zu einer VM nicht pausieren, müssen sich aber auch nicht um Verfügbarkeit kümmern. Die Webseite ist je nach Art des Speicherkonto immer mit einer Verfügbarbarkeit von mindestens 99,9 Prozent (Cool-Tier mit LRS) ausgestattet.

Die Beschleunigung der Auslieferung zum Endanwender mittels Caching und Netzwerkoptimierung (Content Delivery) bekommen Sie damit zwar nicht automatisch, Sie können aber Content Delivery in einem Azure Storage Account unter „Sicherheit + Netzwerkbetrieb / Azure CDN“ leicht einrichten. Microsoft unterstützt neben der eigenen Endpunkt-Infrastruktur (Microsoft Standard) übrigens auch Verizon und Akamai. Doch zurück zu unserer Azure Static Web App.

Azure Static Web App

Wir haben uns für dieses Beispiel das CSS-Framework Bootstrap verwendet und eine einfache Demo-App für eine responsive Website mit Titel, Menü, einer Bild-Ressource und einem Button erstellt. Übrigens inhaltlich die gleiche Seite, die wir oben auch auf Azure Storage bereitgestellt haben. Das Erstellen von JavaScript-Websites ist natürlich nicht Anlass dieses Beitrages. Wir haben die Website lediglich zur als Vorbereitung zur CI/CD-Integration zuvor in ein eigenen GitHub-Repository „eingespielt“.

Nun können wir in Azure auf einfache Weise eine statische Web-App bereitstellen. Das Vorgehen zeigt die untenstehende Bildergalerie.

Bildergalerie

Bildergalerie mit 7 Bildern

Natürlich funktioniert das – außer im Rahmen der initialen Bereitstellung – auch für jede an GitHub geschickte oder in GitHub online vorgenommene Änderung.

(ID:47950706)