Azure Front Door で Azure SignalR Service を使用する方法

2025-04-30

Azure Front Door は、動的サイトアクセラレーション、グローバル負荷分散、TLS 終了、アプリケーション層セキュリティを提供する最新のクラウドネイティブアプリケーション配信ネットワーク (ADN) です。 HTTP/HTTPS レイヤー (レイヤー 7) で動作し、Web アプリケーションのエントリポイントとして機能します。つまり、URL パス、待機時間、バックエンドの正常性状態などの属性に基づいてトラフィックをルーティングおよび最適化します。

Azure Front Door の主な利点は、WebSocket と WebSocket Secure (WSS) 接続のネイティブサポートです。このサポートにより、特別な構成を必要とせずに、クライアントとバックエンドサービス間のリアルタイムの双方向通信が可能になります。

このガイドでは、Azure SignalR Service で Azure Front Door を使用して、リアルタイムアプリケーションをフロントエンドする方法について説明します。 Front Door を介してトラフィックをルーティングすることで、次のことができます。

グローバルリーチとエッジアクセラレーションを使用して WebSocket サポートを適用する
WAF ルールやレート制限などの一元化されたセキュリティポリシーを適用する
バックエンドサービスの公開を減らします。

図に示すように、SignalR を利用したアプリケーションバックエンドに WebSocket トラフィックをルーティングするように Azure Front Door を構成します。このセットアップにより、Azure のグローバルエッジネットワークを介した低待機時間、スケーラブル、セキュリティで保護されたトラフィック処理からリアルタイム機能のメリットが得られます。

Azure Front Door の設定と構成

Azure SignalR Service リソースを作成する

記事に従って SignalR Service リソースを作成する

Azure Front Door リソースを作成する

Azure portal で Front Door と Create を検索します。

Azure Front Door リソースの作成のスクリーンショット。

クイックテスト

SignalR エンドポイントが正常であり、Azure Front Door リソースが正しく構成されていることを確認するためのクイックテストを実施します。

<your-SignalR-resource-endpoint>/clientに要求を送信すると、エラーメッセージ 'hub' クエリパラメーターが必要な 400 が返されます。このメッセージは、要求が SignalR Service に到着し、サービスが期待どおりに検証を実行したことを意味します。

curl -v <your-SignalR-resource-endpoint>/client

返品ポリシー

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

Azure Front Door http://<the-hostname-of-your-Azure-Front-Door-resource>/client を介して、Azure SignalR の同じ正常性エンドポイントに要求を送信します。作成した Azure Front Door リソースの [概要] タブに移動し、エンドポイントのホスト名を見つけます。

Azure Front Door リソースのホスト名のスクリーンショット

curl -I http://<the-hostname-of-your-Azure-Front-Door-resource>/client

また、エラーメッセージ 'hub' クエリパラメーターが必要な 400 も返されます。このメッセージは、要求が Azure Front Door to SignalR Service を正常に通過したことを確認します。

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

Azure Front Door を使用して SignalR サンプルアプリを実行する

これで、トラフィックが Azure Front Door 経由で SignalR Service に到達できることを確認できます。次に、ベアボーンサンプルアプリを使用して、構成なしで WebSocket トラフィックをルーティングする Azure Front Door の機能を示します。必要に応じて作業を進めることができるように、段階的なアプローチを採用しています。

プロジェクトを作成する

mkdir afd-demo 
cd afd-demo

touch afd-demo.csproj

コンテンツを afd-demo.csproj ファイルに貼り付けます。このプロジェクトでは、"Microsoft.Azure.SignalR" パッケージのみを使用します。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <RootNamespace>afd_demo</RootNamespace>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.Azure.SignalR" Version="1.30.2" />
  </ItemGroup>
</Project>

アプリの設定を構成する

appsettings.json ファイルを作成し、コンテンツに貼り付けます。値は、次の手順で作成する Program.cs ファイルで参照されます。 ConnectionString に ClientEndpoint セクションを追加します。

touch appsettings.json

