Esercitazione: Creare un'app chat serverless con il servizio PubSub di Azure e App Web statiche di Azure

Articolo
06/02/2023

Web PubSub di Azure consente di creare applicazioni Web di messaggistica in tempo reale usando WebSocket. App Web statiche di Azure consente di compilare e distribuire automaticamente app Web stack full-stack in Azure da un repository di codice. Questa esercitazione descrive come usare Web PubSub e App Web statiche insieme per creare un'applicazione chat room in tempo reale.

In particolare, si apprenderà come:

Creare un'app chat serverless
Usare le associazioni di input e output della funzione Web PubSub
Usare App Web statiche

Panoramica

Diagramma che mostra il funzionamento di PubSub Web di Azure con App Web statiche di Azure.

GitHub o Azure Repos fornire il controllo del codice sorgente per App Web statiche. Azure monitora il ramo del repository selezionato e ogni volta che si verifica una modifica del codice al repository di origine viene eseguita automaticamente una nuova compilazione dell'app Web e distribuita in Azure. Il recapito continuo viene fornito da GitHub Actions e Azure Pipelines. App Web statiche rileva la nuova compilazione e la presenta all'utente dell'endpoint.

L'applicazione chat room di esempio fornita con questa esercitazione include il flusso di lavoro seguente.

Quando un utente accede all'app, l'API Funzioni di Azure login viene attivata per generare un URL di connessione client del servizio PubSub Web.
Quando il client inizializza la richiesta di connessione a Web PubSub, il servizio invia un evento di sistema connect che attiva l'API Funzioni connect per autenticare l'utente.
Quando un client invia un messaggio al servizio Web PubSub di Azure, il servizio risponde con un evento utente message e l'API Funzioni message viene attivata per trasmettere il messaggio a tutti i client connessi.
L'API Funzioni validate viene attivata periodicamente per CloudEvents Abuse Protection quando gli eventi in Azure Web PubSub vengono configurati con parametri {event}predefiniti, ovvero https://$STATIC_WEB_APP/{event}.

Nota

Le API connect funzioni e message vengono attivate quando il servizio PubSub Web di Azure è configurato con questi due eventi.

Prerequisiti

Un account GitHub.
Un account Azure . Se non si dispone di una sottoscrizione di Azure, creare un account gratuito di Azure prima di iniziare.
Interfaccia della riga di comando di Azure (versione 2.29.0 o successiva) o Azure Cloud Shell per gestire le risorse di Azure.

Creare una risorsa PubSub Web

Accedere all'interfaccia della riga di comando di Azure usando il comando seguente.
```
az login
```

Crea un gruppo di risorse.

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

Creare una risorsa PubSub Web.

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

Ottenere e tenere premuta la chiave di accesso per un uso successivo.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
Sostituire il segnaposto <YOUR_AWPS_ACCESS_KEY> con il valore per primaryConnectionString dal passaggio precedente.

Creare un repository

In questo articolo si usa un repository di modelli GitHub per semplificare le operazioni. Il modello offre un'app iniziale distribuita in App Web statiche di Azure.

Passare a https://github.com/Azure/awps-swa-sample/generate creare un nuovo repository per questa esercitazione.
Selezionare se stessi come Proprietario e assegnare un nome al repository my-awps-swa-app.
È possibile creare un repository pubblico o privato in base alle preferenze. Entrambi funzionano per l'esercitazione.
Selezionare Create repository from template (Crea repository da modello).

Creare un'app Web statica

Dopo aver creato il repository, è possibile creare un'app Web statica dall'interfaccia della riga di comando di Azure.

Creare una variabile per contenere il nome utente di GitHub.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Sostituire il segnaposto <YOUR_GITHUB_USER_NAME> con il nome utente di GitHub.

Creare una nuova app Web statica dal repository. Quando si esegue questo comando, l'interfaccia della riga di comando avvia un accesso interattivo gitHub. Seguire il messaggio per completare l'autorizzazione.

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

Importante

L'URL passato al --source parametro non deve includere il .git suffisso.

Passare a https://github.com/login/device.
Immettere il codice utente come visualizzato il messaggio della console.
Selezionare Continua.
Selezionare Autorizza AzureAppServiceCLI.

Configurare le impostazioni dell'app Web statiche.

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

Visualizzare il sito Web

Esistono due aspetti per distribuire un'app statica: la prima crea le risorse di Azure sottostanti che costituiscono l'app. Il secondo implica l'uso di un flusso di lavoro di GitHub Actions per compilare e pubblicare l'applicazione.

Prima di poter passare al nuovo sito statico, deve terminare l'esecuzione della compilazione di distribuzione.

Tornare alla finestra della console ed eseguire il comando seguente per elencare gli URL associati all'app.
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
L'output di questo comando restituisce l'URL al repository GitHub.
Copiare l'URL del repository e incollarlo nel browser.
Fare clic sulla scheda Actions (Azioni).

A questo punto, Azure sta creando le risorse per supportare l'app Web statica. Attendere fino a quando l'icona accanto al flusso di lavoro in esecuzione diventa un segno di spunta con sfondo ✅verde. Il completamento di questa operazione potrebbe richiedere alcuni minuti.

Dopo aver visualizzato l'icona di esito positivo, il flusso di lavoro viene completato e sarà possibile tornare alla finestra della console.
Eseguire il comando seguente per eseguire una query sull'URL del sito Web.
```
az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"
```
Tenere premuto l'URL da impostare nel gestore eventi PubSub Web.
```
STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
```

Configurare il gestore eventi Web PubSub

Sei molto vicino al completamento. L'ultimo passaggio consiste nel configurare Web PubSub in modo che le richieste client vengano trasferite alle API della funzione.

Eseguire il comando seguente per configurare gli eventi del servizio Web PubSub. Esegue il mapping delle api funzioni nella cartella nel repository al gestore eventi PubSub Web.

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"

Ora sei pronto a giocare con il tuo sito Web <YOUR_STATIC_WEB_APP>. Copiarlo nel browser e selezionare Continua per avviare la chat con i tuoi amici.

Pulire le risorse

Se non si continuerà a usare questa applicazione, è possibile eliminare il gruppo di risorse e l'app Web statica eseguendo il comando seguente.

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

Passaggi successivi

In questa guida introduttiva si è appreso come sviluppare e distribuire un'applicazione chat serverless. A questo punto, è possibile iniziare a creare un'applicazione personalizzata.

Divertirsi con demo riproducibili

Associazioni Web PubSub di Azure per Funzioni di Azure

Share via