Vorherige

Nächste

Übung: Erstellen und Konfigurieren einer statischen Web-App

Abgeschlossen

In diesem Modul wird ein GitHub-Vorlagenrepository verwendet, um Ihnen den Einstieg zu erleichtern. Die Vorlage enthält eine Starter-App, die Sie in Azure Static Web Apps bereitstellen.

Einrichten eines GitHub-Repositorys

1. Wechseln Sie zu https://github.com/Azure/awps-swa-sample/generate, um ein neues Repository für dieses Tutorial zu erstellen.

2. Wählen Sie sich selbst als Besitzer aus, und verwenden Sie den Standardnamen für Ihr Repository: awps-swa-sample. Wenn Sie einen anderen Namen auswählen, aktualisieren Sie den Repositorynamen, der in den folgenden GitHub-Befehlen verwendet wird.

3. Sie können je nach Bedarf ein öffentliches oder privates Repository erstellen. Beide Methoden funktionieren für dieses Modul.

4. Wählen Sie Create repository from template (Repository aus Vorlage erstellen) aus.

Erstellen einer statischen Web-App

Nachdem das Repository erstellt wurde, können Sie nun über die Azure CLI eine statische Web-App erstellen.

1. Erstellen Sie eine Variable zur Aufnahme des GitHub Benutzernamens.

   GITHUB_USER_NAME=<Your_GitHub_user_name>
   

2. Erstellen Sie eine neue statische Web-App aus Ihrem Repository: Wenn Sie diesen Befehl ausführen, startet die CLI eine interaktive GitHub-Anmeldung. Folgen Sie den Anweisungen in der Meldung, um die Autorisierung abzuschließen.

   az staticwebapp create \
       --name my-awps-swa-app \
       --resource-group "<rgn>[sandbox resource group name]</rgn>" \
       --source https://github.com/$GITHUB_USER_NAME/awps-swa-sample \
       --location $LOC \
       --branch main \
       --app-location "src" \
       --api-location "api" \
       --login-with-github
   

   In der Befehlsausgabe wird ein GitHub-Benutzercode angezeigt. Dieser Code wird im nächsten Schritt verwendet, um Ihr persönliches GitHub-Zugriffstoken zu aktivieren und abzurufen.

   Wichtig

   Die an den Parameter --source übergebene URL darf nicht das Suffix .git enthalten.

3. Gehe zu https://github.com/login/device.

4. Geben Sie den Benutzercode so wie in der Meldung Ihrer Konsole angezeigt ein. Wählen Sie Weiter.

5. Wählen Sie auf der angezeigten Seite AzureAppServiceCLI autorisieren aus. Wenn Sie dazu aufgefordert werden, rufen Sie einen Zwei-Faktor-Authentifizierungscode ab, und geben Sie den Code ein.

6. Konfigurieren Sie die statischen Web-App-Einstellungen.

   az staticwebapp appsettings set \
     --name my-awps-swa-app \
     --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa
   

Anzeigen der Website

Bei der Bereitstellung einer statischen App gibt es zwei Aspekte: Zum einen werden die zugrunde liegenden Azure-Ressourcen erstellt, aus denen Ihre App besteht. Der zweite Aspekt ist ein GitHub Actions-Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Bevor Sie zu Ihrer neuen statischen Website navigieren können, muss zuerst die Ausführung des Buildvorgangs für die Bereitstellung abgeschlossen sein.

1. Kehren Sie zu Ihrem Konsolenfenster zurück, und führen Sie den folgenden Befehl aus, um die URL des GitHub-Repositorys aufzulisten, die Ihrer App zugeordnet ist.

   az staticwebapp show \
     --name  my-awps-swa-app \
     --query "repositoryUrl"
   

   Die Ausgabe dieses Befehls gibt die URL zur Ihrem GitHub-Repository zurück.

2. Kopieren Sie die Repository-URL, und fügen Sie sie in den Browser ein.

3. Wählen Sie im GitHub-Repository die Registerkarte Aktionen aus.

   An diesem Punkt erstellt Azure die Ressourcen zur Unterstützung Ihrer statischen Web-App. Warten Sie, bis sich das Symbol neben dem ausgeführten Workflow in ein Häkchen mit grünem Hintergrund ändert (✅). Dieser Vorgang kann einige Minuten in Anspruch nehmen.

   Sobald der Vorgang erfolgreich ausgeführt wurde, ist der Workflow abgeschlossen, und Sie können zu Ihrem Konsolenfenster zurückkehren.

4. Führen Sie den folgenden Befehl aus, um die URL Ihrer Website abzufragen und den Wert in der STATIC_WEB_APP-Variablen zu speichern.

   STATIC_WEB_APP=$(az staticwebapp show \
     --name my-awps-swa-app \
     --query "defaultHostname" \
     --output tsv)
   

Konfigurieren des Web PubSub-Ereignishandlers

Bald sind Sie fertig. Der letzte Schritt besteht darin, Web PubSub zu konfigurieren, um Clientanforderungen an Ihre Functions-APIs zu übertragen. Weitere Informationen zum Ereignishandler im Web PubSub-Dienst finden Sie unter Ereignishandler.

1. Führen Sie den folgenden Befehl aus, um Web PubSub-Dienstereignisse zu konfigurieren. Er ordnet Funktionen unter dem Ordner api in Ihrem Repository dem Web PubSub-Ereignishandler zu.

   az webpubsub hub create \
     --name $WPS_NAME \
     --resource-group "<rgn>[sandbox resource group name]</rgn>" \
     --hub-name "sample_swa" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} system-event="connect"
   

Chat-App ausprobieren

Jetzt können Sie die Chat-App ausprobieren. Kopieren Sie die URL STATIC_WEB_APP in einen Browser, und wählen Sie Weiter aus, um mit dem Chatten zu beginnen. Wenn Sie einen Chat mit einem anderen Benutzer bzw. einer anderen Benutzerin simulieren möchten, öffnen Sie die URL in zwei oder mehr Browserregisterkarten, und senden Sie Nachrichten über die verschiedenen Registerkarten.

Weiter