Tutorial: Erstellen einer serverlosen Chat-App mit Azure Web PubSub-Dienst und Azure Static Web Apps

Azure Web PubSub ermöglicht die Erstellung von Web-Apps für Echtzeit-Messaging mithilfe von WebSocket. Mithilfe von Azure Static Web Apps können Sie umfassende Web-Apps erstellen und automatisch in Azure auf Grundlage eines Coderepositorys bereitstellen. In diesem Tutorial erfahren Sie, wie Sie Web PubSub und Static Web Apps verwenden, um eine Echtzeit-Chatroom-App zu erstellen.

Dabei wird insbesondere Folgendes vermittelt:

• Erstellen einer serverlosen Chat-App
• Verwenden von Eingabe- und Ausgabebindungen für Web PubSub-Funktionen
• Arbeiten mit Static Web Apps

Übersicht

GitHub oder Azure Repos bieten Quellcodeverwaltung für Static Web Apps. Azure überwacht den von Ihnen ausgewählten Repositorybranch, und jedes Mal, wenn es eine Codeänderung für das Quellrepository gibt, wird ein neuer Build Ihrer Web-App automatisch ausgeführt und in Azure bereitgestellt. Continuous Delivery wird von GitHub Actions und Azure Pipelines bereitgestellt. Static Web Apps erkennt den neuen Build und stellt ihn Endpunktbenutzer*innen vor.

Die mit diesem Tutorial bereitgestellte Beispiel-Chatroomanwendung verfügt über den folgenden Workflow.

1. Wenn sich Benutzer*innen bei der App anmeldet, wird die Azure Functions-API login ausgelöst, um eine Client-URL für die Verbindung des Web PubSub-Diensts zu generieren.
2. Wenn der Client die Verbindungsanforderung an Web PubSub initialisiert, sendet der Dienst ein Systemereignis connect, das die Functions-API connect auslöst, um Benutzer*innen zu authentifizieren.
3. Wenn ein Client eine Nachricht an den Azure Web PubSub-Dienst sendet, reagiert der Dienst mit einem Benutzerereignis message, und die Functions-API message wird ausgelöst, um die Nachricht an alle verbundenen Clients zu übertragen.
4. Die Functions-API validate wird regelmäßig für den CloudEvents-Schutz gegen Missbrauch ausgelöst, wenn die Ereignisse in Azure Web PubSub mit vordefiniertem Parameter {event} konfiguriert werden, das heißt https://$STATIC_WEB_APP/api/{event}.

Hinweis

Die Functions-APIs connect und message werden ausgelöst, wenn der Azure Web PubSub-Dienst mit diesen beiden Ereignissen konfiguriert ist.

Voraussetzungen

• Ein GitHub-Konto.
• Ein Azure-Konto. Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.
• Azure CLI (Version 2.29.0 oder höher) oder Azure Cloud Shell zum Verwalten von Azure-Ressourcen.

Erstellen einer Web PubSub-Ressource

1. Melden Sie sich mit dem folgenden Befehl bei der Azure CLI an:

   az login
   

2. Erstellen Sie eine Ressourcengruppe.

   az group create \
     --name my-awps-swa-group \
     --location "eastus2"
   

3. Erstellen Sie eine Web PubSub-Ressource.

   az webpubsub create \
     --name my-awps-swa \
     --resource-group my-awps-swa-group \
     --location "eastus2" \
     --sku Free_F1
   

4. Rufen Sie den Zugriffsschlüssel für die spätere Verwendung ab, und bewahren Sie ihn auf.

   az webpubsub key show \
     --name my-awps-swa \
     --resource-group my-awps-swa-group
   

   AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
   

   Ersetzen Sie den Platzhalter <YOUR_AWPS_ACCESS_KEY> durch den Wert für primaryConnectionString aus dem vorherigen Schritt.

Erstellen eines Repositorys

In diesem Artikel wird ein GitHub-Vorlagenrepository verwendet, um Ihnen den Einstieg zu erleichtern. Die Vorlage umfasst eine Starter-App, die Sie in Azure Static Web Apps bereitstellen können.

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 benennen Sie Ihr Repository my-awps-swa-app.
3. Sie können je nach Bedarf ein öffentliches oder privates Repository erstellen. In diesem Tutorial funktionieren beide.
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>
   

   Ersetzen Sie den Platzhalter <YOUR_GITHUB_USER_NAME> durch Ihren GitHub-Benutzernamen.

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 my-awps-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
       --location "eastus2" \
       --branch main \
       --app-location "src" \
       --api-location "api" \
       --login-with-github
   

   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 wie in der Meldung Ihrer Konsole angezeigt ein.

5. Wählen Sie Weiter.

6. Wählen Sie AzureAppServiceCLI autorisieren aus.

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

   az staticwebapp appsettings set \
     -n 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 URLs aufzulisten, die Ihrer App zugeordnet sind.

   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. Klicken Sie auf die Registerkarte Actions (Aktionen).

   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 das Erfolgssymbol angezeigt wird, 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.

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

   Bewahren Sie die URL auf, die im Web PubSub-Ereignishandler festgelegt werden soll.

   STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
   

Konfigurieren des Web PubSub-Ereignishandlers

Bald sind Sie fertig. Der letzte Schritt besteht darin, Web PubSub so zu konfigurieren, dass Clientanforderungen an Ihre Functions-APIs übertragen werden.

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 \
     -n "my-awps-swa" \
     -g "my-awps-swa-group" \
     --hub-name "sample_swa" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"
   

Jetzt können Sie anfangen, Ihre Website < YOUR_STATIC_WEB_APP> auszuprobieren. Kopieren Sie sie in den Browser, und wählen Sie Fortfahren aus, um mit Ihren Freunden zu chatten.

Bereinigen von Ressourcen

Falls Sie diese Anwendung nicht weiter nutzen möchten, können Sie die Ressourcengruppe und die statische Web-App durch Ausführen des folgenden Befehls löschen.

az group delete --name my-awps-swa-group

Nächste Schritte

In dieser Schnellstartanleitung haben Sie gelernt, wie Sie eine serverlose Chat-App erstellen und bereitstellen. Sie können nun mit der Erstellung Ihrer eigenen App beginnen.

Probieren Sie spielbare Demos aus.

Azure Web PubSub-Bindungen für Azure Functions