Esercizio: abilitare gli aggiornamenti automatici in un'applicazione Web con il Servizio SignalR

  • 12 minuti

Per aggiungere SignalR a questo prototipo, è necessario creare:

  • Una risorsa di Azure SignalR
  • Alcune nuove funzioni per supportare SignalR
  • Aggiornare il client per supportare SignalR

Creare una risorsa SignalR

È necessario creare una risorsa Azure SignalR.

  1. Tornare al terminale per creare la risorsa SignalR.

  2. Passare alla sottodirectory setup-resources per creare la risorsa.

    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

  3. Copiare la stringa di connessione per la risorsa SignalR. È necessario aggiornare il codice del server.

    Tipo di risorsa Variabile di ambiente
    Azure SignalR Detto SIGNALR_CONNECTION_STRING

Aggiornare le variabili di ambiente di configurazione del server

In ./start/server/local.settings.jsonaggiungere una variabile all'oggetto Valori denominato SIGNALR_CONNECTION_STRING con il valore elencato nel terminale e salvare il file.

Creare la funzione signalr-open-connection

Il client Web usa l'SDK del client SignalR per stabilire una connessione al server. L'SDK recupera la connessione tramite una funzione denominata signalr-open-connection per connettersi al servizio.

  1. Aprire il riquadro comandi di Visual Studio Code premendo F1.

  2. Cercare e selezionare il comando Funzioni di Azure: Crea funzione.

  3. Scegliere Impostazione predefinita e quindi selezionare avvio/server per impostare il percorso dell'app per le funzioni.

  4. Selezionare Sì quando viene chiesto di inizializzare il progetto per l'uso con VS Code?.

  5. Quando richiesto, specificare le informazioni seguenti.

    Nome valore
    Modello Trigger HTTP
    Nome signalr-open-connection

    Un file denominato signalr-open-connection.ts è ora disponibile in ./start/server/src/functions.

  6. Aprire signalr-open-connection.ts e sostituire tutto con il codice seguente.

    import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

    Le informazioni di connessione SignalR vengono restituite dalla funzione.

Creare la funzione signalr-send-message

  1. Aprire il riquadro comandi di Visual Studio Code premendo F1.

  2. Cercare e selezionare il comando Funzioni di Azure: Crea funzione.

  3. Selezionare il percorso dell'app per le funzioni come avvio/server.

  4. Quando richiesto, specificare le informazioni seguenti.

    Nome valore
    Modello Trigger di Azure Cosmos DB
    Nome signalr-send-message
    Stringa di connessione di Cosmos DB COSMOSDB_CONNECTION_STRING
    Nome del database da monitorare stocksdb
    Nome raccolta stocks
    Verifica l'esistenza e crea automaticamente la raccolta di lease true

    Aggiornare la finestra di Explorer in Visual Studio Code per visualizzare gli aggiornamenti. Un file denominato signalr-open-connection è ora disponibile in ./start/server/src/functions.

  5. Aprire signalr-send-message.ts e sostituire tutti gli elementi con il codice seguente.

    import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);
  • Definire i dati in ingresso: L'oggetto comingFromCosmosDB definisce il trigger cosmos DB per controllare le modifiche.
  • Definire il trasporto in uscita: L'oggetto goingOutToSignalR definisce la stessa connessione SignalR. HubName è lo stesso hub default.
  • Connettere i dati al trasporto: dataToMessage ottiene gli elementi modificati nella tabella stocks e invia ogni elemento modificato singolarmente tramite SignalR usando il extraOutputs usando lo stesso hub default.
  • Connettersi all'app: app.CosmosDB associa i binding al nome della funzione send-signalr-messages.

Eseguire il commit delle modifiche e il push in GitHub

  1. Nel terminale eseguire il commit delle modifiche nel repository.

    git add .
git commit -m "Add SignalR functions"
git push

Creare la funzione signalr-send-message

Creare un'app per le funzioni e le risorse correlate in Azure in cui è possibile pubblicare il nuovo codice delle funzioni.

  1. Aprire il portale di Azure per creare una nuova app per le funzioni.

  2. Usare le informazioni seguenti per completare la creazione di risorse nella scheda Informazioni di base.

    Nome Valore
    Gruppo di risorse Creare un nuovo nome di gruppo di risorse stock-prototype.
    Nome dell'app per le funzioni Anteporre il nome a api. Ad esempio: api-jamie.
    Codice o contenitore Selezionare codice.
    Stack di runtime selezionare Node.js.
    Versione Selezionare una versione LTS di Node.js.
    Paese Selezionare un'area nelle vicinanze.
    Sistema operativo Selezionare Linux.
    Hosting Selezionare Piano a consumo.

  3. Non compilare altre schede e selezionare Rivedi e crea e quindi Crea. Attendere il completamento della distribuzione prima di continuare.

  4. Selezionare Vai alla risorsa per aprire la nuova app per le funzioni.

Configurare la distribuzione di GitHub

