Ćwiczenie — włączanie aktualizacji automatycznych w aplikacji internetowej za pomocą usługi SignalR Service

  • 12 min

Aby dodać usługę SignalR do tego prototypu, należy utworzyć następujące elementy:

  • Zasób usługi Azure SignalR
  • Kilka nowych funkcji do obsługi usługi SignalR
  • Aktualizowanie klienta w celu obsługi usługi SignalR

Tworzenie zasobu usługi SignalR

Musisz utworzyć zasób usługi Azure SignalR.

  1. Wróć do terminalu, aby utworzyć zasób usługi SignalR.

  2. Przejdź do podkatalogu setup-resources , aby utworzyć zasób.

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

  3. Skopiuj parametry połączenia dla zasobu usługi SignalR. Będzie to konieczne, aby zaktualizować kod serwera.

    Typ zasobu Zmienna środowiskowa
    Azure SignalR Określane jako SIGNALR_CONNECTION_STRING

Aktualizowanie zmiennych środowiskowych konfiguracji serwera

W pliku ./start/server/local.settings.json dodaj zmienną do obiektu Values o nazwie SIGNALR_CONNECTION_STRING z wartością wymienioną w terminalu i zapisz plik.

signalr-open-connection Tworzenie funkcji

Klient internetowy używa zestawu SDK klienta usługi SignalR do nawiązania połączenia z serwerem. Zestaw SDK pobiera połączenie za pośrednictwem funkcji o nazwie signalr-open-connection w celu nawiązania połączenia z usługą.

  1. Otwórz paletę poleceń programu Visual Studio Code, naciskając klawisz F1.

  2. Wyszukaj polecenie Azure Functions: Create Function i wybierz je.

  3. Wybierz pozycję Ustaw wartość domyślną , a następnie wybierz pozycję start/serwer , aby ustawić lokalizację aplikacji funkcji.

  4. Wybierz pozycję Tak , gdy zostanie wyświetlony monit o zainicjowanie projektu do użycia z programem VS Code?.

  5. Po wyświetleniu monitu podaj następujące informacje.

    Nazwa/nazwisko Wartość
    Template Wyzwalacz HTTP
    Nazwisko signalr-open-connection

    Plik o nazwie signalr-open-connection.ts jest teraz dostępny pod adresem ./start/server/src/functions.

  6. Otwórz signalr-open-connection.ts i zastąp wszystko następującym kodem.

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

    Informacje o połączeniu usługi SignalR są zwracane z funkcji .

signalr-send-message Tworzenie funkcji

  1. Otwórz paletę poleceń programu Visual Studio Code, naciskając klawisz F1.

  2. Wyszukaj polecenie Azure Functions: Create Function i wybierz je.

  3. Wybierz lokalizację aplikacji funkcji jako start/serwer.

  4. Po wyświetleniu monitu podaj następujące informacje.

    Nazwa/nazwisko Wartość
    Template Wyzwalacz usługi Azure Cosmos DB
    Nazwisko signalr-send-message
    Parametry połączenia usługi Cosmos DB COSMOSDB_CONNECTION_STRING
    Nazwa bazy danych do monitorowania stocksdb
    Nazwa kolekcji stocks
    Sprawdza istnienie i automatycznie tworzy kolekcję dzierżaw prawda

    Odśwież okno Eksplorator programu Visual Studio Code, aby zobaczyć aktualizacje. Plik o nazwie signalr-open-connection jest teraz dostępny pod adresem ./start/server/src/functions.

  5. Otwórz signalr-send-message.ts i zastąp wszystko następującym kodem.

    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);
  • Definiowanie danych przychodzących: comingFromCosmosDB obiekt definiuje wyzwalacz usługi Cosmos DB, aby obserwować zmiany.
  • Definiowanie transportu wychodzącego: goingOutToSignalR obiekt definiuje to samo połączenie usługi SignalR. HubName jest tym samym koncentratorem default.
  • Łączenie danych z transportem: Element dataToMessage pobiera zmienione elementy w stocks tabeli i wysyła każdy zmieniony element indywidualnie za pomocą usługi SignalR przy użyciu extraOutputs tego samego centrum default.
  • Połącz z aplikacją: app.CosmosDB powiązania łączą się z nazwą send-signalr-messagesfunkcji .

