Static Web Apps

Microsoft Azure Static Web Apps

Ein Dienst, der Full-Stack-Web-Apps automatisch erstellt und bereitstellt.

ProduktseitePreisDokumentation

Empfohlene Lernmaterialien

• Lernvideos auf Microsoft Learn
• Lernpfad mit drei Modulen zum Erstellen und Bereitstellen von Azure Static Web Apps.
• #30DaysOfSWA

Die App-Entwicklung wird beschleunigt durch verwaltete globale Verfügbarkeit für statisches Inhaltshosting und dynamische Skalierung für integrierte serverlose APIs. Hohe Produktivität wird ermöglicht durch eine massgeschneiderte lokale Entwicklungsoberfläche, CI/CD-Workflows zum Erstellen und Bereitstellen der App sowie einheitliche Hosting- und Verwaltungsfunktionen in der Cloud.

Funktionalitäten

Die Liste der Funktionen von Azure Static Web Apps ist lang und illustriert, wie viel mit diesem Dienst möglich ist. Nachfolgend ist eine Auswahl der wichtigsten Funktionen mit Direktlinks in die Produktdokumentation zu finden, wo sie im Detail beschrieben sind:

• Authentifizierung/Autorisierung mit Azure AD, GitHub oder anderen Identitätsanbietern und Rollen

• Dynamische serverlose APIs mit Azure Functions

• Benutzerdefinierte Routen und Navigation

• Benutzerdefinierte HTTP-Header und MIME-Typen

• Vorschauumgebungen (Preview Environments)

• Eingebaute Unterstützung für CI/CD mit GitHub Actions oder Azure DevOps

• Verbindung mit einer Datenbank

• Benutzerdefinierte Domänen und kostenlose SSL-Zertifikate

• Unterstützung für verschiedene Webframeworks wie Angular, React, Svelte, Hugo

Schnellstart

Grundsätzlich gliedert sich die Bereitstellung einer Azure Static Web App in zwei Schritte:

1. Aufbau der Infrastruktur (Provisionierung)
2. Veröffentlichung der Webanwendung (Deployment)

Im ersten Schritt der Provisionierung wird die Azure Static Web App erstellt, d.h. in einer Azure-Ressourcengruppe wird eine neue Ressource des Typs Azure Static Web App angelegt. Dies kann auf verschiedene Arten erfolgen:

• ClickOps im Azure Portal, siehe Tutorial
• ClickOps in Visual Studio Code mit der Azure Static Web Apps Erweiterung, siehe Video
• Azure-Befehlszeilenschnittstelle (Azure CLI), siehe Tutorial
• Terraform, siehe Projektbeispiele
• Veröffentlichen mit einer Bicep-Datei, siehe Tutorial
• Veröffentlichen mit einer ARM-Vorlage, siehe Tutorial

Im zweiten Schritt, dem Deployment, wird die Webanwendung in die Azure Static Web App eingespielt. Auch hier gibt es verschiedene Möglichkeiten:

• Manuelle Veröffentlichung mit der SWA CLI, siehe Tutorial und Projektbeispiele
• Automatisierte Veröffentlichung mit GitHub Actions, siehe auch GitHub Dokumentation und Projektbeispiele

Die automatisierte Veröffentlichung mit GitHub Actions ist vorteilhaft, da bei jeder Änderung im Quellcode die Webanwendung automatisch veröffentlicht wird, beispielsweise bei einem Commit in den Hauptzweig. Die dafür nötige Workflow-Datei wird in den obigen Provisionierungsszenarien automatisch als Commit im Repository der Webanwendung erstellt, wenn in diesem Schritt jeweils das GitHub-Repository angegeben wird, in dem die Webanwendung liegt. Dafür wird ein interaktives Login bei GitHub durchgeführt. Ferner ist es möglich, diesen Schritt mit einem persönlichen Zugriffstoken (PAT) zu automatisieren.

Projektbeispiele

Die folgenden Projekte folgen offiziellen Tutorials und zeigen verschiedene Möglichkeiten zur Provisionierung und zum Deployment von Azure Static Web Apps. Die Beispiel können als Vorlage für eigene Projekte dienen.

Projekt	Provisionierung	Deployment	Kommentar
Einfache statische Website	Azure CLI	SWA CLI	mit Code-Beispiel für Custom Domain
Einfache statische Website	Terraform	GitHub Actions	mit Code-Beispiel für Custom Domain
React basierte Webseite mit API	Azure CLI	GitHub Actions
Website basierend auf Hugo	Azure CLI	GitHub Actions
Webseite basierend auf MkDocs	Terraform	GitHub Actions