Microsoft Azure Static Web Apps

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

• Produktseite
• Preis
• Dokumentation

Empfohlene Lernmaterialien

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

Beschleunigen Sie die App-Entwicklung mit verwalteter globaler Verfügbarkeit für statisches Inhaltshosting und dynamischer Skalierung für integrierte serverlose APIs. Profitieren Sie von hoher Produktivität mit einer massgeschneiderten lokalen Entwicklungsoberfläche, CI/CD-Workflows zum Erstellen und Bereitstellen Ihrer App sowie von einheitlichen Hosting- und Verwaltungsfunktionen in der Cloud.

Funktionalitäten

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

• Authentifizierenung/Autorisieren mit Azure AD, GitHub oder anderen Identitätsanbietern und Rollen

• Dynamischen serverlosen 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

• Benutzerdefinierten Domänen und kostenlosen SSL-Zertifikaten

• 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 natürlich sehr angenehm, da bei jeder Änderung im Quellcode die Webanwendung automatisch veröffentlicht wird, z.B. 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.