Samouczek: tworzenie bezserwerowej aplikacji do czatów za pomocą usługi Azure Web PubSub i usługi Azure Static Web Apps

Usługa Azure Web PubSub ułatwia tworzenie aplikacji internetowych do obsługi komunikatów w czasie rzeczywistym przy użyciu protokołu WebSocket. Usługa Azure Static Web Apps ułatwia automatyczne tworzenie i wdrażanie aplikacji internetowych pełnego stosu na platformie Azure z repozytorium kodu. Z tego samouczka dowiesz się, jak używać usług Web PubSub i Static Web Apps razem do tworzenia aplikacji pokoju rozmów w czasie rzeczywistym.

W szczególności dowiesz się, jak wykonywać następujące czynności:

Omówienie

Usługi GitHub lub Azure Repos zapewniają kontrolę źródła dla usługi Static Web Apps. Platforma Azure monitoruje wybraną gałąź repozytorium i za każdym razem, gdy następuje zmiana kodu w repozytorium źródłowym, nowa kompilacja aplikacji internetowej zostanie automatycznie uruchomiona i wdrożona na platformie Azure. Ciągłe dostarczanie zapewniają GitHub Actions i Azure Pipelines. Usługa Static Web Apps wykrywa nową kompilację i prezentuje ją użytkownikowi punktu końcowego.

Przykładowa aplikacja czatu dołączona do tego samouczka działa według następującego schematu.

1. Gdy użytkownik loguje się do aplikacji, interfejs API usługi Azure Functions login jest wyzwalany w celu wygenerowania adresu URL połączenia klienta usługi Web PubSub.
2. Gdy klient inicjuje żądanie połączenia z usługą Web PubSub, usługa wysyła zdarzenie systemowe connect , które wyzwala interfejs API usługi Functions connect w celu uwierzytelnienia użytkownika.
3. Gdy klient wysyła komunikat do usługi Azure Web PubSub, usługa odpowiada zdarzeniem użytkownika message, a interfejs API usługi Functions message jest wyzwalany do rozgłoszenia komunikatu do wszystkich połączonych klientów.
4. Interfejs API usługi Functions validate jest wywoływany okresowo na potrzeby funkcji CloudEvents Abuse Protection, gdy zdarzenia w usłudze Azure Web PubSub są skonfigurowane za pomocą wstępnie zdefiniowanego parametru {event}, czyli https://$STATIC_WEB_APP/api/{event}.

Wymagania wstępne

• Konto usługi GitHub.
• Konto platformy Azure. Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto platformy Azure.
• Interfejs wiersza polecenia platformy Azure (wersja 2.29.0 lub nowsza) lub usługa Azure Cloud Shell do zarządzania zasobami platformy Azure.

Tworzenie zasobu Web PubSub

1. Zaloguj się do interfejsu wiersza polecenia platformy Azure przy użyciu następującego polecenia.

   az login
   

2. Utwórz grupę zasobów.

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

3. Utwórz zasób Web PubSub.

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

4. Pobierz i przytrzymaj klucz dostępu do późniejszego użycia.

   Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych. W środowiskach produkcyjnych zawsze chroń klucze dostępu. Użyj usługi Azure Key Vault, aby bezpiecznie zarządzać kluczami i obracać je oraz zabezpieczać połączenie za pomocą usługi WebPubSubServiceClient.

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

   AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
   

   Zastąp symbol zastępczy <YOUR_AWPS_ACCESS_KEY> wartością z primaryConnectionString poprzedniego kroku.

Tworzenie repozytorium

W tym artykule użyto repozytorium szablonów usługi GitHub, aby ułatwić rozpoczęcie pracy. Szablon zawiera początkową aplikację wdrażaną w usłudze Azure Static Web Apps.

1. Przejdź do https://github.com/Azure/awps-swa-sample/generate, aby utworzyć nowe repozytorium w ramach tego samouczka.
2. Wybierz siebie jako właściciel i nadaj repozytorium nazwę my-awps-swa-app.
3. Możesz utworzyć repozytorium publiczne lub prywatne zgodnie z preferencjami. Obie te elementy działają w ramach samouczka.
4. Wybierz pozycję Utwórz repozytorium na podstawie szablonu.

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium możesz utworzyć statyczną aplikację internetową z poziomu interfejsu wiersza polecenia platformy Azure.

1. Utwórz zmienną do przechowywania nazwy użytkownika usługi GitHub.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
   

   Zastąp symbol zastępczy <YOUR_GITHUB_USER_NAME> nazwą użytkownika usługi GitHub.

2. Utwórz nową statyczną aplikację internetową z repozytorium. Po uruchomieniu tego polecenia narzędzie CLI rozpoczyna interaktywne logowanie do serwisu GitHub. Postępuj zgodnie z komunikatem, aby ukończyć autoryzację.

   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
   

   Ważne

   Adres URL przekazany do parametru --source nie może zawierać sufiksu .git .

3. Przejdź do https://github.com/login/device.

4. Wprowadź kod użytkownika wyświetlany w komunikacie konsoli.

5. Wybierz Kontynuuj.

6. Wybierz pozycję Autoryzuj usługę AzureAppServiceCLI.

7. Skonfiguruj ustawienia statycznej aplikacji internetowej.

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

Wyświetlanie witryny internetowej

Istnieją dwa aspekty wdrażania aplikacji statycznej: pierwszy tworzy bazowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy funkcji GitHub Actions, który kompiluje i publikuje aplikację.

Przed przejściem do nowej witryny statycznej kompilacja wdrożenia musi najpierw zakończyć działanie.

1. Wróć do okna konsoli i uruchom następujące polecenie, aby wyświetlić listę adresów URL skojarzonych z aplikacją.

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

   Dane wyjściowe tego polecenia zwracają adres URL do repozytorium GitHub.

2. Skopiuj adres URL repozytorium i wklej go w przeglądarce.

3. Wybierz kartę Działania.

   Na tym etapie platforma Azure tworzy zasoby do obsługi statycznej aplikacji internetowej. Poczekaj, aż ikona obok uruchomionego przepływu pracy zmieni się w znacznik wyboru z zielonym tłem ✅. Wykonanie tej operacji może potrwać kilka minut.

   Po pojawieniu się ikony powodzenia przepływ pracy zostanie ukończony i możesz wrócić do okna konsoli.

4. Uruchom następujące polecenie, aby wykonać zapytanie dotyczące adresu URL witryny internetowej.

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

   Zawiera adres URL do ustawienia w programie obsługi zdarzeń Web PubSub.

   STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
   

Konfigurowanie programu obsługi zdarzeń Web PubSub

Jesteś bardzo blisko ukończenia. Ostatnim krokiem jest skonfigurowanie usługi Web PubSub tak, aby żądania klientów były przekazywane do interfejsów API funkcji.

1. Uruchom następujące polecenie, aby skonfigurować zdarzenia usługi Web PubSub. Mapuje funkcje w folderze api w repozytorium do programu obsługi zdarzeń Web PubSub.

   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"
   

Teraz możesz zacząć korzystać z witryny internetowej <YOUR_STATIC_WEB_APP>. Skopiuj go do przeglądarki i wybierz pozycję Kontynuuj , aby rozpocząć rozmowę ze znajomymi.

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć grupę zasobów i statyczną aplikację internetową, uruchamiając następujące polecenie.

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

Następne kroki

W tym przewodniku Szybki start przedstawiono sposób tworzenia i wdrażania bezserwerowej aplikacji do czatu. Teraz możesz rozpocząć tworzenie własnej aplikacji.