Für die Veröffentlichung einer statischen Website bietet sich der Dienst Azure Static Web-App an. Der Dienst ist kostengünstig und bietet zahlreiche Funktionen. Einen Überblick bietet die Dienstbeschreibung.

In dieser Anleitung wird mithilfe dieses Dienstes eine einfache Website publiziert. Das Vorgehen gliedert sich in folgende Schritte:

1. Infrastruktur bereitstellen (initial einmalig)
2. Inhalte - die Website - publizieren (wiederholt bei Änderungen)

Diese Abfolge – Infrastruktur erstellen, anschliessend Inhalt ausrollen – ist ein Muster, welches in der Cloud häufig zur Anwendung kommt.

Infrastruktur bereitstellen

1. Im Portal anmelden und Ressource erstellen anklicken.

   

2. Im Marketplace im Suchfeld nach static web app (1) suchen und beim erscheinenden Dienst Statische Web-App Erstellen -> Statische Web-App (2) anklicken.

   

3. Im Formular Statische Web-App erstellen im Abschnitt Grundlagen folgende Anpassungen vornehmen:

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

   

4. Im Abschnitt Erweitert die Region für Azure-Funktionen-API und Staging-Umgebungen auf West Europe setzen. Abschliessend Überprüfen + Erstellen anklicken.

   

5. Es wird eine automatische Plausibilitätsprüfung vorgenommen und eine Zusammenfassung angezeigt. Zum Erstellen der statischen Web-App Erstellen anklicken.

   

6. Die Bereitstellung der Ressourcen kann anschliessend live verfolgt werden. Sobald der Vorgang abgeschlossen ist, wird eine Zusammenfassung angezeigt. Zum Wechsel auf die neu erstellte Web-App Zu Ressource wechseln anklicken.

   

7. In der Übersicht der neu erstellten statischen Web-App sind alle Parameter ersichtlich. Insbesondere die URL, unter der die statische Website anschliessend veröffentlicht wird, sowie die Funktion Bereitstellungstoken verwalten. Zur Anzeige des Tokens diese Schaltfläche anklicken.

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

   

8. Das Bereitstellungstoken in die Zwischenablage kopieren. Dieses Token wird im Verlauf dieser Anleitung zur Publikation der Website benötigt.

   

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

Es folgt die erstmalige Publikation der Website. Bei Änderungen an der Website sind diese Schritte erneut auszuführen.

Website publizieren

In dieser Anleitung wird die Website bewusst nicht aus einem Git-Repository veröffentlicht, auch wenn dies empfohlen wird. Die Website wird direkt aus einem Ordner auf einem Client veröffentlicht. Dazu wird das Kommandozeilentool swa benötigt, welches einmalig gemäss Anleitung zu installieren ist.

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

Folgender Befehl veröffentlicht die Website in die zuvor erstellte statische Web-App. Das Bereitstellungstoken identifiziert einerseits die Web-App und dient andererseits der Legitimation für den Zugriff.

SWA_CLI_DEPLOYMENT_TOKEN=<TOKEN> swa deploy dist

Wird der Befehl wie angegeben ausgeführt, ergibt sich folgende Ausgabe:

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

SWA_CLI_DEPLOYMENT_TOKEN=<TOKEN> swa deploy --env production dist

Zu beachten ist, dass die gewünschte Umgebung mit der Option --env production explizit anzugeben ist.