Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化するVisualize real-time sensor data from your Azure IoT hub in a web application

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

注意

このチュートリアルを開始する前に、Raspberry Pi オンライン シミュレーターのチュートリアルまたはいずれかのデバイス チュートリアルを完了してください。Before you start this tutorial, complete the Raspberry Pi online simulator tutorial or one of the device tutorials. たとえば、node.js での Raspberry Piに関するページや、テレメトリの送信に関するいずれかのクイックスタートにアクセスできます。For example, you can go to Raspberry Pi with node.js or to one of the Send telemetry quickstarts. それらの記事で、Azure IoT デバイスと IoT ハブを設定し、デバイスで実行するサンプル アプリケーションをデプロイします。In these articles, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. そのアプリケーションは、収集されたセンサー データを IoT Hub に送信します。The application sends collected sensor data to your IoT hub.

この記事では、お使いのローカル コンピューターで実行されている node.js Web アプリを使って、IoT ハブで受信されるリアルタイム センサー データを視覚化する方法について説明します。In this article, you learn how to visualize real-time sensor data that your IoT hub receives with a node.js web app running on your local computer. Web アプリをローカルで実行した後は、必要に応じて、Azure App Service で Web アプリをホストする手順に従うことができます。After running the web app locally, you can optionally follow steps to host the web app in Azure App Service. Power BI を使用して IoT ハブのデータを視覚化したい場合は、Power BI を使用して Azure IoT Hub からのリアルタイム センサー データを視覚化する方法に関するページを参照してください。If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

前提条件Prerequisites

  • Raspberry Pi オンライン シミュレーターのチュートリアル、またはいずれかのデバイス チュートリアルを完了してください。Complete the Raspberry Pi online simulator tutorial or one of the device tutorials. たとえば、node.js での Raspberry Pi に関する記事や、テレメトリの送信に関するいずれかのクイックスタートにアクセスできます。For example, you can go to Raspberry Pi with node.js or to one of the Send telemetry quickstarts. これらの記事では、次の要件について取り上げています。These articles cover the following requirements:

    • 有効な Azure サブスクリプションAn active Azure subscription
    • サブスクリプションの IoT HubAn Iot hub under your subscription
    • IoT Hub にメッセージを送信するクライアント アプリケーションA client application that sends messages to your Iot hub
  • Git のダウンロードDownload Git

  • この記事の手順では、Windows の開発マシンを想定しています。ただし、これらの手順は、Linux システムで好みのシェルを使って簡単に実行することができます。The steps in this article assume a Windows development machine; however, you can easily perform these steps on a Linux system in your preferred shell.

  • Azure Cloud Shell で Bash 環境を使用します。Use the Bash environment in Azure Cloud Shell.

    新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window

  • 必要に応じて、Azure CLI をインストールして、CLI リファレンス コマンドを実行します。If you prefer, install the Azure CLI to run CLI reference commands.

    • ローカル インストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。If you're using a local installation, sign in to the Azure CLI by using the az login command. 認証プロセスを完了するには、ターミナルに表示される手順に従います。To finish the authentication process, follow the steps displayed in your terminal. その他のサインイン オプションについては、Azure CLI でのサインインに関するページを参照してください。For additional sign-in options, see Sign in with the Azure CLI.

    • 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。When you're prompted, install Azure CLI extensions on first use. 拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。For more information about extensions, see Use extensions with the Azure CLI.

    • az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。Run az version to find the version and dependent libraries that are installed. 最新バージョンにアップグレードするには、az upgrade を実行します。To upgrade to the latest version, run az upgrade.

IoT Hub へのコンシューマー グループの追加Add a consumer group to your IoT hub

コンシューマー グループは、イベント ストリームへの独立したビューを提供します。これにより、アプリと Azure サービスは、同じイベント ハブのエンドポイントからデータを別々に使用することができます。Consumer groups provide independent views into the event stream that enable apps and Azure services to independently consume data from the same Event Hub endpoint. このセクションでは、Web アプリがデータの読み取りに使用する IoT ハブの組み込みエンドポイントにコンシューマー グループを追加します。In this section, you add a consumer group to your IoT hub's built-in endpoint that the web app will use to read data from.

IoT Hub の組み込みエンドポイントにコンシューマー グループを追加するには、次のコマンドを実行します。Run the following command to add a consumer group to the built-in endpoint of your IoT hub:

az iot hub consumer-group create --hub-name YourIoTHubName --name YourConsumerGroupName

