Für die Veröffentlichung einer statischen Website bietet sich der Dienst "Azure Statische Web-App" an. Der Dienst ist kostengünstig und dafür viele Funktionen. Der Dienstbeschrieb bietet dazu einen Überblick.

In dieser Anleitung soll mit Hilfe dieses Dienstes eine ganz einfache Website publiziert werden. Das Vorgehen glieder sich in die Schritte:

1. Infrastruktur bereistellen (initial einmalig)
2. Inhalte - die Website - publizieren (wieder holt bei Änderungen)

Diese Abfolge - Infrastruktur erstellen -> Inhalt ausrollen - ist ein Muster, welches in in der Cloud oft zur Anwendung kommt.

Infrastruktur bereitstellen

1. Im Portal anmelden und Ressource erstellen klicken.

   

2. Im Marketplace im Suchfeld nach static web app (1) suchen und beim erscheinden Service Statische Web-App auf Erstellen (2) klicken.

   

3. Im Forumular "Statische Web-App erstellen" im Abschnitt "Grundlagen" werden nun folgende Anpassungen vorgenommen:

   a. Abonnement auswählen, in der die statische Web-App erstellt werden soll.
   b. Eine Ressourcengruppe wählen; im Beispiel wird eine neue Ressourcengruppe rg-beko-test erstellt.
   c. Für die statische Web-App wird ein Name definiert; im Beispiel stapp-beko-test
   d. Der Plantyp definiert den Funktionsumfang und die Kosten; im Beispiel wird der Free Tier gewählt.
   e. Als Quelle für die Webseiten wird im Beispiel Sonstiges ausgewählt, damit in einem späteren Schritt die Webseiten von einem lokalen Computer veröffentlicht werden können.

   

4. Im Abschnitt "Erweitert" wird die "Region für Azure-Funktionen-API und Stagingumgebungen" auf West Europe gesetzt. Abschliessend Überprüfen + erstellen klicken.

   

5. Es wird nun eine automatische Plausibilitätsprüfung vorgenommen und eine Zusammenfassung angezeigt. Erstellen klicken, um die statische Web-App zu erstellen.

   

6. Die Bereitstellung der Ressourcen kann im Folgenden live verfolgt werden. Sobald der Vorgang abgeschlossen wir deine Zusammenfassung angezeigt. Auf Zu Ressource wechseln klicken, um zur neu erstellen Web-App zu gehen.

   

7. In der Übersicht der neu erstellen statischen Web-App sind alle Parameter ersichtlich. Insbesondere die URL unter welcher die statische Website im Folgenden veröffentlicht wird sowie die Funktion "Bereitstellungstoken verwalten". Diesen Knopf klicken, um das Token anzuzeigen.

   In der linken Navigation sind weitere Konfigurationswerkzeuge verfügbar, mittels welchen zusätzliche Funktionen wie Authentifizierung mit Entra, benutzerdefinierte Domänen, Datenbankanbindungen etc realisiert werden können.

   

8. Das Bereitstellungstoken in die Zwischenablage kopieren. Dieses Token wird im Verlauf dieser Anleitung benötigt, um die Website zu publizieren.

   

Mit diesem Schritt ist die Bereitstellung der Infrastruktur abgeschlossen. Die Infrastruktur wird vollständig von Microsoft verwaltet.

Es folgt nun die erstmalige Publikation der Website. Bei Änderungen an der Website muss diese Schritte natürlich erneut ausgeführt werden.

Website publizieren

In dieser Anleitung wird die Website bewusst nicht aus einen Git-Repository veröffentlicht, auch wenn dazu geraten wird. Hier wird die Website direkt aus einem Ordner auf einem Client veröffentlicht. Dazu wir das Kommandozeilentool swa benötigt, welches einmalig gemäss Anleitung installiert werden muss.

Die Website in diesem Beispiel besteht aus nur einer Webseite index.html in einem Ordner dist:

Folgendes Kommando veröffentlicht diese Website nun in die zuvor erstellte statische Web-App. Das Bereitstellungstoken identifiziert einersetis die Web-App, dient anderseits auch für die Legitimation für den Zugriff

SWA_CLI_DEPLOYMENT_TOKEN=<TOKEN> swa deploy dist

Wir der Befehl wie angegeben ausgeführt, wird die Ausgabe wie folgt aussehen:

Wie ersichtlich ist, wird standardmässig in eine Preview-Umgebung publiziert. Unter dieser Preview-URL könnten die Inhalte erst überprüft und somit einem Review unterzogen werden, bevor sie der Welt zur Verfügung gestellt werden. Eine Publikation die Produktivumgebung erfolgt wie folgt:

Zu beachten ist hier, das die gewünschte Umgebung per Optionen --env production explizit angegeben wird.