Übung: Aktivieren automatischer Updates in einer Webanwendung mithilfe von SignalR Service

  • 12 Minuten

Zum Hinzufügen von SignalR zu diesem Prototyp müssen Sie Folgendes erstellen:

  • Eine Azure SignalR-Ressource
  • Einige neue Funktionen zur Unterstützung von SignalR
  • Aktualisieren des Clients zur Unterstützung von SignalR

Erstellen einer SignalR-Ressource

Sie müssen eine Azure SignalR-Ressource erstellen.

  1. Kehren Sie zum Terminal zurück, um die SignalR-Ressource zu erstellen.

  2. Navigieren Sie zum setup-resources Unterverzeichnis, um die Ressource zu erstellen.

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

  3. Kopieren Sie die Verbindungszeichenfolge für die SignalR-Ressource. Sie benötigen dies, um den Servercode zu aktualisieren.

    Ressourcentyp Umgebungsvariable
    Azure SignalR Als SIGNALR_CONNECTION_STRING bezeichnet

Aktualisieren von Serverkonfigurationsumgebungsvariablen

Fügen Sie in ./start/server/local.settings.json eine Variable zum Wert-Objekt namens SIGNALR_CONNECTION_STRING hinzu, mit dem im Terminal aufgeführten Wert, und speichern Sie die Datei.

Erstellen der signalr-open-connection Funktion

Der Webclient nutzt das SignalR-Client SDK, um eine Verbindung mit dem Server herzustellen. Das SDK ruft die Verbindung mithilfe einer Funktion namens signalr-open-connection, um eine Verbindung mit dem Dienst herzustellen.

  1. Öffnen Sie die Visual Studio Code-Befehlspalette, indem Sie F1 drücken.

  2. Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie diesen aus.

  3. Wählen Sie Standard festlegen und dann Start/Server aus, um den Speicherort der Funktions-App festzulegen.

  4. Wählen Sie Ja aus, wenn Sie Folgendes gefragt werden: Das Projekt für die Verwendung mit VS Code initialisieren?.

  5. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:

    Name Wert
    Vorlage HTTP-Trigger
    Name signalr-open-connection

    Eine Datei mit dem Namen signalr-open-connection.ts ist jetzt unter ./start/server/src/functions verfügbar.

  6. Öffnen Sie signalr-open-connection.ts, und ersetzen Sie alles durch den folgenden Code.

    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]
});

    Die SignalR-Verbindungsinformationen werden von der Funktion zurückgegeben.

Erstellen der signalr-send-message-Funktion

  1. Öffnen Sie die Visual Studio Code-Befehlspalette, indem Sie F1 drücken.

  2. Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie diesen aus.

  3. Wählen Sie den Speicherort der Funktions-App als Start/Server aus.

  4. Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:

    Name Wert
    Vorlage Azure Cosmos DB-Trigger
    Name signalr-send-message
    Cosmos DB-Verbindungszeichenfolge COSMOSDB_CONNECTION_STRING
    Zu überwachender Datenbankname stocksdb
    Sammlungsname stocks
    Überprüft das Vorhandensein und erstellt automatisch die Leasesammlung true

    Aktualisieren Sie das Explorer-Fenster in Visual Studio Code, damit die Updates angezeigt werden. Eine Datei mit dem Namen signalr-open-connection ist jetzt unter ./start/server/src/functions verfügbar.

  5. Öffnen Sie signalr-send-message.ts, und ersetzen Sie alles durch den folgenden Code.

    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);
  • Definieren von eingehenden Daten: Das comingFromCosmosDB Objekt definiert den Cosmos DB-Trigger, um auf Änderungen zu achten.
  • Ausgehenden Transport definieren: Das goingOutToSignalR Objekt definiert dieselbe SignalR-Verbindung. Der hubName ist derselbe Hub default.
  • Verbinden von Daten zum Transport: Die dataToMessage holt die geänderten Elemente aus der stocks Tabelle und sendet jedes geänderte Element mithilfe von extraOutputs desselben Hubs default einzeln über SignalR.
  • Herstellen einer Verbindung mit der App: Die app.CosmosDB verknüpft die Bindungen mit dem Funktionsnamen send-signalr-messages.

