Übung: Erstellen einer Azure Static Web Apps-Instanz

  • 5 Minuten

In dieser Übung erstellen Sie eine Azure Static Web Apps-Instanz sowie eine GitHub-Aktion, die Ihre Anwendung automatisch erstellt und veröffentlicht.

Erstellen einer statischen Web-App

Nachdem Sie Ihr GitHub-Repository erstellt haben, können Sie eine Static Web Apps-Instanz aus dem Azure-Portal erstellen.

In diesem Modul wird Ihnen über die Azure-Sandbox ein kostenloses, temporäres Azure-Abonnement zur Verfügung zu stellen, mit dem Sie diese Übung durcharbeiten können. Sie müssen die Sandbox oben auf dieser Seite aktivieren, ehe Sie mit dieser Übung fortfahren können.

Die aktivierte Azure-Sandbox ermöglicht Ihnen die Verwendung von Azure-Diensten, ohne dass Kosten anfallen.

Installieren der Azure Static Web Apps-Erweiterung für Visual Studio Code

  1. Navigieren Sie zum Visual Studio Marketplace, und installieren Sie die Erweiterung Azure Static Web Apps für Visual Studio Code.

  2. Wenn die Registerkarte der Erweiterung in Visual Studio Code geladen wird, wählen Sie die Schaltfläche Installieren aus.

  3. Wählen Sie nach Abschluss der Installation Restart to update (Für Update neu starten) aus, wenn sie dazu aufgefordert werden.

Anmelden bei Azure in Visual Studio Code

  1. Melden Sie sich in Visual Studio Code bei Azure an, indem Sie auf Ansicht>Befehlspalette klicken und Folgendes eingeben: Azure: Anmelden.

    Wichtig

    Melden Sie sich bei Azure mit dem Konto an, mit dem die Sandbox erstellt wurde. Die Sandbox ermöglicht den Zugriff auf ein Concierge-Abonnement.

  2. Führen Sie die Anweisungen aus, um den bereitgestellten Code zu kopieren und in den Webbrowser einzufügen, wodurch Ihre Visual Studio Code-Sitzung authentifiziert wird.

Auswählen Ihres Abonnements

  1. Öffnen Sie Visual Studio Code, und navigieren Sie zu Datei > Öffnen, und öffnen Sie das Repository, das Sie im Editor auf den Computer geklont haben.

  2. Vergewissern Sie sich, dass Sie Ihre Azure-Abonnements so gefiltert haben, dass Sie das Concierge-Abonnement einschließen, indem Sie die Befehlspalette öffnen, Azure: Select Subscriptions eingeben und dann die EINGABETASTE drücken.

  3. Wählen Sie Concierge-Abonnement aus, und klicken drücken Sie die EINGABETASTE.

    Screenshot: Filtern nach Abonnement in VS Code

