チュートリアル: Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する

[アーティクル]
06/02/2023

この記事では、お使いのローカルコンピューターで実行されている Node.js Web アプリを使って、IoT ハブで受信されるリアルタイムセンサーデータを視覚化する方法について説明します。 Web アプリをローカルで実行した後は、Azure App Service で Web アプリをホストできます。

エンドツーエンドダイアグラム

[前提条件]

このチュートリアルの Web アプリケーションサンプルは、Node.js で記述されています。この記事の手順では、Windows の開発マシンを想定しています。ただし、これらの手順は、Linux システムで好みのシェルを使って実行することもできます。

Azure サブスクリプション。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。
Azure サブスクリプション内の IoT ハブ。ハブがまだない場合は、「IoT ハブの作成」の手順に従うことができます。
お使いの IoT ハブに登録されているデバイス。 IoT ハブ内にデバイスがない場合は、「デバイスの登録」の手順に従います。
IoT ハブにテレメトリメッセージを送信するシミュレートされたデバイス。 Raspberry Pi オンラインシミュレーターを使用して、温度データを IoT Hub に送信するシミュレートされたデバイスを取得します。
Node.js バージョン 14 以降。ノードのバージョンを確認するには、node --version を実行します。
Git.

Azure Cloud Shell で Bash 環境を使用します。詳細については、「Azure Cloud Shell の Bash のクイックスタート」を参照してください。
CLI リファレンスコマンドをローカルで実行する場合、Azure CLI をインストールします。 Windows または macOS で実行している場合は、Docker コンテナーで Azure CLI を実行することを検討してください。詳細については、「Docker コンテナーで Azure CLI を実行する方法」を参照してください。
- ローカルインストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。認証プロセスを完了するには、ターミナルに表示される手順に従います。その他のサインインオプションについては、Azure CLI でのサインインに関するページを参照してください。
- 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。
- az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。最新バージョンにアップグレードするには、az upgrade を実行します。

IoT Hub へのコンシューマーグループの追加

コンシューマーグループは、イベントストリームへの独立したビューを提供します。これにより、アプリと Azure サービスは、同じイベントハブのエンドポイントからデータを別々に使用することができます。このセクションでは、Web アプリがデータの読み取りに使用する IoT ハブの組み込みのエンドポイントにコンシューマーグループを追加します。

IoT Hub の組み込みエンドポイントにコンシューマーグループを追加するには、次のコマンドを実行します。

az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME

選択した名前を書き留めておいてください。後でこのチュートリアルで必要になります。

IoT Hub のサービス接続文字列を取得する

IoT Hub は、いくつかの既定のアクセスポリシーを使用して作成されます。そのようなポリシーの 1 つとしてサービスポリシーがあります。これは、サービスが IoT Hub のエンドポイントを読み書きするのに十分なアクセス許可を提供します。サービスポリシーに準拠する IoT Hub の接続文字列を取得するには、次のコマンドを実行します。

az iot hub connection-string show --hub-name YOUR_IOT_HUB_NAME --policy-name service

サービス接続文字列は次の例のようになります。

"HostName=YOUR_IOT_HUB_NAME.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey=YOUR_SHARED_ACCESS_KEY"

このサービス接続文字列を書き留めておいてください。後でこのチュートリアルで必要になります。

重要

この記事では、Shared Access Signature を使用してサービスに接続する手順について説明しています。この認証方法はテストと評価には便利ですが、サービスに対する認証方法としては、Microsoft Entra ID またはマネージド ID を使用する方が安全です。詳細については、「セキュリティのベストプラクティス」の「クラウドのセキュリティ」を参照してください。>

GitHub から Web アプリをダウンロードする

GitHub から Web アプリサンプルをダウンロードまたは複製します: web-apps-node-iot-hub-data-visualization。

Web アプリのコードを調べる