Connettere la nuova app per le funzioni al repository GitHub per abilitare la distribuzione continua. In un ambiente di produzione si distribuiscono invece le modifiche al codice in uno slot di staging prima di scambiarle nell'ambiente di produzione.

  1. Nella pagina del portale di Azure per la nuova app per le funzioni selezionare Centro distribuzione dal menu a sinistra.

  2. Selezionare Origine di GitHub.

  3. Usare le informazioni seguenti per completare la configurazione della distribuzione.

    Nome Valore
    Organizzazione Selezionare l'account GitHub.
    Repository Cercare e selezionare mslearn-advocates.azure-functions-and-signalr.
    Ramo Selezionare il ramo main.
    Opzioni flusso di lavoro Selezionare Aggiungi un flusso di lavoro ....
    Tipo di autenticazione Selezionare l’identità assegnata dall'utente.
    Subscription Selezionare la stessa sottoscrizione visualizzata nella parte superiore della pagina.
    Identità Selezionare Crea nuovo.

  4. Selezionare Salva nella parte superiore della sezione per salvare le impostazioni. Verrà creato un nuovo file del flusso di lavoro nel repository con fork.

  5. Questa configurazione di distribuzione crea un file del flusso di lavoro GitHub Actions nel repository. È necessario aggiornare il file del flusso di lavoro per usare il percorso del pacchetto corretto per l'app per le funzioni.

A questo punto, la distribuzione di GitHub potrebbe generare un errore a causa di una configurazione errata nell’identità gestita assegnata dall’utente creata nel gruppo di risorse in Azure.

Aggiornare l’identità gestita

  1. Nella pagina della nuova app per le funzioni nel portale di Azure, selezionare il gruppo di risorse in Panoramica>Essenziali e quindi selezionare l’identità gestita in Risorse. Questa identità gestita è stata creata da Funzioni al momento dell’abilitazione della distribuzione di GitHub.
  2. Nella pagina identità gestita, selezionare Impostazioni>credenziali federate e quindi selezionare le credenziali esistenti.
  3. In Connetti l'account Github modificare l'impostazione per Entità in Ambiente e immettere Production per Ambiente.
  4. Selezionare Aggiorna per aggiornare le credenziali.

Modificare il flusso di lavoro di distribuzione di GitHub

  1. Nel terminale di Visual Studio Code trascinare il nuovo file del flusso di lavoro dal fork (origine).

    git pull origin main

    Verrà posizionata una nuova cartella in .github con un percorso al file del flusso di lavoro: .github/workflows/main_RESOURCE_NAME.yml dove RESOURCE_NAME è il nome dell’app per le funzioni.

  2. Aprire il file del flusso di lavoro e modificare il valore name nella parte superiore del file in Server.

  3. Dal momento che il repository di origine include l’app per le funzioni in una sottodirectory, il file di azione deve essere cambiato per riflettere tale valore. Nella sezione env aggiungere una nuova variabile denominata PACKAGE_PATH per usare il percorso del pacchetto.

    env:
  PACKAGE_PATH: 'start/server'

  4. Trovare il passaggio Risolvere le dipendenze del progetto usando Npm e sostituire il contenuto con il codice YAML seguente per usare anche il percorso della sottodirectory del pacchetto. La modifica critica è il percorso nel comando pushd per includere la variabile env.PACKAGE_PATH.

    - name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

  5. Trovare il passaggio artefatto zip per la distribuzione e sostituire il contenuto con il codice YAML seguente per usare anche il percorso della sottodirectory del pacchetto.

    - name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

    Il file ZIP viene inserito nella radice del repository in modo che il valore ../ sia necessario per posizionare il file ZIP nella radice.

  6. Salvare il file ed eseguire il commit delle modifiche nel repository.

    git add .
git commit -m "Update deployment workflow to use package path"
git push

    Questa modifica attiverà l'esecuzione del flusso di lavoro. È possibile guardare il flusso di lavoro dalla sezione Azioni del fork in GitHub.

Configurare le variabili di ambiente per le funzioni API

  1. Nel portale di Azure, individuare l’app per le funzioni e selezionare Impostazioni>Configurazione, quindi selezionare Nuova impostazione dell’applicazione.

  2. Immettere le impostazioni per le stringhe di connessione Cosmos DB e SignalR. È possibile trovare i valori in local.settings.json nella cartella start/server.

    Nome Valore
    COSMOSDB_CONNECTION_STRING Stringa di connessione per l'account Cosmos DB.
    SIGNALR_CONNECTION_STRING Stringa di connessione per l'account SignalR.

  3. Selezionare Salva per salvare le impostazioni.

Testare la distribuzione delle funzioni API

  1. Nel portale di Azure selezionare Panoramica e selezionare URL per aprire l'app in un browser.
  2. Copiare l'URL, che sarà necessario quando si aggiornerà il file .env client per il valore BACKEND_URL quando si lavorerà nell'unità 7.
  3. Aprire l'URL in un browser per testare le funzioni API.
  4. Aggiungere /api/getStocks all'URL nel browser e premere INVIO. Dovrebbe essere visualizzata una matrice JSON con dati azionari.

Il codice del server è stato aggiornato per restituire le scorte con SignalR ed è stato distribuito in un'app per le funzioni. Successivamente, si aggiornerà il client per usare SignalR per ricevere gli aggiornamenti.