Ü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.

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

  1. Wechseln Sie zum Visual Studio Marketplace, und installieren Sie die Azure Static Web Apps-Erweiterung 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. Nachdem die Installation abgeschlossen ist, wählen Sie "Neu starten" aus, um zu aktualisieren , 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 Ansicht>Befehlspalette auswählen und 'Azure: Anmelden' eingeben.

  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 wählen Sie "Datei > öffnen " aus, und öffnen Sie das Repository, das Sie auf Ihrem Computer im Editor geklont haben.

  2. Vergewissern Sie sich, dass Sie sich bei Ihrem bevorzugten Azure-Abonnement angemeldet haben, indem Sie die Befehlspalette öffnen und eingaben Azure: Select Subscriptions, und drücken Sie die EINGABETASTE.

  3. Wählen Sie Ihr Abonnement aus (Neben dem Abonnement sollte ein Häkchen angezeigt werden) und klicken Sie auf "OK".

Erstellen einer statischen Web-App

  1. Öffnen Sie Visual Studio Code, und wählen Sie "Datei > öffnen " aus, um das Repository zu öffnen, das Sie im Editor auf Ihren 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 des Azure-Logos 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 "Statische Web Apps ", klicken Sie mit der rechten Maustaste, und wählen Sie "Statische Web App erstellen" aus.

    Screenshot, der zeigt, wo eine Web-App erstellt werden soll.

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

    Screenshot, der zeigt, wie Eine statische Web App erstellt wird.

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

    Screenshot, der zeigt, wie Sie ein Abonnement auswählen.

  1. Wählen Sie die Angular-Option 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, das den eingegebenen Speicherort des Codes als Angular-App zeigt.

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

    Screenshot, der zeigt, wie man den Build-Output-Standort für Angular eingibt.

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

    Screenshot der ausgewählten React-Option.

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

    Screenshot: Codespeicherort, der als React-App eingegeben wurde

  3. Geben Sie build als den Speicherort für die Build-Ausgabe ein, an dem Dateien für die Produktion in Ihrer App erstellt werden, und drücken Sie Enter.

    Screenshot, der zeigt, wie der Ausgabepfad des Builds für React eingegeben wird.

  1. Wählen Sie die Svelte-Option aus, und drücken Sie die Enter-Taste.

    Screenshot: Ausgewählte Option „Svelte“

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

    Screenshot: Codespeicherort, der als Svelte-App eingegeben wurde

  3. Geben Sie public als den Build-Ausgabeort ein, an dem Dateien für die Produktion in Ihrer App erstellt werden, und drücken Sie die Eingabetaste.

    Screenshot, der zeigt, wie das Build-Ausgabeverzeichnis für Svelte eingegeben wird.

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

    Screenshot der ausgewählten Option

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

    Screenshot: Codespeicherort, der als Vue-App eingegeben wurde

  3. Geben Sie dist als Buildausgabespeicherort ein, in dem Dateien für die Produktion in Ihrer App erstellt werden, und drücken Sie Enter.

    Screenshot, der zeigt, wie man den Speicherort für den Build-Output bei Vue eingibt

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 des Bestätigungscodes, in dem der Benutzer aufgefordert wird, Aktionen in GitHub oder

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

    Screenshot, der zeigt, wie der Fortschritt über GitHub-Aktionen überprüft wird.

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

  3. Klicken Sie mit der rechten Maustaste auf das Projekt in der Static Web Apps-Erweiterung, und wählen Sie „Website durchsuchen“ aus, um die Website im Browser zu öffnen.

    Screenshot, der zeigt, wie Sie zu Ihrer statischen App-Website navigieren.

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.