開発用マシンで、web-apps-node-iot-hub-data-visualization ディレクトリに移動し、お気に入りのエディターで Web アプリを開きます。 Visual Studio Code で表示されるファイル構造を以下に示します。

Web アプリファイルの構造を示すスクリーンショット。

少し時間を取って、次のファイルを調べます。

server.js は、Web ソケットとイベントハブのラッパークラスを初期化するサービス側のスクリプトです。これは、クラスが受信メッセージを Web ソケットにブロードキャストするために使用するイベントハブラッパークラスへのコールバックを提供します。
scripts/event-hub-reader.js は、指定された接続文字列とコンシューマーグループを使用して IoT ハブの組み込みエンドポイントに接続するサービス側のスクリプトです。これは、受信メッセージのメタデータから DeviceId と EnqueuedTimeUtc を抽出し、次に server.js によって登録されたコールバックメソッドを使用してメッセージをリレーします。
public/js/chart-device-data.js は、Web ソケットでリッスンし、各 DeviceId を追跡して、各デバイスの受信データの最後の 50 ポイントを格納するクライアント側のスクリプトです。そしてそれは、選択したデバイスデータをグラフオブジェクトにバインドします。
public/index.html は、Web ページの UI レイアウトを処理し、クライアント側のロジックのために必要なスクリプトを参照します。

Web アプリの環境変数を構成する

IoT Hub からデータを読み取るためには、Web アプリには、IoT Hub の接続文字列と、読み取りに使用するコンシューマーグループの名前が必要です。これらの文字列は、server.js の次の行のプロセス環境から取得されます。

const iotHubConnectionString = process.env.IotHubConnectionString;
if (!iotHubConnectionString) {
  console.error(`Environment variable IotHubConnectionString must be specified.`);
  return;
}
console.log(`Using IoT Hub connection string [${iotHubConnectionString}]`);

const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
console.log(eventHubConsumerGroup);
if (!eventHubConsumerGroup) {
  console.error(`Environment variable EventHubConsumerGroup must be specified.`);
  return;
}
console.log(`Using event hub consumer group [${eventHubConsumerGroup}]`);

次のコマンドを使用して、コマンドウィンドウで環境変数を設定します。プレースホルダーの値は、前に作成した、IoT Hub のサービス接続文字列とコンシューマーグループの名前に置き換えます。文字列は引用符で囲まないでください。

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Web アプリの実行

お使いのデバイスが実行中であり、データを送信していることを確認します。
コマンドウィンドウで、次の行を実行して、参照されたパッケージをダウンロードしてインストールし、Web サイトを開始します。
```
npm install
npm start
```
Web アプリが正常に IoT Hub に接続し、ポート 3000 でリッスンしていることを示す出力がコンソールに表示されます。

Web ページを開いて IoT Hub からのデータを表示する

http://localhost:3000 を指定してブラウザーを開きます。

[デバイスの選択] 一覧からお使いのデバイスを選択し、デバイスによって IoT Hub に送信された最新 50 個の温度と湿度を示すデータポイントの実行中のプロットを表示します。

リアルタイムの温度と湿度を示す、ローカルホストで実行されている Azure Web アプリのスクリーンショット。

Web アプリがブラウザークライアントにブロードキャストしているメッセージを示す出力もコンソールに表示されるはずです。

コンソール上の Web アプリの出力のスクリーンショット。

App Service で Web アプリをホストする

Azure App Service は、Web アプリをホストするためのサービスとしてのプラットフォーム (PAAS) を提供します。 App Service でホストされている Web アプリは、継続的デプロイやパッケージ管理などの Azure とパートナーの DevOps ソリューションだけでなく、セキュリティ、負荷分散、スケーラビリティなどの強力な Azure の機能の恩恵を受けることができます。 App Service は、多くの一般的な言語で開発されて、Windows や Linux のインフラストラクチャにデプロイされた Web アプリをサポートします。