Übernehmen von Änderungen und Push an GitHub

  1. Übernehmen Sie im Terminal die Änderungen an dem Repository.

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

Erstellen der signalr-send-message-Funktion

Erstellen Sie eine Funktions-App und zugehörige Ressourcen in Azure, in denen Sie den neuen Funktionscode veröffentlichen können.

  1. Öffnen Sie das Azure-Portal, um eine neue Funktions-App zu erstellen.

  2. Verwenden Sie die folgenden Informationen, um die Registerkarte Grundlagen der Ressourcenerstellung abzuschließen.

    Name Wert
    Resource group Erstellen Sie eine neue Ressourcengruppe namens stock-prototype.
    Name der Funktions-App Hängen Sie Ihren Namen an api an. Beispiel: api-jamie.
    Code oder Container Wählen Sie Code.
    Runtimestapel Wählen Sie Node.js aus.
    Version Wählen Sie eine LTS-Version von Node.js aus.
    Region Wählen Sie eine Region in Ihrer Nähe aus.
    Betriebssystem Wählen Sie Linux aus.
    Hosting Wählen Sie Verbrauchsplan aus.

  3. Füllen Sie keine anderen Registerkarten aus, und wählen Sie Überprüfen und Erstellen und dann Erstellen aus. Warten Sie auf den Abschluss der Bereitstellung, bevor Sie fortfahren.

  4. Wählen Sie Zur Ressource wechseln aus, um die neue Funktions-App zu öffnen.

Konfigurieren der GitHub-Bereitstellung

Verbinden Sie Ihre neue Funktions-App mit dem GitHub-Repository, um eine kontinuierliche Bereitstellung zu ermöglichen. In einer Produktionsumgebung würden Sie stattdessen Codeänderungen an einem Stagingslot bereitstellen, bevor Sie sie in die Produktion eintauschen.

  1. Wählen Sie auf der Seite "Azure-Portal" für die neue Funktions-App das Bereitstellungscenter im linken Menü aus.

  2. Wählen Sie die Quelle von GitHub aus.

  3. Verwenden Sie die folgenden Informationen, um die Bereitstellungskonfiguration abzuschließen.

    Name Wert
    Organisation Wählen Sie Ihr GitHub-Konto.
    Repository Suchen Sie nach mslearn-advocates.azure-functions-and-signalr, und wählen Sie diese Option aus.
    Verzweigung Wählen Sie den Mainbranch aus.
    Workflowoption Workflow hinzufügen... auswählen.
    Authentication type Benutzerseitig zugewiesene Identität auswählen.
    Abonnement Wählen Sie dasselbe Abonnement wie oben auf der Seite aus.
    Identität Wählen Sie Neu erstellen.

  4. Wählen Sie oben im Abschnitt Speichern aus, um die Einstellungen zu speichern. Dadurch wird eine neue Workflowdatei in Ihrem Verzweigungs-Repository erstellt.

  5. Diese Bereitstellungskonfiguration erstellt eine GitHub Actions-Workflowdatei im Repository. Sie müssen die Workflowdatei aktualisieren, um den richtigen Paketpfad für die Funktions-App zu verwenden.

An diesem Punkt generiert Ihre GitHub-Bereitstellung möglicherweise einen Fehler aufgrund einer falschen Konfiguration in der benutzerseitig zugewiesenen verwalteten Identität, die in Ihrer Ressourcengruppe in Azure erstellt wurde.

Aktualisieren der verwalteten Identität

  1. Wählen Sie auf Ihrer Seite „Neue Funktions-App“ im Azure-Portal Ihre Ressourcengruppe in Übersicht>Grundlagen aus, und wählen Sie dann die verwaltete Identität unter Ressourcen aus. Diese verwaltete Identität wurde von Functions erstellt, als Sie die GitHub-Bereitstellung aktiviert haben.
  2. Wählen Sie auf der Seite Verwaltete Identität die Option Einstellungen>Partneranmeldeinformationen aus, und wählen Sie dann die vorhandene Anmeldeinformation aus.
  3. Ändern Sie unter Ihr Github-Konto verbinden die Einstellung für Entität in Umgebung, und geben Sie Production für Umgebung ein.
  4. Wählen Sie Aktualisieren aus, um die Anmeldeinformation zu aktualisieren.

