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
今回実施する作業は大きく分けて以下の通り
- IoT デバイスから Azure IoT Hub へデータを送信する準備をする
- 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