Azure IoT Hub からのセンサーデータを WebApp から監視する

IoT によるデータ活用は以前よりトレンドとなっているが、クラウドのサービスを使用することでより簡単に IoT データを扱うプラットフォームが構築できるようになってきている。この記事では、Azure IoT Hub からリアルタイムセンサーデータを Azure WebApp に送信し、それを Web 上で監視するようなアプリケーションを作成してみる。
参考記事:Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

今回実施する作業は大きく分けて以下の通り
1. IoT デバイスから Azure IoT Hub へデータを送信する準備をする
2. IoT Hub が受け取ったデータを WebApp へ受け渡す

IoT デバイスから Azure IoT Hub へデータを送信する準備をする

まずは Azure Portal から Iot Hub サービスをデプロイする
→Devices を登録すると、そのデバイスID から接続文字列を獲得することができる。これはどこかにメモっておく。
Raspberry Pi Web シミュレーターを準備する
Microsoft が公開している以下 Docs にシュミレーターの扱い方がよくまとまっている(以外と丁寧だった)

https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started

このガイドにしたがって、上記で取得した接続文字列をシュミレーターの文字列に入力し、Run を実行する

->実際にはこれだけでOK! これで Azure IoT Hub にセンサーデータが送信されています。

Tips

実際に送信されたデータは、Visual Studio Code を使用するとかなり楽に確認することが可能。
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-vscode-iot-toolkit-cloud-device-messaging

IoT Hub が受け取ったデータを WebApp へ受け渡す

Microsoft が公開している Documents で基本的にはできるが、いくつか Tips があったので忘備録として纏めておく。
参考記事:Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

ちなみに成功すると、以下の様な感じで送信されてきたデータがぐにゃぐにゃの線で表示されます。なかなかGood!

Tips

コマンドラインから Strings を入力するのに抵抗のある人は、VS Code で、launch.json の該当箇所を変更する方法でも良いみたいです。
Microsoft の Docs では Azure CLI を使用して、Git から Azure WebApp にデプロイする方法でしたが、Azure WebApp の Deployment Center から GitHub でデプロイするオプションを選択することで、より簡単にアプリをデプロイすることが可能です。

→この方法だとデプロイするまでは簡単だが、Docs に記載されている Azure CLI の以下3つの設定は明示的に Portal から設定する必要があります。

az webapp config appsettings set -n <your web app name> -g <your resource group name> --settings EventHubConsumerGroup=<your consumer group> IotHubConnectionString=<your IoT hub connection string>
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

実際にはそこまで大変ではないですが、CLI から色々設定した方が楽！という人は CLI が良いと思います。今回は勉強も兼ねて portal ページに値を入力しました。

参考 URL まとめ

Web アプリで Azure IoT Hub からのリアルタイムセンサーデータを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

Raspberry Pi オンラインシミュレーターの Azure IoT Hub への接続 (Node.js)
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started

Azure portal で App Service アプリを構成する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started

Visual Studio Code 用 Azure IoT Tools を使用してデバイスと IoT Hub の間のメッセージを送受信する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-vscode-iot-toolkit-cloud-device-messaging