Руководство. Создание бессерверного приложения чата с помощью службы Azure Web PubSub и Статические веб-приложения Azure

Azure Web PubSub помогает создавать веб-приложения для обмена сообщениями в режиме реального времени с помощью WebSocket. Статические веб-приложения Azure помогает автоматически создавать и развертывать веб-приложения с полным стеком в Azure из репозитория кода. В этом руководстве вы узнаете, как использовать Web PubSub и Статические веб-приложения вместе для создания приложения комнаты чата в режиме реального времени.

В частности, вы узнаете, как:

• Создание бессерверного приложения чата
• Работа с входными и выходными привязками функции Web PubSub
• Работа с Статические веб-приложения

Внимание

Необработанные строка подключения отображаются в этой статье только для демонстрационных целей.

Строка подключения содержит сведения об авторизации, требуемые для доступа приложения к службе Azure Web PubSub. Ключ доступа в строке подключения аналогичен паролю привилегированного пользователя для службы. В рабочих средах всегда защищать ключи доступа. Используйте Azure Key Vault для безопасного управления ключами и защиты подключения.WebPubSubServiceClient

Старайтесь не распространять ключи доступа среди других пользователей, жестко программировать их или где-то сохранять в виде обычного текста в открытом доступе для других пользователей. Меняйте свои ключи постоянно, если предполагаете, что они могут быть подобраны.

Обзор

GitHub или Azure Repos предоставляют управление версиями для Статические веб-приложения. Azure отслеживает выбранную вами ветвь репозитория, и при каждом изменении кода в исходном репозитории новая сборка веб-приложения автоматически запускается и развертывается в Azure. Непрерывная доставка обеспечивается GitHub Actions и Azure Pipelines. Статические веб-приложения обнаруживает новую сборку и представляет ее пользователю конечной точки.

Пример приложения комнаты чата, предоставленного этим руководством, содержит следующий рабочий процесс.

1. Когда пользователь входит в приложение, api Функции Azure login активируется для создания URL-адреса подключения клиента службы Web PubSub.
2. Когда клиент инициализирует запрос подключения к Web PubSub, служба отправляет системное connect событие, которое активирует API функций connect для проверки подлинности пользователя.
3. Когда клиент отправляет сообщение в службу Azure Web PubSub, служба реагирует на событие пользователя message и API функций message активируется для трансляции, сообщение всем подключенным клиентам.
4. API функций validate периодически активируется для Защиты от злоупотреблений CloudEvents, когда события в Azure Web PubSub настроены с предопределенным параметром {event}, то есть https://$STATIC_WEB_APP/api/{event}.

Примечание.

API connect функций и message активируются при настройке службы Azure Web PubSub с этими двумя событиями.

Необходимые компоненты

• Учетная запись GitHub.
• Учетная запись Azure. Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начинать работу.
• Azure CLI (версия 2.29.0 или более поздней версии) или Azure Cloud Shell для управления ресурсами Azure.

Создание ресурса Web PubSub

1. Войти в Azure CLI с помощью следующей команды.

   az login
   

2. Создать группу ресурсов.

   az group create \
     --name my-awps-swa-group \
     --location "eastus2"
   

3. Создайте ресурс Web PubSub.

   az webpubsub create \
     --name my-awps-swa \
     --resource-group my-awps-swa-group \
     --location "eastus2" \
     --sku Free_F1
   

4. Получите и удерживайте ключ доступа для последующего использования.

   Необработанные строка подключения отображаются в этой статье только для демонстрационных целей. В рабочих средах всегда защищать ключи доступа. Используйте Azure Key Vault для безопасного управления ключами и защиты подключения.WebPubSubServiceClient

   az webpubsub key show \
     --name my-awps-swa \
     --resource-group my-awps-swa-group
   

   AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
   

   Замените заполнитель <YOUR_AWPS_ACCESS_KEY> значением primaryConnectionString из предыдущего шага.

