Kostenlose Azure Static Web Apps – Einrichtung und Bereitstellung erklärt von Tim Corey

Was Azure Static Web Apps sind und warum sie wichtig sind

Zu Beginn des Videos erklärt Tim Corey, dass Azure Static Web Apps Ihnen ermöglichen, so viele Webanwendungen bereitzustellen, wie Sie möchten, und das kostenlos. Er hebt hervor, dass diese Apps global über Microsoft Azure-Datenzentren gehostet werden und über ein Content Delivery Network bereitgestellt werden, was hohe Verfügbarkeit, Lastverteilung und niedrige Latenz für Benutzer sicherstellt, die HTTP-Anfragen stellen.

Tim weist darauf hin, dass diese Web-Apps Authentifizierung, API-Apps und Integration mit RESTful APIs unterstützen. Selbst in der kostenlosen Stufe bieten Azure Static Web Apps verbesserte Sicherheit und hohe Leistung, ohne dass Server, virtuelle Maschinen oder zugrunde liegende Infrastruktur verwaltet werden müssen. Dies ist einer der wichtigen Vorteile, eine Plattform als Dienst zu nutzen, anstatt Azure-virtuelle Maschinen oder lokale Server zu verwalten.

Er erklärt, dass Azure Static Web Apps ideal für Frontend-Webanwendungen sind, wie HTML, CSS, JavaScript, React und Blazor WebAssembly, jedoch nicht für Anwendungen, die serverseitige Verarbeitung erfordern.

Umfang des Videos und Azure-Lernkontext

Tim erklärt, dass dieses Video eher ein fokussiertes Tutorial bietet als einen vollständigen Überblick über alle Azure-Dienste. Während Azure App Service viele Sprachen, mobile Apps, API-Apps und sogar Docker-Container unterstützt, konzentriert sich dieses Video auf einen bestimmten Dienst innerhalb von Microsoft Azure.

Er erwähnt, dass wenn Zuschauer vertiefte Themen wie Sicherheit, Kostenmanagement und unternehmenskritische Anwendungen wollen, diese Themen in seinen Azure-Kursen behandelt werden. Das Ziel hier ist jedoch zu zeigen, wie schnell eine Web-App mit Azure Static Web Apps und kontinuierlicher Bereitstellung erstellt und bereitgestellt werden kann.

Erstellen eines GitHub-Repositorys für eine statische Website

Tim beginnt damit, ein neues GitHub-Repository zu erstellen, und erklärt, dass GitHub kostenlos ist und nahtlos mit Azure-Diensten integriert wird. Dieses Repository wird den Quellcode für eine einfache statische Website enthalten.

Er macht das Repository privat, fügt eine README-Datei hinzu und wählt eine .gitignore-Datei, die für Visual Studio und Visual Studio Code geeignet ist. Tim klärt, dass obwohl er Visual Studio Code verwendet, der gleiche Prozess mit Visual Studio funktioniert.

Dieses Repository stellt den Ausgangspunkt für das Hosting von Websites mit Azure dar. Tim betont, dass Azure Static Web Apps direkt aus dem Quellcode bereitstellen, was eine einfache und zuverlässige kontinuierliche Bereitstellung ermöglicht.

Erstellen einer einfachen HTML-Webanwendung

Mit Visual Studio Code erstellt Tim eine index.html-Datei, die als Einstiegspunkt für die Website dient. Er verwendet Emmet-Verknüpfungen, um eine grundlegende HTML-Struktur zu generieren, und fügt minimalen Inhalt hinzu, um die Funktionalität zu demonstrieren.

Dieser Schritt zeigt, wie grundlegende Webanwendungen bereitgestellt werden können, ohne Backend-Dienste, Datenbanken oder Server. Tim stellt klar, dass diese Einfachheit beabsichtigt ist, da Azure Static Web Apps speziell für Frontend-Workloads konzipiert sind.

Sobald er fertig ist, verpflichtet er die Änderungen und pusht den Quellcode zu GitHub, was später im Prozess die Bereitstellungspipeline aktiviert.

Erstellen einer Azure Static Web App im Azure-Portal

Tim wechselt zum Azure-Portal und erstellt eine neue Static Web App-Ressource. Er erklärt die Bedeutung der Erstellung einer Ressourcengruppe und weist darauf hin, dass Ressourcengruppen das Verwalten von Ressourcen, das Bereinigen von Umgebungen und das Vermeiden unnötiger Kosten erleichtern.

Er hebt hervor, die kostenfreie Stufe zu wählen, da sie schnell, zuverlässig und ausreichend für die meisten kleinen Unternehmenswebsites und persönlichen Projekte ist. Während Pläne im Azure App Service einen App-Dienstplan und monatliche Gebühren erfordern können, beseitigen Azure Static Web Apps in der kostenlosen Stufe diese Komplexität vollständig.

Tim erwähnt kurz, dass seine eigene Website auf Azure Static Web Apps läuft und zeigt so die reale Nutzung dieses Dienstes in der Produktion.

GitHub verbinden und kontinuierliche Bereitstellung aktivieren

Tim verbindet die Azure Static Web App mit GitHub und wählt das Repository und den Branch aus. Er erklärt, dass Azure automatisch einen GitHub Actions-Workflow einrichtet, um die kontinuierliche Bereitstellung zu übernehmen.

