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 eine vollständig verwaltete Hosting-Lösung für moderne Web-Anwendungen, die statisches HTML/CSS/JavaScript aus GitHub oder Azure DevOps automatisch buildet, deployt und über ein globales CDN ausliefert. Der Service kombiniert Static Hosting mit Serverless APIs (Azure Functions), Built-In Authentication und Preview Environments für Pull Requests in einer integrierten Plattform.

Der Workflow ist Git-zentriert: Sie verbinden Ihr GitHub- oder Azure DevOps-Repository, Static Web Apps erstellt automatisch eine GitHub Actions oder Azure Pipelines Workflow-Datei, und jeder Commit triggert Build und Deployment. Das Build-System unterstützt moderne Frameworks (React, Vue, Angular, Next.js, Blazor) und Static Site Generators (Hugo, Jekyll, Gatsby) out-of-the-box. Preview Environments werden automatisch für Pull Requests erstellt mit eindeutigen URLs für Testing vor Merge.

Serverless APIs über integrierte Azure Functions ermöglichen Backend-Logik ohne separate API-Infrastruktur. Authentication Providers (GitHub, Microsoft Entra ID, Twitter, Google) sind vorkonfiguriert ohne Custom Code. Global CDN (Azure Front Door) cached statische Assets weltweit für niedrige Latenz. Custom Domains und automatische SSL-Zertifikate (Let’s Encrypt) sind in beiden Tiers inkludiert.

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. Ein E-Commerce-Startup baut ein Produkt-Katalog-SPA: Frontend in React deployed via GitHub Actions, Backend-APIs (Produktsuche, Warenkorb) als Functions, Authentication via GitHub OAuth. Entwicklungskosten null Euro (Free Tier), nur Function-Invocation-Kosten.

Jamstack Docs-Site mit Hugo

Open-Source-Projekte hosten Dokumentation mit Hugo Static Site Generator. Markdown-Files in Git werden automatisch zu HTML gebaut und global via CDN ausgeliefert. Contributors öffnen Pull Requests, erhalten Preview-URLs für Review, und nach Merge ist die Änderung live in Sekunden. Ein OSS-Projekt mit 500 Docs-Seiten nutzt Free Tier ohne Kosten.

Landing Pages mit A/B Testing

Marketing-Teams deployen Landing Pages mit Next.js und testen Varianten über Preview Environments. Jede Variante läuft in separater PR-Preview-URL, Traffic wird via Client-Side-Routing oder Feature-Flags distribuiert. Nach A/B-Test-Abschluss wird die gewinnende Variante gemerged. Ein SaaS-Unternehmen testet 10 Landing-Page-Varianten parallel ohne Infrastructure-Overhead.

Progressive Web App mit Offline Support

Mobile-First-Anwendungen nutzen Static Web Apps für PWA-Hosting mit Service Workers für Offline-Capability. Static Assets werden via CDN cached, API-Calls via Functions abgewickelt. Push Notifications über Web Push API integriert mit Functions. Eine News-App bietet Offline-Lesen und Sync bei Reconnect.

Multi-Tenant SaaS Frontend

SaaS-Anbieter hosten Customer-Portals als Static Web Apps mit Custom Domains pro Tenant. Jeder Kunde erhält eine Subdomain (kunde1.app.com), alle zeigen auf dieselbe Static Web App, Backend-APIs identifizieren Tenant via Domain. Ein B2B-SaaS hostet 100 Kundenportale auf einer Static Web App-Instanz.

Best Practices für Azure Static Web Apps

Nutzen Sie Staging Environments für Testing

Preview Environments werden automatisch für Pull Requests erstellt. Testen Sie Änderungen in der Preview-URL vor Merge. Integrieren Sie E2E-Tests (Playwright, Cypress) in CI/CD gegen Preview-URLs. Nach Merge wird Preview automatisch gelöscht.

Optimieren Sie Build-Performance

Cachen Sie Dependencies in GitHub Actions (npm/yarn cache). Nutzen Sie Incremental Builds für Frameworks, die es unterstützen. Minimieren Sie Build-Output (Tree Shaking, Code Splitting). Typische Build-Zeit: unter 2 Minuten.

API Routes für Backend-Logik

