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:

• Tworzenie bezserwerowej aplikacji do czatu
• Praca z powiązaniami wejściowymi i wyjściowymi funkcji Web PubSub
• Praca z usługą Static Web Apps

Ważne

Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych.

Parametry połączenia zawiera informacje o autoryzacji wymagane przez aplikację w celu uzyskania dostępu do usługi Azure Web PubSub. Klucz dostępu wewnątrz parametry połączenia jest podobny do hasła głównego usługi. 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.

Unikaj dystrybuowania kluczy dostępu do innych użytkowników, kodowania ich lub zapisywania ich w dowolnym miejscu w postaci zwykłego tekstu, który jest dostępny dla innych użytkowników. Obracanie kluczy, jeśli uważasz, że mogły one zostać naruszone.

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 jest dostarczane przez usługi GitHub Actions i Azure Pipelines. Usługa Static Web Apps wykrywa nową kompilację i prezentuje ją użytkownikowi punktu końcowego.

Przykładowa aplikacja pokoju rozmów udostępniona w tym samouczku ma następujący przepływ pracy.

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 za pomocą zdarzenia użytkownika message , a interfejs API usługi Functions message jest wyzwalany do emisji, komunikat do wszystkich połączonych klientów.
4. Interfejs API usługi Functions validate jest okresowo wyzwalany dla usługi CloudEvents Abuse Protection , gdy zdarzenia w usłudze Azure Web PubSub są konfigurowane przy użyciu wstępnie zdefiniowanego parametru {event}, czyli https://$STATIC_WEB_APP/api/{event}.

Uwaga

Interfejsy connect API usługi Functions i message są wyzwalane po skonfigurowaniu usługi Azure Web PubSub przy użyciu tych dwóch zdarzeń.

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 witryny , https://github.com/Azure/awps-swa-sample/generate aby utworzyć nowe repozytorium na potrzeby 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 interfejs wiersza polecenia uruchamia interakcyjne logowanie w usłudze 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"
   

   Przytrzymaj adres URL, aby ustawić w procedurze 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 w taki sposób, aby żądania klientów zostały przesłane 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.

Zabawa z odtwarzanymi pokazami

Powiązania usługi Azure Web PubSub dla usługi Azure Functions