選択した名前を書き留めておいてください。後でこのチュートリアルで必要になります。Note down the name you choose, you'll need it later in this tutorial.

IoT Hub のサービス接続文字列を取得するGet a service connection string for your IoT hub

IoT Hub は、いくつかの既定のアクセス ポリシーを使用して作成されます。IoT hubs are created with several default access policies. そのようなポリシーの 1 つとして サービス ポリシーがあります。これは、サービスが IoT Hub のエンドポイントを読み書きするのに十分なアクセス許可を提供します。One such policy is the service policy, which provides sufficient permissions for a service to read and write the IoT hub's endpoints. サービス ポリシーに準拠する IoT Hub の接続文字列を取得するには、次のコマンドを実行します。Run the following command to get a connection string for your IoT hub that adheres to the service policy:

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

接続文字列は次のようになります。The connection string should look similar to the following:

"HostName={YourIotHubName}.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey={YourSharedAccessKey}"

このサービス接続文字列を書き留めておいてください。後でこのチュートリアルで必要になります。Note down the service connection string, you'll need it later in this tutorial.

GitHub から Web アプリをダウンロードするDownload the web app from GitHub

コマンド ウィンドウを開き、次のコマンドを入力して、サンプルを GitHub からダウンロードし、そのサンプルのディレクトリに移動します。Open a command window, and enter the following commands to download the sample from GitHub and change to the sample directory:

git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
cd web-apps-node-iot-hub-data-visualization

Web アプリのコードを調べるExamine the web app code

web-apps-node-iot-hub-data-visualization ディレクトリから、お好みのエディターで Web アプリを開きます。From the web-apps-node-iot-hub-data-visualization directory, open the web app in your favorite editor. VS Code で表示されるファイル構造を以下に示します。The following shows the file structure viewed in VS Code:

Web アプリのファイル構造

少し時間を取って、次のファイルを調べます。Take a moment to examine the following files:

  • Server.js は、Wb ソケットとイベント Hub のラッパー クラスを初期化するサービス側のスクリプトです。Server.js is a service-side script that initializes the web socket and the Event Hub wrapper class. これは、クラスが受信メッセージを Web ソケットにブロードキャストするために使用するイベント Hub ラッパー クラスへのコールバックを提供します。It provides a callback to the Event Hub wrapper class that the class uses to broadcast incoming messages to the web socket.

  • Event-hub-reader.js は、指定された接続文字列とコンシューマー グループを使用して IoT Hub の組み込みエンドポイントに接続するサービス側のスクリプトです。Event-hub-reader.js is a service-side script that connects to the IoT hub's built-in endpoint using the specified connection string and consumer group. これは、受信メッセージのメタデータから DeviceId と EnqueuedTimeUtc を抽出し、次に server.js によって登録されたコールバック メソッドを使用してメッセージをリレーします。It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.

  • Chart-device-data.js は、Web ソケットでリッスンし、各 DeviceId を追跡し、各デバイスの受信データの最後の 50 ポイントを格納するクライアント側のスクリプトです。Chart-device-data.js is a client-side script that listens on the web socket, keeps track of each DeviceId, and stores the last 50 points of incoming data for each device. そしてそれは、選択したデバイス データをグラフ オブジェクトにバインドします。It then binds the selected device data to the chart object.

  • Index.html は、Web ページの UI レイアウトを処理し、クライアント側のロジックのために必要なスクリプトを参照します。Index.html handles the UI layout for the web page and references the necessary scripts for client-side logic.

Web アプリの環境変数を構成するConfigure environment variables for the web app

IoT Hub からデータを読み取るためには、Web アプリには、IoT Hub の接続文字列と、読み取りに使用するコンシューマー グループの名前が必要です。To read data from your IoT hub, the web app needs your IoT hub's connection string and the name of the consumer group that it should read through. これらの文字列は、server.js の次の行のプロセス環境から取得されます。It gets these strings from the process environment in the following lines in server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
const eventHubConsumerGroup = process.env.EventHubConsumerGroup;

次のコマンドを使用して、コマンド ウィンドウで環境変数を設定します。Set the environment variables in your command window with the following commands. プレース ホルダーの値は、前に作成した、IoT Hub のサービス接続文字列とコンシューマー グループの名前に置き換えます。Replace the placeholder values with the service connection string for your IoT hub and the name of the consumer group you created previously. 文字列は引用符で囲まないでください。Don't quote the strings.

