Webanwendungen und Apps sind aus unserem Alltag nicht mehr wegzudenken. Ob Onlineshopping, soziale Netzwerke oder Streaming – die Anforderungen an Geschwindigkeit, Skalierbarkeit und Benutzerfreundlichkeit steigen stetig. Hier kommt Azure Static Web Apps ins Spiel: eine serverlose Frontend-Lösung von Azure, die Entwicklern ermöglicht, statische Webanwendungen schnell und effizient bereitzustellen.

Traditionelle Hosting-Modelle erfordern oft umfangreiche Serverkonfigurationen und -wartungen, was zeitaufwändig und kostspielig sein kann. Genau hier setzen Azure Static Web Apps an – sie ermöglichen es, Webanwendungen effizient bereitzustellen, ohne die Komplexität herkömmlicher Serverinfrastrukturen. Durch die Automatisierung des Build- und Release-Prozesses direkt aus dem Code-Repository können Änderungen schneller umgesetzt und die Anwendung nahtlos aktualisiert werden. Funktionen wie globales Hosting über ein Content Delivery Network (CDN), automatisches SSL-Zertifikatmanagement und integriertes Routing vereinfachen die Bereitstellung und Verwaltung der Anwendung erheblich.

In dem Artikel geht es um die Grundlagen von Azure Static Web Apps und wie eine erste statische Webanwendung auf Azure bereitgestellt werden kann. Es wird gezeigt, welche Vorteile die serverlose Architektur bietet und wie diese optimal für Projekte genutzt werden kann.

Grundlagen von Azure Static Web Apps

Azure Static Web Apps sind eine serverlose Lösung, die speziell für statische Webanwendungen entwickelt wurde. Sie ermöglichen Entwicklern, Webprojekte wie Single Page Applications (SPAs) oder Progressive Web Apps (PWAs) mit minimalem Aufwand zu hosten und zu skalieren. Anders als bei traditionellen Webanwendungen, bei denen ein Webserver für die Auslieferung und Verwaltung der Inhalte erforderlich ist, werden bei Azure Static Web Apps die Inhalte direkt aus einem Repository (z. B. GitHub oder Azure DevOps) bereitgestellt. Dabei entfällt der Bedarf an einer komplexen Serverinfrastruktur, was sowohl die Kosten als auch die Komplexität deutlich reduziert.

Was sind statische Webanwendungen?

Statische Webanwendungen bestehen aus vordefinierten HTML-, CSS- und JavaScript-Dateien, die direkt an den Benutzer ausgeliefert werden, ohne dass serverseitige Verarbeitung erforderlich ist. Diese Art von Anwendungen ist ideal für Seiten, deren Inhalte sich selten oder nur durch Nutzerinteraktionen ändern, wie etwa Blogs, Portfolio-Webseiten oder einfache Informationsseiten. Moderne Frameworks wie React, Angular und Vue.js ermöglichen es jedoch, auch komplexe Single Page Applications (SPAs) als statische Webanwendungen zu entwickeln, die dank clientseitigem Rendering dynamisch wirken, ohne serverseitige Abfragen.

Wie funktioniert Azure Static Web Apps?

Azure Static Web Apps arbeiten mit einem serverlosen Ansatz, der es ermöglicht, statische Inhalte über ein globales Content Delivery Network (CDN) auszuliefern. Das bedeutet, dass die Dateien der Anwendung an verschiedenen Knotenpunkten weltweit zwischengespeichert und von dort aus an die Nutzer verteilt werden. Dadurch werden die Ladezeiten verkürzt und die Verfügbarkeit erhöht.

Der Workflow für Azure Static Web Apps ist in der Regel wie folgt:

1. Code-Repository: Der Quellcode der Anwendung wird in einem Git-Repository wie GitHub oder Azure DevOps gespeichert.
2. Automatisierter Build-Prozess: Bei jedem Push in das Repository wird ein automatisierter Build-Prozess gestartet, der die Anwendung erstellt und auf Fehler überprüft.
3. Bereitstellung: Die erstellten statischen Dateien werden anschließend automatisch auf den Azure Static Web Apps Servern bereitgestellt und über das CDN ausgeliefert.
4. Globale Verfügbarkeit: Die Webanwendung ist weltweit über eine benutzerdefinierte oder Azure-eigene URL erreichbar und nutzt automatisches SSL-Zertifikatmanagement, um eine sichere Verbindung zu gewährleisten.