Zatwierdzanie zmian i wypychanie do usługi GitHub

  1. W terminalu zatwierdź zmiany w repozytorium.

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

signalr-send-message Tworzenie funkcji

Utwórz aplikację funkcji i powiązane zasoby na platformie Azure, do których można opublikować nowy kod funkcji.

  1. Otwórz witrynę Azure Portal, aby utworzyć nową aplikację funkcji.

  2. Skorzystaj z poniższych informacji, aby ukończyć kartę Podstawy tworzenia zasobów.

    Nazwa/nazwisko Wartość
    Grupa zasobów Utwórz nowe nazwy stock-prototypegrup zasobów .
    Nazwa aplikacji funkcji Postpend your name to api. Na przykład api-jamie.
    Kod lub kontener Wybierz kod.
    Stos środowiska uruchomieniowego Wybierz pozycję Node.js.
    Wersja Wybierz wersję Node.js LTS.
    Region (Region) Wybierz region w pobliżu.
    System operacyjny Wybierz pozycję Linux.
    Hosting Wybierz pozycję Plan zużycia.

  3. Nie wypełniaj żadnych innych kart i wybierz pozycję Przejrzyj i utwórz , a następnie wybierz pozycję Utwórz. Przed kontynuowaniem zaczekaj na ukończenie wdrażania.

  4. Wybierz pozycję Przejdź do zasobu , aby otworzyć nową aplikację funkcji.

Konfigurowanie wdrożenia usługi GitHub

Połącz nową aplikację funkcji z repozytorium GitHub, aby umożliwić ciągłe wdrażanie. W środowisku produkcyjnym zamiast tego należy wdrożyć zmiany kodu w miejscu przejściowym przed zamianą ich na środowisko produkcyjne.

  1. Na stronie witryny Azure Portal dla nowej aplikacji funkcji wybierz pozycję Centrum wdrażania z menu po lewej stronie.

  2. Wybierz pozycję Źródło usługi GitHub.

  3. Skorzystaj z poniższych informacji, aby ukończyć konfigurację wdrożenia.

    Nazwa/nazwisko Wartość
    Organizacja Wybierz konto usługi GitHub.
    Repozytorium Wyszukaj i wybierz pozycję mslearn-advocates.azure-functions-and-signalr.
    Oddział Wybierz gałąź główną.
    Opcja przepływu pracy Wybierz pozycję Dodaj przepływ pracy ....
    Typ uwierzytelniania Wybierz pozycję Tożsamość przypisana przez użytkownika.
    Subskrypcja Wybierz tę samą subskrypcję, jak pokazano w górnej części strony.
    Tożsamość Wybierz pozycjęUtwórz nowy.

  4. Wybierz pozycję Zapisz w górnej części sekcji, aby zapisać ustawienia. Spowoduje to utworzenie nowego pliku przepływu pracy w rozwidlonym repozytorium.

  5. Ta konfiguracja wdrożenia tworzy plik przepływu pracy funkcji GitHub Actions w repozytorium. Należy zaktualizować plik przepływu pracy, aby użyć poprawnej ścieżki pakietu dla aplikacji funkcji.

W tym momencie wdrożenie usługi GitHub może wygenerować błąd z powodu nieprawidłowej konfiguracji tożsamości zarządzanej przypisanej przez użytkownika utworzonej w grupie zasobów na platformie Azure.