set IotHubConnectionString=YourIoTHubConnectionString
set EventHubConsumerGroup=YourConsumerGroupName

Web アプリの実行Run the web app

  1. お使いのデバイスが実行中であり、データを送信していることを確認します。Make sure that your device is running and sending data.

  2. コマンド ウィンドウで、次の行を実行して、参照されたパッケージをダウンロードしてインストールし、Web サイトを開始します。In the command window, run the following lines to download and install referenced packages and start the website:

    npm install
    npm start
    
  3. Web アプリが正常に IoT Hub に接続し、ポート 3000 でリッスンしていることを示す出力がコンソールに表示されます。You should see output in the console that indicates that the web app has successfully connected to your IoT hub and is listening on port 3000:

    コンソール上の開始済み Web アプリ

Web ページを開いて IoT Hub からのデータを表示するOpen a web page to see data from your IoT hub

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

[デバイスの選択] 一覧からお使いのデバイスを選択し、デバイスによって IoT Hub に送信された最新 50 個の温度と湿度を示すデータ ポイントの実行中のプロットを表示します。In the Select a device list, select your device to see a running plot of the last 50 temperature and humidity data points sent by the device to your IoT hub.

リアルタイムの温度と湿度を示す Web アプリのページ

Web アプリがブラウザー クライアントにブロードキャストしているメッセージを示す出力もコンソールに表示されるはずです。You should also see output in the console that shows the messages that your web app is broadcasting to the browser client:

コンソール上の Web アプリのブロードキャスト出力

App Service で Web アプリをホストするHost the web app in App Service

Azure App Service の Web Apps 機能 は、Web アプリをホストするためのサービスとしてのプラットフォーム (PAAS) を提供します。The Web Apps feature of Azure App Service provides a platform as a service (PAAS) for hosting web applications. Azure App Service でホストされている Web アプリは、継続的デプロイやパッケージ管理などの Azure とパートナーの DevOps ソリューションだけでなく、追加のセキュリティ、負荷分散、スケーラビリティなどの強力な Azure の機能の恩恵を受けることができます。Web applications hosted in Azure App Service can benefit from powerful Azure features like additional security, load balancing, and scalability as well as Azure and partner DevOps solutions like continuous deployment, package management, and so on. Azure App Service は、多くの一般的な言語で開発されて、Windows や Linux のインフラストラクチャにデプロイされた Web アプリをサポートします。Azure App Service supports web applications developed in many popular languages and deployed on Windows or Linux infrastructure.

