Упражнение. Обеспечение автоматических обновлений в веб-приложении с помощью службы SignalR

12 мин

Чтобы добавить SignalR в этот прототип, необходимо создать следующее:

Ресурс Azure SignalR
Несколько новых функций для поддержки SignalR
Обновление клиента для поддержки SignalR

Создание ресурса SignalR

Необходимо создать ресурс Azure SignalR.

Вернитесь к терминалу, чтобы создать ресурс SignalR.
Перейдите к подкаталогу setup-resources , чтобы создать ресурс.
```
cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..
```
Скопируйте строка подключения для ресурса SignalR. Это потребуется для обновления кода сервера.

Тип ресурса Переменная среды

Служба Называется SIGNALR_CONNECTION_STRING

Тип ресурса	Переменная среды
Служба	Называется SIGNALR_CONNECTION_STRING

Обновление переменных среды конфигурации сервера

В ./start/server/local.settings.json добавьте переменную в объект "Значения ", названный SIGNALR_CONNECTION_STRING значением, указанным в терминале, и сохраните файл.

`signalr-open-connection` Создание функции

Веб-клиент использует пакет SDK клиента SignalR для установления подключения к серверу. Пакет SDK извлекает подключение через функцию signalr-open-connection для подключения к службе.

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Найдите и выберите команду Azure Functions: Create Function (Функции Azure: создание функции).
Выберите "Задать" по умолчанию, а затем выберите "Пуск" или "Сервер", чтобы задать расположение приложения-функции.
Выберите "Да", когда будет предложено инициализировать проект для использования с VS Code?.
При появлении запроса введите представленные ниже сведения.

Имя. Значение

Template Триггер HTTP

Имя. signalr-open-connection

Теперь доступен ./start/server/src/functionsфайл с именем signalr-open-connection.ts.

Имя.	Значение
Template	Триггер HTTP
Имя.	signalr-open-connection

Откройте signalr-open-connection.ts и замените все следующим кодом.

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

Сведения о подключении SignalR возвращаются из функции.

`signalr-send-message` Создание функции

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Найдите и выберите команду Azure Functions: Create Function (Функции Azure: создание функции).
Выберите расположение приложения-функции в качестве запуска или сервера.

При появлении запроса введите представленные ниже сведения.

Имя.	Значение
Template	Триггер Azure Cosmos DB
Имя.	`signalr-send-message`
Строка подключения Cosmos DB	COSMOSDB_CONNECTION_STRING
Имя базы данных для отслеживания	`stocksdb`
Имя коллекции	`stocks`
Проверяет наличие и автоматически создает коллекцию аренд	true

Чтобы увидеть новые сведения, обновите окно проводника в Visual Studio Code. Файл с именем signalr-open-connection теперь доступен по адресу ./start/server/src/functions.

Откройте signalr-send-message.ts и замените все следующим кодом.

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

Определение входящих данных: comingFromCosmosDB объект определяет триггер Cosmos DB для отслеживания изменений.
Определение исходящего транспорта: goingOutToSignalR объект определяет то же соединение SignalR. Имя концентратора является тем же концентратором default.
Подключение данных к транспорту: dataToMessage получает измененные элементы в stocks таблице и отправляет каждый измененный элемент по отдельности через SignalR с помощью extraOutputs одного и того же концентратораdefault.
Подключение к приложению: app.CosmosDB привязки связаны с именем send-signalr-messagesфункции.

Фиксация изменений и отправка на GitHub

В терминале зафиксируйте изменения в репозитории.
```
git add .
git commit -m "Add SignalR functions"
git push
```

`signalr-send-message` Создание функции

Создайте приложение-функцию и связанные ресурсы в Azure, в котором можно опубликовать новый код функций.

Откройте портал Azure, чтобы создать новое приложение-функцию.

Чтобы завершить вкладку "Основы создания ресурсов" , используйте следующие сведения.

Имя.	Значение
Группа ресурсов	Создание имен `stock-prototype`групп ресурсов.
Имя приложения-функции	Добавьте имя `api`в . Например, `api-jamie`.
Код или контейнер	Выберите код.
Стек среды выполнения	Выберите Node.js.
Версия	Выберите версию LTS Node.js.
Область/регион	Выберите ближайший регион.
Операционная система	Щелкните Linux.
Размещение на компьютере	Выберите план потребления.

Не заполняйте другие вкладки и нажмите кнопку "Проверить и создать ", а затем нажмите кнопку "Создать". Дождитесь завершения развертывания, прежде чем продолжать работу.
Выберите "Перейти к ресурсу ", чтобы открыть новое приложение-функцию.

Настройка развертывания GitHub

Подключите новое приложение-функцию к репозиторию GitHub, чтобы включить непрерывное развертывание. В рабочей среде вместо этого необходимо развернуть изменения кода в промежуточном слоте перед переключением их в рабочую среду.

На странице портал Azure для нового приложения-функции выберите Центр развертывания в меню слева.
Выберите источник GitHub.