このセクションでは、App Service で Web アプリをプロビジョニングし、Azure CLI コマンドを使用してそれにコードをデプロイします。 az webapp のドキュメントで、使用されているコマンドの詳細を確認できます。

App Service プランは、App Service でホストされているアプリを実行するための一連のコンピューティングリソースを定義します。このチュートリアルでは、Developer/Free のレベルを使用して Web アプリをホストします。 Free レベルでは、Web アプリは、他のお客様のアプリを含めた他の App Service アプリとの共有 Windows リソースで実行されます。 Azure では、Web アプリを Linux コンピューティングリソースにデプロイする App Service プランも提供されています。使用したい App Service プランが既にある場合は、この手順をスキップできます。

Windows Free レベルを使用して App Service プランを作成するには、az appservice plan create コマンドを使用します。 IoT Hub が所属するものと同じリソースグループを使用します。サービスプラン名には、大文字と小文字、数字、ハイフンを含めることができます。
```
az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
```
az webapp create コマンドを使って、App Service プランに Web アプリをプロビジョニングします。 --deployment-local-git パラメーターにより、お使いのローカルマシンで Git リポジトリから Web アプリのコードがアップロードされてデプロイされます。 Web アプリ名はグローバルに一意である必要があり、大文字と小文字の英字、数字、およびハイフンを使用できます。使用している Node.js ランタイムのバージョンに応じて、--runtime パラメーターにノードバージョン 14 以降を指定してください。 az webapp list-runtimes コマンドを使用して、サポートされているランタイムの一覧を取得できます。
```
az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:14LTS" --deployment-local-git
```
az webapp config appsettings set コマンドを使用して、IoT ハブ接続文字列とイベントハブコンシューマーグループを指定する環境変数のアプリケーション設定を追加します。 -settings パラメーターで、個々の設定はスペースで区切られています。このチュートリアルで前に作成した、IoT Hub のサービス接続文字列とコンシューマーグループを使用します。
```
az webapp config appsettings set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --settings EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME IotHubConnectionString="YOUR_IOT_HUB_CONNECTION_STRING"
```
Web アプリに対して Web ソケットプロトコルを有効にし、Web アプリが HTTPS 要求のみを受信する (HTTP 要求は HTTPS にリダイレクトされる) ように設定します。
```
az webapp config set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --web-sockets-enabled true
az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true
```
コードを App Service にデプロイするには、ユーザーレベルのデプロイ資格情報を使用します。ユーザーレベルのデプロイ資格情報は、Azure 資格情報とは異なり、Web アプリへの Git のローカルおよび FTP デプロイに使用されます。それらは一度設定すると、お使いの Azure アカウント内のすべてのサブスクリプションのすべての App Service アプリで有効になります。以前にユーザーレベルのデプロイ資格情報を設定している場合は、それらを使用できます。

ユーザーレベルのデプロイ資格情報を以前に設定していない場合やパスワードを思い出せない場合は、az webapp deployment user set コマンドを実行してください。デプロイユーザー名は、Azure 内で一意である必要があり、ローカル Git プッシュに対して '@' シンボルを含めることはできません。プロンプトが表示されたら、新しいパスワードを入力して確認します。パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。
```
az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
```
コードを App Service にプッシュするために使用する Git URL を取得します。
```
az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME
```
App Service の Web アプリの Git リポジトリを参照するリモートをクローンに追加します。 GIT_ENDPOINT_URL プレースホルダーを前の手順で返された URL に置き換えます。サンプルディレクトリ web-apps-code-iot-hub-data-visualization にいることを確認してから、コマンドウィンドウで次のコマンドを実行します。
```
git remote add webapp GIT_ENDPOINT_URL
```
App Service にコードをデプロイするには、コマンドウィンドウで次のコマンドを入力します。サンプルディレクトリ web-apps-code-iot-hub-data-visualization にいることを確認してください。資格情報の入力を求められたら、手順 5 で作成したユーザーレベルのデプロイ資格情報を入力します。 App Service リモートのメインブランチにプッシュしてください。
```
git push webapp master:master
```