このセクションでは、App Service で Web アプリをプロビジョニングし、Azure CLI コマンドを使用してそれにコードをデプロイします。In this section, you provision a web app in App Service and deploy your code to it by using Azure CLI commands. az webapp のドキュメントで、使用されているコマンドの詳細を確認できます。You can find details of the commands used in the az webapp documentation. 始める前に、IoT ハブにリソース グループを追加するIoT ハブのサービス接続文字列を取得する、および GitHub から Web アプリをダウンロードするの各手順を完了していることを確認してください。Before starting, make sure you've completed the steps to add a resource group to your IoT hub, get a service connection string for your IoT hub, and download the web app from GitHub.

  1. App Service プランは、App Service でホストされているアプリを実行するための一連のコンピューティング リソースを定義します。An App Service plan defines a set of compute resources for an app hosted in App Service to run. このチュートリアルでは、Developer/Free のレベルを使用して Web アプリをホストします。In this tutorial, we use the Developer/Free tier to host the web app. Free レベルでは、Web アプリは、他のお客様のアプリを含めた他の App Service アプリとの共有 Windows リソースで実行されます。With the Free tier, your web app runs on shared Windows resources with other App Service apps, including apps of other customers. Azure では、Web アプリを Linux コンピューティング リソースにデプロイする App Service プランも提供されています。Azure also offers App Service plans to deploy web apps on Linux compute resources. 使用したい App Service プランが既にある場合は、この手順をスキップできます。You can skip this step if you already have an App Service plan that you want to use.

    Windows の Free レベルを使用して App Service プランを作成するには、次のコマンドを実行します。To create an App Service plan using the Windows free tier, run the following command. IoT Hub が所属するものと同じリソース グループを使用します。Use the same resource group your IoT hub is in. サービス プラン名には、大文字と小文字、数字、ハイフンを含めることができます。Your service plan name can contain upper and lower case letters, numbers, and hyphens.

    az appservice plan create --name <app service plan name> --resource-group <your resource group name> --sku FREE
    
  2. 次に、App Service プランで Web アプリをプロビジョニングします。Now provision a web app in your App Service plan. --deployment-local-git パラメーターにより、お使いのローカル マシンで Git リポジトリから Web アプリのコードがアップロードされてデプロイされます。The --deployment-local-git parameter enables the web app code to be uploaded and deployed from a Git repository on your local machine. Web アプリ名はグローバルに一意である必要があり、大文字と小文字の英字、数字、およびハイフンを使用できます。Your web app name must be globally unique and can contain upper and lower case letters, numbers, and hyphens. 使用している Node.js ランタイムのバージョンに応じて、--runtime パラメーターにノード バージョン 10.6 以降を指定してください。Be sure to specify Node version 10.6 or later for the --runtime parameter, depending on the version of the Node.js runtime you are using. az webapp list-runtimes コマンドを使用して、サポートされているランタイムの一覧を取得できます。You can use the az webapp list-runtimes command to get a list of supported runtimes.

    az webapp create -n <your web app name> -g <your resource group name> -p <your app service plan name> --runtime "node|10.6" --deployment-local-git
    
  3. 次に、IoT Hub 接続文字列とイベント Hub コンシューマー グループを指定する環境変数のアプリケーション設定を追加します。Now add Application Settings for the environment variables that specify the IoT hub connection string and the Event hub consumer group. -settings パラメーターで、個々の設定はスペースで区切られています。Individual settings are space delimited in the -settings parameter. このチュートリアルで前に作成した、IoT Hub のサービス接続文字列とコンシューマー グループを使用します。Use the service connection string for your IoT hub and the consumer group you created previously in this tutorial. 値は引用符で囲まないでください。Don't quote the values.

    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>"
    
  4. Web アプリに対して Web ソケット プロトコルを有効にし、Web アプリが HTTPS 要求のみを受信する (HTTP 要求は HTTPS にリダイレクトされる) ように設定します。Enable the Web Sockets protocol for the web app and set the web app to receive HTTPS requests only (HTTP requests are redirected to 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
    
  5. コードを App Service にデプロイするには、ユーザー レベルのデプロイ資格情報を使用します。To deploy the code to App Service, you'll use your user-level deployment credentials. ユーザー レベルのデプロイ資格情報は、Azure 資格情報とは異なり、Web アプリへの Git のローカルおよび FTP デプロイに使用されます。Your user-level deployment credentials are different from your Azure credentials and are used for Git local and FTP deployments to a web app. それらは一度設定すると、お使いの Azure アカウント内のすべてのサブスクリプションのすべての App Service アプリで有効になります。Once set, they're valid across all of your App Service apps in all subscriptions in your Azure account. 以前にユーザー レベルのデプロイ資格情報を設定している場合は、それらを使用できます。If you've previously set user-level deployment credentials, you can use them.

    ユーザー レベルのデプロイ資格情報を以前に設定していない場合やパスワードを思い出せない場合は、次のコマンドを実行してください。If you haven't previously set user-level deployment credentials or you can't remember your password, run the following command. デプロイ ユーザー名は、Azure 内で一意である必要があり、ローカル Git プッシュに対して '@' シンボルを含めることはできません。Your deployment user name must be unique within Azure, and it must not contain the ‘@’ symbol for local Git pushes. プロンプトが表示されたら、新しいパスワードを入力して確認します。When you're prompted, enter and confirm your new password. パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.

    az webapp deployment user set --user-name <your deployment user name>
    
  6. コードを App Service にプッシュするために使用する Git URL を取得します。Get the Git URL to use to push your code up to App Service.

    az webapp deployment source config-local-git -n <your web app name> -g <your resource group name>
    
  7. App Service の Web アプリの Git リポジトリを参照するリモートをクローンに追加します。Add a remote to your clone that references the Git repository for the web app in App Service. <Git clone URL> の場合、前の手順で返された URL を使用します。For <Git clone URL>, use the URL returned in the previous step. コマンド ウィンドウで次のコマンドを実行します。Run the following command in your command window.

    git remote add webapp <Git clone URL>
    
  8. App Service にコードをデプロイするには、コマンド ウィンドウで次のコマンドを入力します。To deploy the code to App Service, enter the following command in your command window. 資格情報の入力を求められたら、手順 5 で作成したユーザー レベルのデプロイ資格情報を入力します。If you are prompted for credentials, enter the user-level deployment credentials that you created in step 5. 必ず、App Service リモートのメイン ブランチにプッシュしてください。Make sure that you push to the main branch of the App Service remote.

    git push webapp main:main
    
  9. コマンド ウィンドウで、デプロイの進行状況が更新されます。The progress of the deployment will update in your command window. デプロイが成功すると、次の出力のような行で終了します。A successful deployment will end with lines similar to the following output:

    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  main -> main
    
  10. 次のコマンドを実行して、Web アプリの状態のクエリを実行し、それが実行中であることを確認します。Run the following command to query the state of your web app and make sure it is running:

    az webapp show -n <your web app name> -g <your resource group name> --query state
    
  11. ブラウザーで https://<your web app name>.azurewebsites.net にアクセスします。Navigate to https://<your web app name>.azurewebsites.net in a browser. Web アプリをローカルで実行したときに表示されたものと同様の Web ページが表示されます。A web page similar to the one you saw when you ran the web app locally displays. デバイスが実行中でデータを送信していれば、デバイスによって送信された最新の 50 個の温度と湿度を示す測定値の実行中のプロットが表示されるはずです。Assuming that your device is running and sending data, you should see a running plot of the 50 most recent temperature and humidity readings sent by the device.

トラブルシューティングTroubleshooting

このサンプルで問題が発生した場合は、次のセクションの手順を試してください。If you come across any issues with this sample, try the steps in the following sections. まだ問題がある場合は、このトピックの下部でフィードバックを送信してください。If you still have problems, send us feedback at the bottom of this topic.

クライアントの問題Client issues

  • デバイスが一覧に表示されない場合や、グラフが描画されていない場合は、お使いのデバイスでデバイス コードが実行されていることを確認してください。If a device does not appear in the list, or no graph is being drawn, make sure the device code is running on your device.

  • ブラウザーで開発者ツールを開き (多くのブラウザーでは、F12 キーで開きます)、コンソールを見つけます。In the browser, open the developer tools (in many browsers the F12 key will open it), and find the console. そこに警告やエラーが表示されていないか確認します。Look for any warnings or errors printed there.

  • クライアント側のスクリプトは /js/chat-device-data.js でデバッグできます。You can debug client-side script in /js/chat-device-data.js.

ローカル Web サイトの問題Local website issues

  • コンソールの出力についてノードを起動したウィンドウの出力を確認します。Watch the output in the window where you launched node for console output.

  • サーバー コード (具体的には server.js と /scripts/event-hub-reader.js) をデバッグします。Debug the server code, specifically server.js and /scripts/event-hub-reader.js.

Azure App Service の問題Azure App Service issues

  • Azure portal で、Web アプリに移動します。In Azure portal, go to your web app. 左側のウィンドウの [監視] から [App Service ログ] を選択します。Under Monitoring in the left pane, select App Service logs. [アプリケーションのログ記録 (ファイル システム)] を有効にし、 [レベル] を [エラー] に設定して、 [保存] を選択します。Turn Application Logging (File System) to on, set Level to Error, and then select Save. 次に、( [監視] の下の) [ログ ストリーム] を開きます。Then open Log stream (under Monitoring).

  • Azure portal の Web アプリから、 [開発ツール] の下で [コンソール] を選択し、node -vnpm -v を使用してノードと npm のバージョンを確認します。From your web app in Azure portal, under Development Tools select Console and validate node and npm versions with node -v and npm -v.

  • パッケージが見つからないというエラーが表示される場合は、手順が正しく実行されていない可能性があります。If you see an error about not finding a package, you may have run the steps out of order. サイトが (git push を使用して) デプロイされると、アプリ サービスは npm install を実行します。これは、構成したノードの現在のバージョンに基づいて行われます。When the site is deployed (with git push) the app service runs npm install, which runs based on the current version of node it has configured. 後になってそれが構成で変更される場合は、コードに意味のない変更を行って、再度プッシュする必要があります。If that is changed in configuration later, you'll need to make a meaningless change to the code and push again.

次のステップNext steps

Web アプリを使用して、IoT Hub からのリアルタイム センサー データを視覚化することができました。You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Azure IoT Hub からのデータを視覚化するもう 1 つの方法については、「Power BI を使用して Azure IoT Hub からのリアルタイム センサー データを視覚化する」を参照してください。For another way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

引き続き Azure IoT Hub の使用方法を確認すると共に、すべての拡張された IoT のシナリオについて調べるには、次のページを参照してください。To continue to get started with Azure IoT Hub and to explore all extended IoT scenarios, see the following: