Condividi tramite

Guida introduttiva: Creare un'app di chat con funzione di Azure in Socket.IO modalità serverless (anteprima)

In questo articolo si apprenderà come creare un'app di chat usando Web PubSub per Socket.IO in modalità serverless con Funzioni di Azure. L'esercitazione illustra come proteggere l'app con l'autenticazione basata sull'identità, mentre si lavora online.

L'origine del progetto usa Bicep per distribuire l'infrastruttura in Azure e Funzioni di Azure Core Tools per distribuire il codice nell'app per le funzioni.

Prerequisiti

Scaricare il codice di esempio

Trovare il codice di esempio: Socket.IO esempio serverless (TS)

git clone https://github.com/Azure/azure-webpubsub.git
cd ./sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript

Distribuire l'infrastruttura

Gli esempi di chat devono distribuire diversi servizi in Azure:

Bicep viene usato per distribuire l'infrastruttura. Il file viene individuato nella ./infra cartella . Distribuirlo con il comando az:

az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
  • <deployment-name>: nome della distribuzione.
  • <deployment-location>: percorso dei metadati di distribuzione. Si noti che non è il percorso in cui vengono distribuite le risorse.
  • <env-name>: il nome fa parte del nome del gruppo di risorse e del nome della risorsa.
  • <location>: posizione delle risorse.

Revisione dell'infrastruttura

Nella versione dell'infrastruttura viene distribuita un'app per le funzioni di Azure nel piano a consumo e l'account di monitoraggio e archiviazione richiesti dall'app per le funzioni. Viene inoltre distribuita una pagina Web PubSub per Socket.IO risorsa in modalità serverless.

Per lo scopo dell'autenticazione basata sull'identità, viene distribuita un'identità gestita assegnata dall'utente, assegnarla sia all'app per le funzioni che alla risorsa Socket.IO e concederla con alcune autorizzazioni:

  • Ruolo Proprietario dati BLOB di archiviazione: Accesso all'archiviazione per l'app per le funzioni
  • Monitoraggio del ruolo di pubblicazione delle metriche: Monitoraggio dell'accesso per l'app per le funzioni
  • Ruolo Proprietario del servizio Web PubSub: Access Web PubSub for Socket.IO for Function App

Come indicato in Configurare l'app Funzioni di Azure per l'uso dell'accesso a Microsoft Entra, viene creata un'entità servizio. Per evitare di usare il segreto per l'entità servizio, vengono usate le credenziali di identità federate.

Distribuire l'esempio nell'app per le funzioni

È stato preparato uno script bash per distribuire il codice di esempio nell'app per le funzioni:

# Deploy the project
./deploy/deploy.sh "<deployment-name>"

Esaminare i dettagli della distribuzione

È necessario eseguire due passaggi per distribuire l'app di esempio.

  • Pubblicare il codice nell'app per le funzioni (usare Funzioni di Azure Core Tools)

    func extensions sync
npm install
npm run build
func azure functionapp publish <function-app-name>

  • Configurare Web PubSub per Socket.IO per aggiungere un'impostazione hub che può inviare la richiesta all'app per le funzioni. In base alla limitazione del provider webhook dell'app per le funzioni, è necessario ottenere una chiave di estensione popolata dalla funzione. Per altri dettagli, vedere Trigger Binding (Binding trigger). Mentre si usa l'autenticazione basata sull'identità, nelle impostazioni dell'hub è necessario assegnare la risorsa di destinazione, ovvero l'ID client dell'entità servizio creata in precedenza.

    code=$(az functionapp keys list -g <resource-group> -n <function-name> --query systemKeys.socketio_extension -o tsv)
az webpubsub hub create -n <socketio-name> -g <resource-group> --hub-name "hub" --event-handler url-template="https://${<function-name>}.azurewebsites.net/runtime/webhooks/socketio?code=${code}" user-event-pattern="*" auth-type="ManagedIdentity" auth-resource="<service-principal-client-id>"

Eseguire un'app di esempio

Dopo aver distribuito il codice, visitare il sito Web per provare l'esempio:

https://<function-endpoint>/api/index

Screenshot dell'app chat serverless.

Passaggi successivi

Successivamente, è possibile seguire l'esercitazione per scrivere l'app in modo dettagliato:

Esercitazione: Creare un'app di chat con funzione di Azure in modalità serverless

  • Last updated on