Erstellen einer statischen Web-App

  1. Öffnen Sie Visual Studio Code, und navigieren Sie zu Datei > Öffnen, um das Repository zu öffnen, das Sie im Editor auf den Computer geklont haben.

  2. Wählen Sie in Visual Studio Code auf der Aktivitätsleiste das Azure-Logo aus, um das Fenster mit den Azure-Erweiterungen zu öffnen.

    Screenshot: Das Azure-Logo in VS Code

    Hinweis

    Azure- und GitHub-Anmeldedaten sind erforderlich. Wenn Sie sich noch nicht über Visual Studio Code bei Azure und GitHub angemeldet haben, werden Sie von der Erweiterung aufgefordert, sich während der Erstellung bei beiden Komponenten anzumelden.

  3. Zeigen Sie mit der Maus auf die Überschrift Static Web Apps, drücken Sie die rechte Maustaste, und wählen Sie Statische Web-App erstellen aus.

    Screenshot: Vorgehensweise zum Erstellen einer Web-App

  4. Geben Sie my-first-static-web-app ein, und drücken Sie die EINGABETASTE.

    Screenshot: Erstellen einer statischen Web-App

  5. Wählen Sie Ihren Standort aus, und drücken Sie die EINGABETASTE.

    Screenshot: Auswahl eines Abonnements

  1. Wählen Sie die Option Angular aus, und drücken Sie die EINGABETASTE.

    Screenshot der ausgewählten Angular-Option.

  2. Geben Sie /angular-app als Speicherort für den Anwendungscode ein, und drücken Sie die EINGABETASTE.

    Screenshot: Der Codespeicherort, der als „angular-app“ eingegeben wurde

  3. Geben Sie dist/angular-app als Speicherort der Buildausgabe ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Eingeben des Buildausgabespeicherorts für Angular

  1. Wählen Sie die Option React aus, und drücken Sie die EINGABETASTE.

    Screenshot der ausgewählten Option „React“.

  2. Geben Sie /react-app als Speicherort für den Anwendungscode ein, und drücken Sie EINGABETASTE.

    Screenshot: Der Codespeicherort, der als „react-app“ eingegeben wurde

  3. Geben Sie build als Speicherort der Buildausgabe ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Eingeben des Buildausgabespeicherorts für React

  1. Wählen Sie die Option Svelte aus, und drücken Sie die EINGABETASTE.

    Screenshot mit der ausgewählten Option „Svelte“.

  2. Geben Sie /svelte-app als Speicherort für den Anwendungscode ein, und drücken Sie die EINGABETASTE.

    Screenshot: Der Codespeicherort, der als „svelte-app“ eingegeben wurde

  3. Geben Sie public als Speicherort der Buildausgabe ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Eingeben des Buildausgabespeicherorts für Svelte

  1. Wählen Sie die Option Vue aus, und drücken Sie die EINGABETASTE.

    Screenshot der ausgewählten Option „Vue“.

  2. Wählen Sie /vue-app als Speicherort für den Anwendungscode aus, und drücken Sie die EINGABETASTE.

    Screenshot: Der Codespeicherort, der als „vue-app“ eingegeben wurde

  3. Geben Sie dist als Speicherort der Buildausgabe ein, in dem Dateien für die Produktion in der App erstellt werden, und drücken Sie die EINGABETASTE.

    Screenshot: Eingeben des Buildausgabespeicherorts für Vue

Hinweis

Ihr Repository unterscheidet sich möglicherweise ein wenig von den Repositorys, die Sie in der Vergangenheit verwendet haben. Es enthält vier verschiedene Apps in vier verschiedenen Ordnern. Jeder Ordner enthält eine App, die in einem anderen JavaScript-Framework erstellt wurde. Normalerweise verfügen Sie über eine App im Stammverzeichnis Ihres Repository und geben / für den App-Pfad an. Dies ist ein gutes Beispiel dafür, warum Sie die Speicherorte mit Azure Static Web Apps im ersten Schritt konfigurieren können. Sie erhalten damit die vollständige Kontrolle über die Erstellung der App.

  1. Nach der Erstellung der App wird eine Bestätigungsbenachrichtigung in Visual Studio Code angezeigt.

    Screenshot: Der Bestätigungscode, in dem der*die Benutzer*in aufgefordert wird, „Open actions in GitHub“ (Aktionen in GitHub öffnen) oder „Konfiguration anzeigen/bearbeiten“ auszuwählen

    Während der Ausführung der Bereitstellung meldet die Visual Studio Code-Erweiterung Ihnen den Buildstatus.

    Screenshot: Die Benutzeroberfläche von VS Code mit „WaitingforDeployment“

  2. Sie können den Fortschritt der Bereitstellung mithilfe von GitHub Actions anzeigen, indem Sie das Menü Actions (Aktionen) erweitern.

    Screenshot: Überprüfen des Fortschritts über GitHub Actions

    Sobald die Bereitstellung abgeschlossen ist, können Sie zu Ihrer Website navigieren.

  3. Wenn Sie die Website im Browser anzeigen möchten, klicken Sie in der Static Web Apps-Erweiterung mit der rechten Maustaste auf das Projekt, und wählen Sie Browsen zur Website aus.

    Screenshot: Navigieren zu Ihrer statischen Web-App

Glückwunsch! Sie haben Ihre erste App in Azure Static Web Apps bereitgestellt.

Hinweis

Machen Sie sich keine Sorgen, wenn eine Webseite angezeigt wird, die besagt, dass die App noch nicht erstellt und bereitgestellt wurde. Aktualisieren Sie den Browser nach einer Minute. Die GitHub-Aktion wird automatisch ausgeführt, wenn die Azure Static Web Apps-Instanz erstellt wird. Wenn Ihnen die Begrüßungsseite angezeigt wird, ist die App noch immer bereitgestellt.