Erstellen Sie /api-Folder mit Azure Functions für Backend. Functions laufen im gleichen Security-Context wie Frontend (shared Authentication). Nutzen Sie Managed Identity für Zugriff auf Azure-Services (Cosmos DB, Storage) ohne Secrets.

Custom Domains und SSL

Fügen Sie Custom Domains im Portal hinzu, erstellen Sie CNAME-Record zu Static Web App-URL. SSL-Zertifikat wird automatisch via Let’s Encrypt provisioniert und erneuert. Apex-Domains (ohne www) erfordern ALIAS- oder ANAME-Record (Provider-abhängig).

Authentication für geschützte Inhalte

Aktivieren Sie Built-In Authentication über staticwebapp.config.json. Definieren Sie Protected Routes und erlaubte Roles. Nutzen Sie vorkonfigurierte Providers (GitHub, AAD) ohne Custom OAuth-Code. User-Info ist via /.auth/me JSON-Endpoint verfügbar.

Häufig gestellte Fragen zu Azure Static Web Apps

Was ist im Free Tier inkludiert?

Free Tier bietet 100 GB Bandwidth pro Monat, unbegrenzte Apps, CI/CD, Custom Domains, SSL, Staging Environments und Basic Functions (1 Mio Invocations/Monat inklusive). Keine Kreditkarte erforderlich. Ausreichend für die meisten kleinen bis mittelgroßen Sites.

Was ist der Unterschied zwischen Free und Standard?

Standard bietet unbegrenzte Bandwidth, 99.95% SLA, Private Endpoints für VNet-Integration, erweiterte Routing-Regeln und höhere Functions-Quotas. Kostet 8 Euro/app/Monat. Wählen Sie Standard für produktive High-Traffic-Sites mit SLA-Anforderungen.

Welche Frameworks werden unterstützt?

Alle modernen Frontend-Frameworks und Static Site Generators: React, Vue, Angular, Svelte, Next.js (Static Export), Nuxt (Static), Gatsby, Hugo, Jekyll, 11ty, Astro, SvelteKit, Blazor WebAssembly. CLI-basierte Build-Tools werden automatisch erkannt.

Wie funktioniert CI/CD?

Bei Repository-Verbindung erstellt Static Web Apps eine GitHub Actions oder Azure Pipelines YAML-Datei. Jeder Push zu Main-Branch triggert Build (npm install, npm run build) und Deploy. Pull Requests erhalten Preview Environments. Workflow ist customizable.

Kann ich Serverless APIs nutzen?

Ja, erstellen Sie /api-Folder mit Azure Functions (Node.js, Python, .NET). Functions werden zusammen mit Frontend deployed. API-Routes sind unter /api/* verfügbar. Functions teilen Authentication-Context mit Frontend. Ideal für Form-Submissions, Datenbankzugriffe, externe API-Proxies.

Unterstützt Static Web Apps Server-Side Rendering?

Nein, Static Web Apps ist für pre-rendered statische Sites optimiert. Für SSR (Server-Side Rendering) mit Next.js oder Nuxt nutzen Sie Azure App Service oder Container Apps. Static Web Apps unterstützt Next.js Static Export (next export) und Nuxt Static Generation.

Wie funktioniert Authentication?

Built-In Authentication unterstützt GitHub, Microsoft Entra ID, Twitter, Google, Apple als vorkonfigurierte Providers. Definieren Sie geschützte Routes in staticwebapp.config.json. User-Info ist via /.auth/me verfügbar. Keine Custom OAuth-Implementation notwendig. Logout via /.auth/logout.

Was kostet Static Web Apps?

Free Tier ist kostenlos (100 GB Bandwidth/Monat). Standard kostet 8 Euro/app/Monat (unbegrenzte Bandwidth). Azure Functions-Invocations kosten extra nach Consumption-Pricing (erste 1 Mio/Monat frei). Typische Small App: 0 Euro/Monat (Free Tier). High-Traffic App: 8 Euro + Functions-Kosten.

Ist Azure Static Web Apps DSGVO-konform?

Static Web Apps nutzt globales CDN, daher werden statische Assets weltweit repliziert. Für DSGVO-Compliance vermeiden Sie personenbezogene Daten in statischen Files. Nutzen Sie EU-Regionen für Azure Functions-Backend. Authentication-Cookies und Session-Daten können in EU-Regionen gehalten werden via Region-Konfiguration.

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.