Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@narabanow

Azure IoT Hubチュートリアル「リアルタイムセンサーデータを視覚化する」修正箇所

Posted at

Azure IoT Hubのお勉強でチュートリアルをやっていったら動かなかった。修正箇所をメモしておく。

対象

以下のチュートリアル
Azure App Service の Web Apps 機能を使用して Azure IoT Hub からのリアルタイム センサー データを視覚化する

修正箇所

IoT ハブからデータを読み取る Web アプリの構成に記載されているアプリの設定で、次のキー・値のペアを追加する。

キー 値
WEBSITE_NODE_DEFAULT_VERSION 8.9.4

発生事象と実施経緯

修正しないと何が起きるのか。

1. Webアプリのデプロイに失敗する

手順に沿ってアップロードしようとしたら、gitのpushで次のメッセージが出てデプロイに失敗する。

Counting objects: 62, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (54/54), done.
Writing objects: 100% (62/62), 82.31 KiB | 1.68 MiB/s, done.
Total 62 (delta 21), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '870c054bcd'.
remote: Generating deployment script.
remote: Generating deployment script for node.js Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Creating app_offline.htm
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Deleting file: 'hostingstart.html'
remote: Copying file: '.eslintignore'
remote: Copying file: '.eslintrc'
remote: Copying file: '.gitignore'
remote: Copying file: '.travis.yml'
remote: Copying file: 'LICENSE'
remote: Copying file: 'package.json'
remote: Copying file: 'README.md'
remote: Copying file: 'server.js'
remote: Copying file: 'IoThub\iot-hub.js'
remote: Copying file: 'public\index.html'
remote: Copying file: 'public\javascripts\Chart.min.js'
remote: Copying file: 'public\javascripts\index.js'
remote: Copying file: 'public\javascripts\jquery-2.1.4.min.js'
remote: Copying file: 'public\stylesheets\style.css'
remote: Deleting app_offline.htm
remote: Using start-up script server.js from package.json.
remote: Generated web.config.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 0.10.40.
remote: Selected npm version 1.4.28
remote: .............
remote: npm WARN deprecated azure-event-hubs@0.2.11: < 0.2.12
remote: .....
remote: npm WARN engine is-buffer@2.0.2: wanted: {"node":">=4"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote:
remote: > async-lock@1.1.3 postinstall D:\home\site\wwwroot\node_modules\azure-event-hubs\node_modules\async-lock
remote: >
remote:
remote: npm WARN engine request@2.88.0: wanted: {"node":">= 4"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote: npm WARN engine har-validator@5.1.0: wanted: {"node":">=4"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote: npm WARN engine form-data@2.3.2: wanted: {"node":">= 0.12"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote: npm WARN engine har-schema@2.0.0: wanted: {"node":">=4"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote: ....
remote: npm WARN engine co@4.6.0: wanted: {"iojs":">= 1.0.0","node":">= 0.12.0"} (current: {"node":"0.10.40","npm":"1.4.28"})
remote: .........
remote: npm ERR! Error: Method Not Allowed
remote: npm ERR!     at errorResponse (D:\Program Files (x86)\npm\1.4.28\node_modules\npm\lib\cache\add-named.js:260:10)
remote: npm ERR!     at D:\Program Files (x86)\npm\1.4.28\node_modules\npm\lib\cache\add-named.js:203:12
remote: npm ERR!     at saved (D:\Program Files (x86)\npm\1.4.28\node_modules\npm\node_modules\npm-registry-client\lib\get.js:167:7)
remote: npm ERR!     at Object.oncomplete (fs.js:108:15)
remote: npm ERR! If you need help, you may report this *entire* log,
remote: npm ERR! including the npm and node versions, at:
remote: npm ERR!     <http://github.com/npm/npm/issues>
remote:
remote: npm ERR! System Windows_NT 6.2.9200
remote: npm ERR! command "D:\\Program Files (x86)\\nodejs\\0.10.40\\node.exe" "D:\\Program Files (x86)\\npm\\1.4.28\\node_modules\\npm\\bin\\npm-cli.js" "install" "--production"
remote: npm ERR! cwd D:\home\site\wwwroot
remote: npm ERR! node -v v0.10.40
remote: npm ERR! npm -v 1.4.28
remote: npm ERR! code E405
remote: Failed exitCode=1, command="D:\Program Files (x86)\nodejs\0.10.40\node.exe" "D:\Program Files (x86)\npm\1.4.28\node_modules\npm\bin\npm-cli.js" install --production
remote: An error has occurred during web site deployment.
remote: npm
remote:
remote: Error - Changes committed to remote repository but deployment to website failed.

node.jsのバージョンが古すぎるのが原因。0.10て。

The node.js application will run with the default node.js version 0.10.40.

チュートリアルに貼ってあるスクリーンショットをよく見ると、アプリの設定で指定するキー・値のペアに、ドキュメントには明示されていないエントリがあることがわかる。1

以下が設定されている。

キー 値
WEBSITE_NODE_DEFAULT_VERSION 6.9.1

2. Webアプリの実行時にエラーが発生してブラウザに何も表示されない

上記の設定追加でいけるだろうと思って再度デプロイすると、デプロイには成功する。

remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.

が、Web アプリを開いて IoT ハブから取得したリアルタイムの温度と湿度のデータを確認する手順を実行してもブラウザには何も表示されない。2

クライアントサイドからは何もわからないので、App Serviceの診断ログでアプリケーションログの取得をオンにしてログストリームを開いておいて実行すると以下のようなメッセージが出る。

(Coordinated Universal Time): Application has thrown an uncaught exception and is terminated:
D:\home\site\wwwroot\node_modules\azure-event-hubs\dist\lib\rhea-promise\connection.js:183
    async createSender(options) {
          ^^^^^^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\home\site\wwwroot\node_modules\azure-event-hubs\dist\lib\rhea-promise\index.js:16:20)
    at Module._compile (module.js:570:32)
Application has thrown an uncaught exception and is terminated:
D:\home\site\wwwroot\node_modules\azure-event-hubs\dist\lib\rhea-promise\connection.js:183
    async createSender(options) {
          ^^^^^^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\home\site\wwwroot\node_modules\azure-event-hubs\dist\lib\rhea-promise\index.js:16:20)
    at Module._compile (module.js:570:32)

サンプルアプリのGitHubリポジトリを見に行くと、そのままのissueがある。6.9.1でもnode.jsのバージョンが古く、8.9.4に上げろと書いてある。
Deploying to azure returns blank screen

教訓

全部終わった後に気付いたのだが、上に挙げた事象と解決方法は実は英語のページのフィードバックには載っていた。
フィードバックまでは訳されないので、何かあったら（というか最初から）英語ページを見ましょう、と思いました〇

おまけ

これも英語ページのフィードバックには報告されているが、チュートリアルのWeb アプリを作成する手順のスクリーンショットも古く、今はOSが選べるようになっている。

このとき、デフォルトのWindowsを選択すると問題にならないが、Linuxを選択した場合はアプリの設定で指定する以下のキーでは動作しないらしい（試してない）。

  • Azure.IoT.IoTHub.ConnectionString
  • Azure.IoT.IoTHub.ConsumerGroup

環境変数の変数名にドットを含められないことに起因しているようなので、名前からドットを除去する。サンプルアプリのserver.jsも修正が必要。

  1. ページ表示上のサイズが小さいだけで、元の画像の解像度は充分なので元画像を表示するとわかりやすい ↩

  2. Firefoxの場合。Microsoft EdgeやGoogle Chromeだと500エラーになった。 ↩

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?