Vorteile von Azure Static Web Apps

1. Einfaches Setup und Deployment: Entwickler können ihre Webanwendungen direkt aus ihrem GitHub- oder Azure DevOps-Repository heraus veröffentlichen. Änderungen im Code führen zu einem automatisierten Build und einer sofortigen Bereitstellung der aktualisierten Anwendung.
2. Kostenersparnis: Da keine Server gewartet oder skaliert werden müssen, fallen die Kosten für Serverressourcen und Verwaltung deutlich geringer aus. Für einfache Projekte gibt es sogar eine kostenlose Hosting-Option.
3. Globale Performance: Die Verteilung über ein CDN sorgt für schnelle Ladezeiten, da die Anwendung immer vom nächstgelegenen Server ausgeliefert wird.
4. Automatisiertes SSL-Zertifikatmanagement: Jede Anwendung erhält automatisch ein SSL-Zertifikat, sodass die Webanwendung standardmäßig sicher über HTTPS erreichbar ist.
5. Integriertes Routing: Azure Static Web Apps unterstützen clientseitiges Routing, was für moderne JavaScript-Frameworks und Single Page Applications unerlässlich ist. Dies bedeutet, dass selbst komplexe Routen und URL-Strukturen einfach verwaltet werden können.

Wann sollten Azure Static Web Apps verwendet werden?

Azure Static Web Apps sind ideal für Anwendungen, die hauptsächlich auf statischen Inhalten oder clientseitigem Rendering basieren. Dazu gehören:

• Webseiten, die hauptsächlich durch HTML, CSS und JavaScript funktionieren und keine serverseitige Logik benötigen.
• SPAs und PWAs, die auf Frameworks wie React, Angular oder Vue.js basieren.
• Projekte, die schnelle Bereitstellung und globale Verfügbarkeit erfordern, wie Blogs, Produktseiten oder Dokumentationsseiten.

Azure Static Web Apps sind weniger geeignet für Anwendungen, die stark von serverseitiger Logik oder komplexen Datenbankinteraktionen abhängig sind. Hier können jedoch Azure Functions oder andere Backend-Services als Erweiterung der statischen App eingesetzt werden.

Die Grundlagen von Azure Static Web Apps legen den Grundstein für moderne, schnelle und kosteneffiziente Webanwendungen, die ohne Serverinfrastruktur auskommen.

Schritt-für-Schritt-Anleitung: Bereitstellung einer Vue/Vite-Anwendung mit Azure Static Web Apps

In diesem Kapitel wird Schritt für Schritt erklärt, wie eine Vue.js-Anwendung, die mit Vite erstellt wurde, auf Azure Static Web Apps bereitgestellt werden kann. Diese Anleitung richtet sich an Entwickler, die bereits eine grundlegende Vue/Vite-Anwendung lokal erstellt haben und diese nun als serverlose Anwendung auf Azure hosten möchten.

Voraussetzungen

• Node.js: Installiere Node.js auf deinem Rechner, falls es noch nicht vorhanden ist.
• Azure-Konto: Ein Microsoft Azure Konto ist erforderlich. Wenn du noch kein Konto hast, kannst du dich für ein kostenloses Konto registrieren.
• GitHub-Konto: Die Bereitstellung erfolgt über GitHub, daher ist ein GitHub-Konto notwendig.
• Azure Static Web Apps Erweiterung: Um das Setup zu erleichtern, sollte die Azure Static Web Apps Erweiterung in Visual Studio Code installiert sein. Alternativ kann alles auch über das Azure Portal durchgeführt werden.

Schritt 1: Erstellen einer Vue/Vite-Anwendung

Falls noch keine Anwendung existiert, muss zunächst eine Vue.js-Anwendung mit Vite erstellt werden. Das funktioniert schnell mit dem Vue CLI.

1. Öffne ein Terminal und navigiere zu dem Verzeichnis, in dem du die Anwendung erstellen möchtest.

2. Installiere Vite und initialisiere ein neues Projekt mit Vue:

npm create vite@latest my-vue-app -- --template vue


3. Dies erstellt eine neue Vue-Anwendung im Verzeichnis my-vue-app.