Создание репозитория

В этой статье для простоты используются шаблон из репозитория GitHub. Шаблон содержит начальное приложение, которое развертывается для Статические веб-приложения Azure.

1. Перейдите к https://github.com/Azure/awps-swa-sample/generate созданию репозитория для этого руководства.
2. Выберите себя в качестве владельца и назовите репозиторий my-awps-swa-app.
3. Вы можете создать общедоступный или частный репозиторий в соответствии с вашими предпочтениями. Оба работают над учебником.
4. Щелкните Create repository from template (Создание репозитория из шаблона).

Создание Статического веб-приложения

Теперь, когда репозиторий создан, можно создать статическое веб-приложение в Azure CLI.

1. Создайте переменную для хранения имени пользователя GitHub.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
   

   Замените значение заполнителя <YOUR_GITHUB_USER_NAME> на свое имя пользователя GitHub.

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

   az staticwebapp create \
       --name my-awps-swa-app \
       --resource-group my-awps-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
       --location "eastus2" \
       --branch main \
       --app-location "src" \
       --api-location "api" \
       --login-with-github
   

   Внимание

   URL-адрес, переданный в параметр --source, не должен включать суффикс .git.

3. Переход к https://github.com/login/device.

4. Введите код пользователя, как показано в сообщении в консоли.

5. Выберите Продолжить.

6. Выберите "Авторизовать AzureAppServiceCLI".

7. Настройте параметры статического веб-приложения.

   az staticwebapp appsettings set \
     -n my-awps-swa-app \
     --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa
   

Просмотр веб-сайта

Существует два аспекта развертывания статического приложения: сначала создается базовые ресурсы Azure, составляющие приложение. Второй — это рабочий процесс GitHub Actions, который выполняет сборку и публикацию приложения.

Прежде чем можно будет переходить к новому статическому сайту, сначала необходимо завершить сборку развертывания.

1. Вернитесь в окно консоли и выполните приведенную ниже команду, чтобы получить список URL-адресов, связанных с вашим приложением.

   az staticwebapp show \
     --name  my-awps-swa-app \
     --query "repositoryUrl"
   

   В выходных данных этой команды вернется URL-адрес репозитория GitHub.

2. Скопируйте URL-адрес репозитория и вставьте его в браузер.

3. Перейдите на вкладку Действия.

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

   После появления значка успешного выполнения рабочий процесс будет завершен и вы можете вернуться в окно консоли.

4. Выполните приведенную ниже команду, чтобы запросить URL-адрес веб-сайта.

   az staticwebapp show \
     --name my-awps-swa-app \
     --query "defaultHostname"
   

   Удерживайте URL-адрес, заданный в обработчике событий Web PubSub.

   STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
   

Настройка обработчика событий Web PubSub

Вы очень близки к завершению. Последний шаг — настроить Web PubSub, чтобы клиентские запросы передаются в API-интерфейсы функций.

1. Выполните следующую команду, чтобы настроить события службы Web PubSub. Он сопоставляет функции в папке api в репозитории с обработчиком событий Web PubSub.

   az webpubsub hub create \
     -n "my-awps-swa" \
     -g "my-awps-swa-group" \
     --hub-name "sample_swa" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"
   

Теперь вы готовы играть с веб-сайтом <YOUR_STATIC_WEB_APP>. Скопируйте его в браузер и нажмите кнопку "Продолжить", чтобы начать чат с друзьями.

Очистка ресурсов

Если вы не собираетесь продолжать использовать это приложение, можно удалить группу ресурсов и статическое веб-приложение, выполнив следующую команду.

az group delete --name my-awps-swa-group

Следующие шаги

В этом кратком руководстве вы узнали, как разрабатывать и развертывать бессерверное приложение чата. Теперь можно приступить к созданию собственного приложения.

Веселье с демонстрациями, доступными для игры

Привязки Azure Web PubSub для Функций Azure