Aktualizowanie tożsamości zarządzanej

  1. Na stronie nowej aplikacji funkcji w witrynie Azure Portal wybierz grupę zasobów w obszarze Przegląd>Podstawy, a następnie wybierz tożsamość zarządzaną w obszarze Zasoby. Ta tożsamość zarządzana została utworzona przez usługę Functions po włączeniu wdrożenia usługi GitHub.
  2. Na stronie Tożsamość zarządzana wybierz pozycję Ustawienia>Poświadczenia federacyjne, a następnie wybierz istniejące poświadczenia.
  3. W obszarze Połącz konto usługi Github zmień ustawienie dla jednostki na Środowisko i wprowadź wartość Production Environment (Środowisko).
  4. Wybierz pozycję Aktualizuj, aby zaktualizować poświadczenia.

Edytowanie przepływu pracy wdrażania usługi GitHub

  1. W terminalu programu Visual Studio Code pobierz nowy plik przepływu pracy z rozwidlenia (źródła).

    git pull origin main

    Powinno to spowodować umieszczenie nowego folderu w witrynie .github ze ścieżką do pliku przepływu pracy: .github/workflows/main_RESOURCE_NAME.yml gdzie RESOURCE_NAME jest nazwą aplikacji funkcji.

  2. Otwórz plik przepływu pracy i zmień name wartość w górnej części pliku na Server.

  3. Ponieważ repozytorium źródłowe ma aplikację funkcji w podkatalogu, plik akcji musi ulec zmianie, aby to odzwierciedlić. W sekcji env dodaj nową zmienną o nazwie PACKAGE_PATH , aby użyć ścieżki pakietu.

    env:
  PACKAGE_PATH: 'start/server'

  4. Znajdź krok Rozwiąż zależności projektu przy użyciu narzędzia Npm i zastąp zawartość następującym kodem YAML, aby również użyć ścieżki podkatalogu pakietu. Zmiana krytyczna to ścieżka w poleceniu pushd , aby uwzględnić zmienną 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. Znajdź artefakt zip dla kroku wdrożenia i zastąp zawartość następującym kodem YAML, aby również użyć ścieżki podkatalogu pakietu.

    - 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

    Plik zip jest umieszczany w katalogu głównym repozytorium, więc ../ wartość jest niezbędna do umieszczania pliku zip w katalogu głównym.

  6. Zapisz plik i zatwierdź zmiany w repozytorium.

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

    Ta zmiana spowoduje wyzwolenie przepływu pracy do uruchomienia. Przepływ pracy można obejrzeć w sekcji Akcje rozwidlenia w usłudze GitHub.

Konfigurowanie zmiennych środowiskowych dla funkcji interfejsu API

  1. W witrynie Azure Portal znajdź aplikację funkcji i wybierz pozycję Konfiguracja ustawień>, a następnie wybierz pozycję Nowe ustawienie aplikacji.

  2. Wprowadź ustawienia parametry połączenia usługi Cosmos DB i SignalR. Wartości można znaleźć w local.settings.json folderze start/server .

    Nazwa/nazwisko Wartość
    COSMOSDB_CONNECTION_STRING Parametry połączenia dla konta usługi Cosmos DB.
    SIGNALR_CONNECTION_STRING Parametry połączenia dla konta usługi SignalR.

  3. Wybierz pozycję Zapisz, aby zapisać ustawienia.

Testowanie wdrożenia funkcji interfejsu API

  1. W witrynie Azure Portal wybierz pozycję Przegląd i wybierz pozycję Adres URL, aby otworzyć aplikację w przeglądarce.
  2. Skopiuj adres URL, który będzie potrzebny podczas aktualizowania pliku klienta .env dla BACKEND_URL wartości podczas pracy w lekcji 7.
  3. Otwórz adres URL w przeglądarce, aby przetestować funkcje interfejsu API.
  4. Dołącz /api/getStocks do adresu URL w przeglądarce i naciśnij Enter. Powinna zostać wyświetlona tablica JSON z danymi magazynowymi.

Zaktualizowano kod serwera w celu zwrócenia zasobów za pomocą usługi SignalR i wdrożono go w aplikacji funkcji. Następnie zaktualizujesz klienta, aby używał usługi SignalR do odbierania aktualizacji.