4. Navigiere in das Projektverzeichnis und installiere die Abhängigkeiten:

cd my-vue-app
npm install


5. Starte die Anwendung lokal, um sicherzustellen, dass sie funktioniert:

npm run dev


6. Die Anwendung sollte nun unter http://localhost:3000 erreichbar sein.

Schritt 2: Anwendung auf GitHub hochladen

1. Initialisiere ein neues Git-Repository im Projektverzeichnis:

git init


2. Füge die Dateien zum Repository hinzu und erstelle einen Commit:

git add .
git commit -m "Initial commit"


3. Erstelle ein neues Repository auf GitHub und verbinde es mit dem lokalen Projekt:

git remote add origin https://github.com/<dein-username>/<dein-repository>.git


4. Push das Projekt auf GitHub:

git push -u origin main


Schritt 3: Einrichtung von Azure Static Web Apps

1. Gehe zum Azure-Portal: Melde dich bei deinem Azure-Konto an und navigiere zur Azure Static Web Apps Seite.
2. Erstelle eine neue Static Web App:
   • Klicke auf Create a resource und suche nach "Static Web Apps".
   • Klicke auf Static Web Apps und dann auf Create.
3. Konfiguriere die Static Web App:
   • Subscription: Wähle deine Azure-Subscription aus.
   • Resource Group: Erstelle eine neue oder wähle eine vorhandene Resource Group aus.
   • Name: Gib deiner Web App einen Namen, z.B. my-vue-app.
   • Region: Wähle die nächstgelegene Region aus, um die bestmögliche Performance zu erzielen.
   • Deployment source: Wähle GitHub aus und klicke auf Sign in with GitHub.
4. Repository und Branch auswählen:
   • Nach der GitHub-Authentifizierung wähle das Repository und den Branch (z. B. main) aus, in dem sich die Vue-Anwendung befindet.
5. Build-Einstellungen konfigurieren:
   • Wähle als Build-Preset Vue.js aus.
   • App location: Setze das Verzeichnis, in dem sich die Vue-App befindet. Normalerweise bleibt dies leer oder lautet /.
   • Output location: Setze dies auf dist, da Vite die gebaute Anwendung standardmäßig in diesem Ordner speichert.
6. Klicke auf Review + Create und anschließend auf Create, um die Web App zu erstellen.

Schritt 4: Automatisiertes Deployment

Sobald die Azure Static Web App erstellt wurde, beginnt Azure automatisch, die Anwendung aus deinem GitHub-Repository zu erstellen und bereitzustellen. Dieser Prozess wird durch eine automatisch erstellte GitHub Action gesteuert, die du in deinem Repository im Verzeichnis .github/workflows findest.

1. Verfolgen des Deployment-Status: In der GitHub-Action kannst du den Status der Bereitstellung in der Static Web App-Ressource verfolgen. Sobald der Build abgeschlossen ist, wird die App automatisch veröffentlicht.
2. URL der Anwendung: Nach erfolgreichem Deployment erhältst du eine URL, über die deine Anwendung weltweit zugänglich ist (z. B. https://happy-sky-012345.azurestaticapps.net).

Schritt 5: Anwendung testen und anpassen

1. Zugriff auf die Anwendung: Öffne die bereitgestellte URL im Browser, um sicherzustellen, dass die Vue-Anwendung wie erwartet funktioniert.
2. Änderungen umsetzen: Jede Änderung, die im GitHub-Repository auf den main Branch gepusht wird, löst automatisch einen neuen Build und ein erneutes Deployment aus. So kannst du deine Anwendung jederzeit aktualisieren, ohne manuelle Schritte durchführen zu müssen.

Fazit

Azure Static Web Apps bieten eine leistungsstarke und unkomplizierte Möglichkeit, moderne Webanwendungen serverlos und effizient zu hosten.  Entwickler, die zum Beispiel mit Frameworks wie Vue.js und Tools wie Vite arbeiten, stellt diese Lösung eine schnelle und kostengünstige Alternative zu herkömmlichen Hosting-Ansätzen dar. Mit der nahtlosen Integration von GitHub, automatisiertem Build- und Bereitstellungsprozess sowie globalem Content Delivery Network wird nicht nur die Performance verbessert, sondern auch die Code-Verwaltung von Webanwendungen drastisch vereinfacht.