GitHub-Bereitstellungsworkflow bearbeiten

  1. Ziehen Sie im Visual Studio Code-Terminal die neue Workflowdatei von Ihrer Verzweigung (Ursprung) nach unten.

    git pull origin main

    Dadurch sollte ein neuer Ordner auf .github mit einem Pfad zu Ihrer Workflowdatei .github/workflows/main_RESOURCE_NAME.yml platziert werden, wobei RESOURCE_NAME der Name der Funktions-App ist.

  2. Öffnen Sie die Workflowdatei, und ändern Sie den name-Wert oben in der Datei in Server.

  3. Da das Quellrespository die Funktions-App in einem Unterverzeichnis enthält, muss die Aktionsdatei geändert werden, um dies widerzuspiegeln. Fügen Sie im Abschnitt env eine neue Variable namens PACKAGE_PATH hinzu, um den Paketpfad zu verwenden.

    env:
  PACKAGE_PATH: 'start/server'

  4. Suchen Sie den Schritt Projektabhängigkeiten mithilfe von Npm auflösen, und ersetzen Sie den Inhalt durch den folgenden YAML, um auch den Paketunterverzeichnispfad zu verwenden. Die kritische Änderung ist der Pfad im pushd Befehl, um die env.PACKAGE_PATH Variable einzuschließen.

    - 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. Suchen Sie den Schritt Zip-Artefakt für die Bereitstellung, und ersetzen Sie den Inhalt durch den folgenden YAML, um auch den Paketunterverzeichnispfad zu verwenden.

    - 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

    Die ZIP-Datei wird im Stammverzeichnis des Repositorys platziert, sodass der ../ Wert erforderlich ist, um die ZIP-Datei im Stammverzeichnis zu platzieren.

  6. Speichern Sie die Datei, und übernehmen Sie die Änderungen am Repository.

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

    Diese Änderung löst die Ausführung des Workflows aus. Sie können den Workflow im Abschnitt Aktionen der Verzweigung auf GitHub ansehen.

Konfigurieren der Umgebungsvariablen für die API-Funktionen

  1. Suchen Sie im Azure-Portal nach Ihrer Funktions-App, und wählen Sie Einstellungen>Konfiguration aus, und wählen Sie dann Neue Anwendungseinstellung aus.

  2. Geben Sie die Einstellungen für die Verbindungszeichenfolgen Cosmos DB und SignalR ein. Sie finden die Werte im local.settings.json im start/server Ordner.

    Name Wert
    COSMOSDB_CONNECTION_STRING Die Verbindungszeichenfolge für das Azure Cosmos DB-Konto.
    SIGNALR_CONNECTION_STRING Die Verbindungszeichenfolge für das SignalR-Konto.

  3. Klicken Sie auf Speichern, um die Einstellungen zu speichern.

Testen der Bereitstellung der API-Funktionen

  1. Wählen Sie im Azure-Portal Übersicht und dann die URL aus, um die App in einem Browser zu öffnen.
  2. Kopieren Sie die URL, die Sie benötigen, wenn Sie die Clientdatei .env für den BACKEND_URL Wert aktualisieren, wenn Sie in Einheit 7 arbeiten.
  3. Öffnen Sie die URL in einem Browser, um die API-Funktionen zu testen.
  4. Fügen Sie /api/getStocks zur URL im Browser an, und drücken Sie die Eingabetaste. Es sollte ein JSON-Array mit Bestandsdaten angezeigt werden.

Sie haben den Servercode aktualisiert, um Bestände mit SignalR zurückzugeben, und Sie haben sie in einer Funktions-App bereitgestellt. Als Nächstes aktualisieren Sie den Client so, dass SignalR zum Empfangen von Updates verwendet wird.