Чтобы завершить настройку развертывания, используйте следующие сведения.

Имя.	Значение
Организация	Выберите учетную запись GitHub.
Репозиторий	Найдите и выберите элемент `mslearn-advocates.azure-functions-and-signalr`.
Ветвь	Выберите главную ветвь.
Параметр рабочего процесса	Выберите " Добавить рабочий процесс...".
Тип аутентификации	Выберите назначаемое пользователем удостоверение.
Отток подписок	Выберите ту же подписку, что и в верхней части страницы.
Идентификация	Выберите Создать.

Нажмите кнопку "Сохранить " в верхней части раздела, чтобы сохранить параметры. При этом создается новый файл рабочего процесса в вилке репозитория.
Эта конфигурация развертывания создает файл рабочего процесса GitHub Actions в репозитории. Необходимо обновить файл рабочего процесса, чтобы использовать правильный путь к пакету для приложения-функции.

На этом этапе развертывание GitHub может привести к ошибке из-за неправильной конфигурации управляемого удостоверения, назначаемого пользователем, созданного в группе ресурсов в Azure.

Обновление управляемого удостоверения

На странице нового приложения-функции в портал Azure выберите группу ресурсов в Overview>Essentials, а затем выберите управляемое удостоверение в разделе "Ресурсы". Это управляемое удостоверение было создано Функцией при включении развертывания GitHub.
На странице "Управляемое удостоверение" выберите "Параметры федеративных учетных> данных" и выберите существующие учетные данные.
В разделе "Подключение учетной записи Github" измените параметр entity to Environment и введите Production для среды.
Выберите "Обновить", чтобы обновить учетные данные.

Изменение рабочего процесса развертывания GitHub

В терминале Visual Studio Code извлеките новый файл рабочего процесса из вилки (источника).
```
git pull origin main
```
Это должно поместить новую папку на github с путем к файлу рабочего процесса: .github/workflows/main_RESOURCE_NAME.yml где RESOURCE_NAME находится имя приложения-функции.
Откройте файл рабочего процесса и измените name значение в верхней части файла Serverна .
Так как исходный репозиторий содержит приложение-функцию в подкаталоге, файл действия должен измениться, чтобы отразить это. В разделе env добавьте новую переменную с именемPACKAGE_PATH, чтобы использовать путь к пакету.
```
env:
  PACKAGE_PATH: 'start/server'
```
Найдите шаг "Разрешить зависимости проекта" с помощью шага Npm и замените содержимое следующим yamL, чтобы также использовать путь к подкаталогу пакета. Критическое изменение — это путь в команде pushd для включения переменной 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
```
Найдите артефакт Zip для шага развертывания и замените содержимое следующим YAML, чтобы также использовать путь к подкаталогу пакета.
```
- 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
```
ZIP-файл помещается в корневой каталог репозитория, поэтому ../ значение необходимо для размещения ZIP-файла в корневом каталоге.
Сохраните файл и зафиксируйте изменения в репозитории.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push
```
Это изменение активирует рабочий процесс для запуска. Вы можете просмотреть рабочий процесс из раздела "Действия " вилки на GitHub.

Настройка переменных среды для функций API

В портал Azure найдите приложение-функцию и выберите "Конфигурация параметров>", а затем выберите новый параметр приложения.

Введите параметры для строка подключения Cosmos DB и SignalR. Значения можно найти в local.settings.json папке start/server .

Имя.	Значение
COSMOSDB_CONNECTION_STRING	Строка подключения для учетной записи Cosmos DB.
SIGNALR_CONNECTION_STRING	Строка подключения для учетной записи SignalR.

Нажмите кнопку Сохранить, чтобы сохранить параметры.

Тестирование развертывания функций API

В портал Azure выберите "Обзор" и выберите URL-адрес, чтобы открыть приложение в браузере.
Скопируйте URL-адрес, вам потребуется, чтобы при обновлении клиентского .env файла для BACKEND_URL значения при работе в модуле 7.
Откройте URL-адрес в браузере, чтобы проверить функции API.
Добавьте /api/getStocks URL-адрес в браузере и нажмите клавишу ВВОД. Вы должны увидеть массив JSON с данными о запасе.

Вы обновили код сервера, чтобы вернуть акции с помощью SignalR, и вы развернули в приложении-функции. Затем вы обновите клиент, чтобы использовать SignalR для получения обновлений.

Упражнение. Обеспечение автоматических обновлений в веб-приложении с помощью службы SignalR

Создание ресурса SignalR

Обновление переменных среды конфигурации сервера

signalr-open-connection Создание функции

signalr-send-message Создание функции

Фиксация изменений и отправка на GitHub

signalr-send-message Создание функции

Настройка развертывания GitHub

Обновление управляемого удостоверения

Изменение рабочего процесса развертывания GitHub

Настройка переменных среды для функций API

Тестирование развертывания функций API

Обратная связь

`signalr-open-connection` Создание функции

`signalr-send-message` Создание функции

`signalr-send-message` Создание функции