Dieser Workflow erübrigt manuelle Bereitstellungsschritte. Jedes Mal, wenn sich der Quellcode ändert, wird die Web-App automatisch neu erstellt und bereitgestellt. Tim weist darauf hin, dass dies eine Schlüsselrolle moderner Cloud-Plattformen ist und einer der Hauptvorteile von Microsoft Azure für das Webhosting.

Bereitstellungstoken und Sicherheitskonfiguration

Tim navigiert zu den GitHub-Repository-Einstellungen, um das als Geheimnis gespeicherte Bereitstellungstoken zu zeigen. Dieses Token ermöglicht sichere Kommunikation zwischen GitHub und Azure.

Er erklärt, dass diese Einrichtung verbesserte Sicherheit bietet, ohne dass Entwickler manuell Anmeldeinformationen konfigurieren müssen. Das Azure Static Web App API-Token stellt sicher, dass nur autorisierte Workflows die Anwendung bereitstellen können.

Die bereitgestellte statische Website anzeigen

Nach Abschluss der Bereitstellung öffnet Tim die Live-Website direkt aus dem Azure-Portal. Die Website ist nun öffentlich zugänglich und in der Cloud gehostet.

Er erklärt, dass derselbe Prozess für andere Frontend-Frameworks funktioniert, da sie letztendlich statische Dateien produzieren, die effizient von Azure Static Web Apps bereitgestellt werden können. Kein App-Dienstplan, keine virtuellen Maschinen oder Backend-Server erforderlich.

Bereitstellen einer Blazor WebAssembly-Anwendung

Tim zeigt dann die Bereitstellung einer eigenständigen Blazor WebAssembly-Anwendung und betont den Unterschied zwischen Blazor-Web-Apps und Blazor WebAssembly.

Er erklärt, dass Blazor WebAssembly vollständig auf dem Client läuft, was es für Azure Static Web Apps geeignet macht. Serverseitige Technologien wie ASP.NET Core MVC, PHP oder Java-Backends benötigen stattdessen Azure Web Apps.

Dieser Abschnitt betont, dass Azure Static Web Apps für reine Client-Webanwendungen konzipiert sind.

Erstellen und Testen der Blazor-Anwendung

Mit Visual Studio erstellt Tim das Blazor WebAssembly-Projekt, wählt .NET 9 und aktiviert Funktionen wie HTTPS und Unterstützung für progressive Web-Apps.

Er führt die App lokal aus, um zu bestätigen, dass sie vor der Bereitstellung funktioniert, und unterstreicht so die besten Praktiken für Produktionsreife. Nach der Überprüfung erstellt er ein GitHub-Repository direkt aus Visual Studio und pusht den Quellcode.

Blazor in Azure Static Web Apps bereitstellen

Tim erstellt eine weitere Static Web App-Ressource und verbindet sie mit dem Blazor-Repository. Er hebt hervor, dass der GitHub Actions-Workflow die Pfade automatisch für Blazor konfiguriert, wie z.B. das Ausgabeverzeichnis.

Dies zeigt, wie Azure mehrere Programmiersprachen und Frameworks unterstützt, ohne manuelle Konfiguration zu erfordern. Die Plattform abstrahiert die zugrunde liegende Infrastruktur und Build-Komplexität.

Build-Prozess und Abschluss der Bereitstellung

Tim erklärt, dass Blazor-Builds länger dauern wegen Kompilierungs- und Optimierungsschritten. Azure reduziert die Anwendung während der Bereitstellung und verbessert die Leistung.

Nach Abschluss ist die Blazor WebAssembly-App live, global zugänglich und auf Microsoft Azures Cloud-Infrastruktur gehostet.

Zusätzliche Funktionen von Azure Static Web Apps

Tim streift kurz andere Funktionen, darunter:

• Benutzerdefinierte Domains

• API-Integration mit eingebauter Sicherheit

• Bereitstellungs-Slots wie Entwicklungs-, Staging- und Produktions-Slots

Er erklärt, dass APIs automatisch gesperrt sind, um unbefugten Zugriff zu verhindern und die Integration zu vereinfachen.

Bereinigen von Ressourcen mit Ressourcengruppen

Zum Abschluss löscht Tim die Ressourcengruppe und zeigt, wie Azure Entwicklern erlaubt, alle zugehörigen Ressourcen auf einmal zu entfernen. Dies ist besonders wichtig bei der Erprobung von Cloud-Diensten, um unbeabsichtigte Kosten zu vermeiden.

Er warnt, dass das Löschen einer Ressourcengruppe dauerhaft ist und nicht rückgängig gemacht werden kann.

Wann man Azure Static Web Apps verwenden sollte - und wann nicht

Tim schließt ab mit der Klarstellung, dass Azure Static Web Apps nicht für serverseitige Workloads wie PHP-Anwendungen, MVC-Apps oder Blazor-Web-Apps geeignet sind.

Sie sind ideal für Frontend-Web-Anwendungen gebaut mit HTML, JavaScript, CSS, React, Angular, Vue und Blazor WebAssembly. Da alles auf dem Client läuft, können diese Apps vollständig kostenlos gehostet werden.

Wie Tim Corey im gesamten Video zeigt, bieten Azure Static Web Apps eine einfache, sichere und voll verwaltete Möglichkeit, moderne Web-Anwendungen mit Microsoft Azure bereitzustellen – ohne sich um Server, Skalierung oder Infrastruktur kümmern zu müssen.