Posted at

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


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 へデータを送信する準備をする


  1. まずは Azure Portal から Iot Hub サービスをデプロイする

    →Devices を登録すると、そのデバイスID から接続文字列を獲得することができる。これはどこかにメモっておく。


  2. 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

image.png


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!

image.png


Tips


  • コマンドラインから Strings を入力するのに抵抗のある人は、VS Code で、launch.json の該当箇所を変更する方法でも良いみたいです。

    image.png


  • Microsoft の Docs では Azure CLI を使用して、Git から Azure WebApp にデプロイする方法でしたが、Azure WebApp の Deployment Center から GitHub でデプロイするオプションを選択することで、より簡単にアプリをデプロイすることが可能です。

    image.png


→この方法だとデプロイするまでは簡単だが、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