方法: Azure Web PubSub を使用してリアルタイムのコラボレーション ホワイトボードを構築し、それを Azure App Service にデプロイする

一連の新しいアプリケーションにより、最新の働き方が再構築されつつあります。 Microsoft Word には編集者が集まる一方で、Figma には同じクリエイティブな取り組みについてデザイナーが集まります。 このクラスのアプリケーションは、リモート コラボレーターとのつながりを感じさせるユーザー エクスペリエンスに基づいています。 技術的な観点から見ると、ユーザーのアクティビティを、ユーザーの画面間で低待機時間で同期する必要があります。

概要

この攻略ガイドでは、クラウドネイティブのアプローチを採用し、Azure サービスを使用してリアルタイムのコラボレーション ホワイトボードを構築して、そのプロジェクトを Web アプリとして Azure App Service にデプロイします。 ホワイトボード アプリにはブラウザーでアクセスでき、すべてのユーザーが同じキャンバスに描画できます。

アーキテクチャ

前提条件

最初にホワイトボード アプリの構築とデプロイに焦点を当てるので、データ フロー の詳細な説明はこの攻略ガイドの最後にあります。

このステップ バイ ステップ ガイドに従うには、次のものが必要です。

Azure CLI を使用して Azure リソースを作成する

1.サインイン

1. 次のコマンドを実行して Azure CLI にサインインします。

   az login
   

2. Azure にリソース グループを作成します。

   az group create \
     --location "westus" \  
     --name "whiteboard-group"
   

2. Web アプリ リソースを作成する

1. 無料の App Service プランを作成します。

   az appservice plan create \ 
     --resource-group "whiteboard-group" \ 
     --name "demo" \ 
     --sku FREE
     --is-linux
   

2. Web アプリ リソースを作成します

   az webapp create \
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \ 
     --plan "demo" \
     --runtime "NODE:18-lts"
   

3. Web PubSub リソースを作成する

1. Web PubSub リソースを作成します。

   az webpubsub create \
     --name "whiteboard-app" \
     --resource-group "whiteboard-group" \
     --location "westus" \
     --sku Free_F1
   

2. 後で使用するために、primaryConnectionString の値を表示してどこかに保存します。

   この記事では、デモ目的でのみ生の接続文字列が表示されます。 運用環境では、常にアクセス キーを保護してください。 Azure Key Vault を使ってキーの管理とローテーションを安全に行い、WebPubSubServiceClient を使って接続をセキュリティ保護します。

   az webpubsub key show \
     --name "whiteboard-app" \
     --resource-group "whiteboard-group"
   

アプリケーション コードを取得する

次のコマンドを実行して、アプリケーション コードのコピーを取得します。 この攻略ガイドの最後に、データ フローの詳細な説明があります。

git clone https://github.com/Azure/awps-webapp-sample.git

App Service にアプリケーションをデプロイする

1. App Service では、多くのデプロイ ワークフローがサポートされています。 このガイドでは、ZIP パッケージをデプロイします。 次のコマンドを実行して ZIP を準備します。

   npm install
   npm run build
   zip -r app.zip *
   

2. 次のコマンドを使用して、Azure App Service にデプロイします。

   az webapp deployment source config-zip \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --src app.zip
   

3. アプリケーション設定に Azure Web PubSub 接続文字列を設定します。 前の手順で格納した primaryConnectionString の値を使用します。

   az webapp config appsettings set \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
   

Web PubSub から送信されるイベントを処理するようにアップストリーム サーバーを構成する

クライアントが Web PubSub サービスにメッセージを送信するたびに、指定したエンドポイントにサービスから HTTP 要求が送信されます。 このメカニズムは、バックエンド サーバーがメッセージをさらに処理するために使用するメカニズムです。たとえば、任意のデータベースにメッセージを保持できる場合などです。

HTTP 要求の場合と同様に、Web PubSub サービスはアプリケーション サーバーの場所を把握する必要があります。 バックエンド アプリケーションが App Service にデプロイされたので、そのパブリックにアクセスできるドメイン名を取得します。

1. name の値を表示してどこかに保存します。

   az webapp config hostname list \
     --resource-group "whiteboard-group"
     --webapp-name "whiteboard-app" 
   

2. バックエンド サーバーで公開することにしたエンドポイントは /eventhandler であり、ホワイトボード アプリの hub 名は "sample_draw" です

   az webpubsub hub create \ 
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \
     --hub-name "sample_draw" \
     --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected" 
   

ブラウザーでホワイトボード アプリを表示する

ブラウザーに移動し、デプロイした Web アプリにアクセスします。 アプリのリアルタイムの共同作業の側面を体験できるように、複数のブラウザー タブを開くことをお勧めします。 または、同僚や友人とリンクを共有してください。

Data flow

概要

データ フローのセクションでは、ホワイトボード アプリの構築方法について詳しく説明します。 ホワイトボード アプリには、2 つのトランスポート方法があります。

• Express アプリとして記述され、App Service でホストされる HTTP サービス。
• Azure Web PubSub によって管理される WebSocket 接続。

Azure Web PubSub を使用して WebSocket 接続を管理することで、Web アプリの負荷が軽減されます。 クライアントの認証と画像の提供以外に、Web アプリは描画アクティビティの同期に関係しません。 クライアントの描画アクティビティは、Web PubSub に直接送信され、グループ内のすべてのクライアントにブロードキャストされます。

いつでも、複数のクライアントが描画している可能性があります。 Web アプリ自体で WebSocket 接続を管理しようとした場合、すべての描画アクティビティを他のすべてのクライアントにブロードキャストする必要があります。 膨大なトラフィックと処理は、サーバーにとって大きな負担になります。

リソースをクリーンアップする

アプリケーションでは両方のサービスの Free レベルのみが使用されていますが、不要になったリソースは削除することをお勧めします。 次のコマンドを使用して、リソース グループとそこに含まれるリソースを削除できます。

az group delete 
  --name "whiteboard-group"

次の手順