Azure Static Web Apps - Jamstack Hosting mit CI/CD

Azure Static Web Apps auf Microsoft Azure

Was ist Azure Static Web Apps?

Azure Static Web Apps ist ein Dienst, der Full-Stack-Web-Apps automatisch aus einem Code-Repository (GitHub oder Azure DevOps) baut und auf Azure deployt. Der Service kombiniert statisches Hosting von HTML/CSS/JavaScript mit serverlosen APIs über verwaltete Azure Functions, integrierter Authentifizierung und automatisch generierten Preview-Umgebungen für Pull Requests.

Der Workflow ist git-zentriert: Sie verbinden ein GitHub- oder Azure-DevOps-Repository, Static Web Apps richtet automatisch eine Build-Pipeline ein, und jeder Push oder gemergte Pull Request löst Build und Deployment aus. Statische Assets werden global verteilt ausgeliefert, wodurch sie näher an den Endnutzern liegen und schneller laden. API-Endpunkte laufen serverlos über Azure Functions, sodass kein eigener Backend-Server betrieben werden muss.

Es gibt zwei aktuelle Tarife: Free (für persönliche Projekte) und Standard (für produktive Workloads). Der frühere Dedicated-Plan wurde zum 31. Oktober 2025 eingestellt. Unterstützt werden moderne Frameworks wie Angular, React, Vue, Svelte und Blazor sowie Static-Site-Generatoren wie Hugo, Gatsby und VuePress; auch Next.js und Nuxt.js lassen sich deployen.

Kernfunktionen

• Automatisches Build & Deploy über GitHub- oder Azure-DevOps-Integration
• Verwaltete Azure Functions als integriertes API-Backend, alternativ Anbindung einer bestehenden Function App, Web App, Container App oder API Management-Instanz
• Global verteiltes CDN für statische Inhalte
• Kostenlose, automatisch erneuerte SSL-Zertifikate
• Custom Domains (Anzahl je nach Plan)
• Vorkonfigurierte Authentication-Provider (Microsoft Entra ID, GitHub); im Standard Plan zusätzlich benutzerdefinierte Provider-Registrierungen
• Automatisch generierte Staging-Umgebungen für Pull Requests
• Private Endpoints für VNet-Integration (nur Standard Plan)

Typische Anwendungsfälle

React/Vue SPA mit Serverless Backend

Frontend-Teams entwickeln Single-Page Applications mit React oder Vue, deployen automatisch bei jedem Git Push und nutzen Azure Functions für APIs. Authentifizierung läuft über vorkonfigurierte Provider wie GitHub oder Microsoft Entra ID.

Jamstack Docs-Site mit Hugo

Open-Source-Projekte hosten Dokumentation mit dem Hugo Static Site Generator. Markdown-Dateien im Repository werden automatisch zu HTML gebaut und über das globale CDN ausgeliefert. Pull Requests erhalten automatisch generierte Preview-URLs für Review vor dem Merge.

Landing Pages und Marketing-Sites

Marketing-Teams deployen Landing Pages mit Frameworks wie Next.js oder Static-Site-Generatoren und nutzen Preview-Umgebungen, um Varianten vor dem Live-Schalten zu testen.

Next.js- und Nuxt.js-Anwendungen

Teams deployen moderne Web-Anwendungen mit Next.js oder Nuxt.js, ergänzt um ein Azure-Functions-Backend für dynamische Logik, sofern die jeweilige Rendering-Strategie des Frameworks unterstützt wird.

Vorteile

• Kein eigener Server oder Infrastrukturbetrieb für Frontend und API notwendig
• Enge Integration in bestehende GitHub- oder Azure-DevOps-Workflows
• Automatische Preview-Umgebungen erleichtern Code-Reviews
• Kostenloser Einstieg über den Free Plan
• Nahtlose Anbindung an weitere Azure-Dienste über Managed Identity

Häufig gestellte Fragen zu Azure Static Web Apps

Was ist Azure Static Web Apps?

Azure Static Web Apps ist ein Dienst zum automatisierten Bauen, Deployen und Hosten von Web-Anwendungen aus einem Git-Repository, inklusive optionalem Serverless-Backend über Azure Functions und integriertem CDN.

Was ist der Unterschied zwischen Free und Standard Plan?

Der Free Plan eignet sich für persönliche Projekte und bietet keine SLA sowie eingeschränkte Limits (z. B. 3 Staging-Umgebungen, 2 Custom Domains). Der Standard Plan richtet sich an produktive Workloads und bietet eine SLA, Private Endpoints, mehr Staging-Umgebungen, mehr Custom Domains und benutzerdefinierte Authentication-Provider.

Was kostet Azure Static Web Apps?

Der Free Plan ist kostenlos. Der Standard Plan wird nutzungsbasiert pro App und Monat abgerechnet; aktuelle Preise finden sich auf der offiziellen Azure-Pricing-Seite. Zusätzliche Kosten können für Azure-Functions-Ausführungen und Datenverkehr über die inkludierten Kontingente hinaus anfallen.

Welche Frameworks werden unterstützt?

Unterstützt werden unter anderem Angular, React, Vue, Svelte, Blazor sowie Static-Site-Generatoren wie Hugo, Gatsby und VuePress. Next.js- und Nuxt.js-Anwendungen lassen sich ebenfalls deployen, abhängig vom jeweiligen Rendering-Modus des Frameworks.

Kann ich Serverless APIs nutzen?

Ja, Static Web Apps bindet verwaltete Azure Functions als API-Backend ein oder lässt sich mit einer bestehenden Function App, Web App, Container App oder API Management-Instanz verbinden. Der Zugriff erfolgt über einen sicheren Reverse-Proxy ohne zusätzliche CORS-Konfiguration.

Wie funktioniert Authentifizierung?

Static Web Apps bietet vorkonfigurierte Authentication-Provider wie Microsoft Entra ID und GitHub. Im Standard Plan lassen sich zusätzlich benutzerdefinierte Provider-Registrierungen und eigene Rollen über Functions verwalten.

Integration mit innFactory

Als Microsoft Solutions Partner unterstützt innFactory Sie bei der Implementierung moderner Jamstack-Architekturen mit Azure Static Web Apps. Wir helfen bei Framework-Auswahl, CI/CD-Setup und Backend-API-Design.

Kontaktieren Sie uns für eine unverbindliche Beratung zu Azure Static Web Apps und modernen Web-Architekturen.