この記事に示す生の接続文字列は、デモンストレーションのみを目的としています。運用環境では、常にアクセスキーを保護してください。 Azure Key Vault を使用して、キーを安全に管理およびローテーションし、 Microsoft Entra ID を使用して接続文字列をセキュリティで保護し、 Microsoft Entra ID でアクセスを承認します。

{
  "Azure": {
    "SignalR": {
      "ConnectionString": "<the-connection-string-of-your-Azure-SignalR-resource>;ClientEndpoint=<the-endpoint-of-your-Azure-Front-Door-resource>"
    }
  }
}

`Program.cs` ファイルを作成する

touch Program.cs

コードを Program.cs ファイルに貼り付けます。 Web アプリは SignalR ハブを定義し、Web ルートで index.html を提供します。

using Microsoft.Azure.SignalR;
var builder = WebApplication.CreateBuilder(args);

// Automatically read in the configuration from `appsettings.json`
builder.Services.AddSignalR().AddAzureSignalR();

var app = builder.Build();
app.UseStaticFiles();

app.UseRouting();

app.MapHub<DemoHub>("/demohub");

app.MapGet("/", async context =>
{
    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html");
    context.Response.ContentType = "text/html";
    await context.Response.SendFileAsync(path);
});

app.Run();

SignalR ハブを定義する

mkdir hubs && cd hubs
touch demohubs.cs

コードを demohubs.cs ファイルに貼り付けます。わかりやすくするために、ハブは、受信したメッセージをすべての接続された SignalR クライアントにブロードキャストする SignalR クライアントに BroadcastMessage メソッドのみを公開します。

using Microsoft.AspNetCore.SignalR;

public class DemoHub : Hub
{
    public Task BroadcastMessage(string message) =>
        Clients.All.SendAsync("broadcastMessage", message);
}

Web UI の定義

プロジェクトフォルダーのルートにいることを確認します。

mkdir wwwroot && cd wwwroot
touch index.html

index.htmlにコードを貼り付けます。ユーザーインターフェイスは、ユーザーからのテキスト入力を受信する <textarea> と、SignalR 接続を介してユーザー入力を送信する <button> で構成されます。受信したメッセージをブロードキャストするように SignalR サーバーの動作を定義したので、同じメッセージがブラウザーコンソールに記録されます。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Azure SignalR with Azure Front Door as the reverse proxy</title>
</head>

<body>
  <div>
    <textarea id="message" style="display: block; width: 100%; padding: 5px 10px; max-width: 400px; margin-bottom: 8px;"
      placeholder="Your message..."></textarea>
    <button id="btn-send" disabled>Send</button>
  </div>

  <!--Reference the SignalR library. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

  <script type="module">
    document.addEventListener("DOMContentLoaded", async function () {
      const connection = new signalR.HubConnectionBuilder()
        .withUrl("/demohub")
        .build();

      connection.on("broadcastMessage", (msg) => {
        console.log(msg)
      })
      await connection.start();
      document.getElementById("btn-send").removeAttribute("disabled")

      document.getElementById("btn-send").addEventListener("click", () => {
        const message = document.getElementById("message").value
        if (message !== "") {
          connection.send("broadcastMessage", message)
          document.getElementById("message").value = ""
        } else {
          alert("Message body is empty. Please enter message.")
        }
      })
    })
  </script>
</body>

</html>

アプリを実行し、Azure Front Door を介してメッセージのフローを確認する

これがサンプルのすべてのコードです。アプリを実行しましょう。

  dotnet restore
  dotnet run

ブラウザーから http://localhost:5129 を開き、キーボードショートカット F12 使用して開発者ツールを開きます。ネットワークパネルに向かうと、WebSocket 接続が実際に Azure Front Door で確立されていることがわかります。

Azure Front Door との WebSocket 接続を確立している実行中のアプリのスクリーンショット。

テキストボックスに何かを入力し、[送信] ボタンをクリックします。メッセージが期待どおりにブラウザーコンソールに記録されていることがわかります。

ブラウザーのコンソールログで受信したメッセージのスクリーンショット。

ネットワークパネルでメッセージのフローを調べることもできます。

ネットワークパネル内のメッセージフローのスクリーンショット。

次の方法で共有