コマンドウィンドウで、デプロイの進行状況が更新されます。デプロイが成功すると、次の出力のような行で終了します。

remote:
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://contoso-web-app-3.scm.azurewebsites.net/contoso-web-app-3.git
6b132dd..7cbc994  master -> master

次のコマンドを実行して、Web アプリの状態のクエリを実行し、それが実行中であることを確認します。
```
az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state
```
ブラウザーで https://<your web app name>.azurewebsites.net にアクセスします。 Web アプリをローカルで実行したときに表示されたものと同様の Web ページが表示されます。デバイスが実行中でデータを送信していれば、デバイスによって送信された最新の 50 個の温度と湿度を示す測定値の実行中のプロットが表示されるはずです。

トラブルシューティング

このサンプルで問題が発生した場合は、次のセクションの手順を試してください。まだ問題がある場合は、この記事の下部でフィードバックを送信してください。

クライアントの問題

デバイスが一覧に表示されない場合や、グラフが描画されていない場合は、お使いのデバイスでデバイスコードが実行されていることを確認してください。
ブラウザーで開発者ツールを開き (多くのブラウザーでは、F12 キーで開きます)、コンソールを見つけます。そこに警告やエラーが表示されていないか確認します。
クライアント側のスクリプトは /js/chat-device-data.js でデバッグできます。

ローカル Web サイトの問題

コンソールの出力についてノードを起動したウィンドウの出力を確認します。
サーバーコード (具体的には server.js と /scripts/event-hub-reader.js) をデバッグします。

Azure App Service の問題

Azure portal で、Web アプリに移動します。左側のウィンドウの [監視] から [App Service ログ] を選択します。 [アプリケーションのログ記録 (ファイルシステム)] を有効にし、 [レベル] を [エラー] に設定して、 [保存] を選択します。次に、( [監視] の下の) [ログストリーム] を開きます。
Azure portal の Web アプリから、[開発ツール] の下で [コンソール] を選択し、node -v と npm -v を使用してノードと npm のバージョンを確認します。
パッケージが見つからないというエラーが表示される場合は、手順が正しく実行されていない可能性があります。サイトが (git push を使用して) デプロイされると、アプリサービスは npm install を実行します。これは、構成したノードの現在のバージョンに基づいて行われます。後になってそれが構成で変更される場合は、コードに意味のない変更を行って、もう一度プッシュする必要があります。

次のステップ

Web アプリを使用して、IoT Hub からのリアルタイムセンサーデータを視覚化することができました。

Azure IoT Hub からのデータを操作する別の方法については、次のチュートリアルを参照してください。

Logic Apps を使用したリモートの監視と通知

次の方法で共有

チュートリアル: Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する

[前提条件]

IoT Hub へのコンシューマーグループの追加

IoT Hub のサービス接続文字列を取得する

GitHub から Web アプリをダウンロードする

Web アプリのコードを調べる

Web アプリの環境変数を構成する

Web アプリの実行

Web ページを開いて IoT Hub からのデータを表示する

App Service で Web アプリをホストする

トラブルシューティング

クライアントの問題

ローカル Web サイトの問題

Azure App Service の問題

次のステップ

フィードバック

その他のリソース

次の方法で共有

チュートリアル: Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化する

[前提条件]

IoT Hub へのコンシューマー グループの追加

IoT Hub のサービス接続文字列を取得する

GitHub から Web アプリをダウンロードする

Web アプリのコードを調べる

Web アプリの環境変数を構成する

Web アプリの実行

Web ページを開いて IoT Hub からのデータを表示する

App Service で Web アプリをホストする

トラブルシューティング

クライアントの問題

ローカル Web サイトの問題

Azure App Service の問題

次のステップ

フィードバック

その他のリソース

チュートリアル: Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する

IoT Hub へのコンシューマーグループの追加