Средство локального туннеля Azure Web PubSub

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

Локальный туннель Web PubSub предоставляет:

  • Способ туннелирования трафика из Web PubSub на локальный сервер
  • Способ просмотра сквозного потока данных от клиента к Web PubSub через туннель и на локальный сервер
  • Предоставляет внедренный вышестоящий сервер для начала работы
  • Предоставляет простой клиент для начала разработки сервера

Преимущества:

  • Защищенный локальный: не нужно предоставлять локальный сервер общедоступным
  • Защищенное подключение: используйте идентификатор Microsoft Entra и политику доступа Web PubSub для подключения
  • Простая конфигурация: наборы шаблонов URL-адресов tunnel:///<your_server_path>
  • Проверка данных: яркое представление данных и рабочего процесса

Необходимые условия

  • Node.js версии 16 или более поздней

Установка

npm install -g @azure/web-pubsub-tunnel-tool

Использование

Usage: awps-tunnel [options] [command]

A local tool to help tunnel Azure Web PubSub traffic to local web app and provide a vivid view to the end to end workflow.

Options:
  -v, --version   Show the version number.
  -h, --help      Show help details.

Commands:
  status          Show the current configuration status.
  bind [options]  Bind configurations to the tool so that you don't need to specify them every time running the tool.
  run [options]   Run the tool.
  help [command]  Display help details for subcommand.

You could also set WebPubSubConnectionString environment variable if you don't want to configure endpoint.

Подготовка учетных данных

Поддерживаются как строка подключения, так и идентификатор Microsoft Entra.

Использование строка подключения

  1. На портале службы Web PubSub скопируйте строка подключения с портала службы Web PubSub.

  2. Задайте строка подключения в переменную локальной среды и запуститеawps-tunnel.

export WebPubSubConnectionString="<your connection string>"

Использование удостоверения Azure

  1. На портале службы Web PubSub перейдите на вкладку "Управление доступом" и добавьте роль Web PubSub Service Owner в удостоверение.

  2. В локальном терминале используйте Azure CLI az login для входа в удостоверение.

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

Выполнить

  1. На портале службы Web PubSub перейдите на вкладку "Параметры", укажите шаблон URL-адреса обработчика событий, чтобы начать с tunnel:/// разрешения подключения к туннелю.

    Снимок экрана: настройка вышестоящего URL-адреса в параметрах концентратора.

  2. Запустите средство с заданным центром, например, подключитесь к конечной точке https://<awps-host-name>.webpubsub.azure.com с помощью концентратора chat:

    awps-tunnel run --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com
    

    Вы также можете использовать awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com для сохранения конфигурации, а затем awps-tunnel run.

  3. Вы увидите выходные данные, например Open webview at: http://127.0.0.1:4000, откройте ссылку в браузере, и вы можете увидеть состояние туннеля и рабочий процесс.

  4. Теперь перейдите на вкладку "Сервер" и проверьте встроенный эхо-сервер, чтобы запустить встроенный вышестоящий сервер с кодом, похожим на пример кода, показанного ниже.

    Снимок экрана: запуск встроенного эхо-сервера.

  5. Кроме того, вы можете запустить собственный вышестоящий сервер в http://localhost:3000. Вы также можете указать параметр--upstream http://localhost:<custom-port> , когда awps-tunnel run или awps-tunnel bind настроить собственный upstream-сервер на пользовательском порту. Например, выполните приведенный ниже код, чтобы запустить этот пример вышестоящего сервера, когда он запускается, upstream обслуживает запросы к http://localhost:3000/eventhandler/.

    git clone https://github.com/Azure/azure-webpubsub.git
    cd tools/awps-tunnel/server/samples/upstream
    npm install
    npm start
    
  6. Теперь перейдите на вкладку "Клиент" , чтобы Connect запустить тестовое подключение WebSocket к службе Azure Web PubSub. Вы увидите, что трафик проходит через Web PubSub в локальный туннель и, наконец, достигает вышестоящего сервера. Вкладка туннеля содержит подробные сведения о запросе и ответе, предоставляя вам яркое представление о том, что запрашивает сервер вышестоящего сервера и что отвечает от вышестоящего сервера.

    Снимок экрана: запуск тестового подключения WebSocket и отправка сообщения.

    Снимок экрана: проверка трафика.

Внутренняя логика

Как работает средство туннеля? Под капотом начинается туннельное подключение к службе Web PubSub. Подключение туннеля — это постоянное подключение (WebSocket) подключается к /server/tunnel конечной точке, и он считается одним из типов подключений к серверу. Для отключения таких подключений можно также использовать правила ACL в службе.