How to debug your Node-RED node.

Node-RED UG勉強会 2019 年末LTパーティ
https://node-red.connpass.com/event/153172/

の登壇資料です。

Transcript

1. Node-REDで デバッグするための 開発環境 2019/11/29 (Fri) Node-RED UG勉強会 2019 年末LT パーティ @ Uhuru @ ryoichi_obara
2. @ ryoichi_obara • 中小SIer (製造業向け) IoT / クラウド • 好きなNode-REDノード: • クラフトビール消費量: 600+ [杯/年] ↓ブログ
3. Cookbook翻訳してたりもしました
4. 前回 話したこと
5. 今回 話すこと - デバッグについて カスタムノードを開発する際、デバッグノードだけではなく ステップ実行をしたい そのための環境構築
6. 前提 • Node.js インストール済 • VS Code インストール済 • ノードを公開するならgitも
7. 構成の概要 1. Node-REDをローカルで実行するためのディレクトリ 例 C:¥node-red-run-local 2. カスタムノード開発用のディレクトリ (≒ 公開するリポジトリ) 例 C:¥node-red-contrib-your-custom-node npmで 参照(リンク)する VS Codeのワークスペース
8. ryoichi-obara / node-red-run-local って何? • グローバルではなく、ローカルでNode-REDを実行 • 設定ファイル一式を自ディレクトリ配下に保存するオプション付 • VS Codeで実行するための設定ファイルも同梱
9. このオプションが指定してある https://nodered.jp/docs/getting-started/local#コマンドラインの使い方
10. • cloneする • 依存関係のダウンロード > git clone git@github.com:ryoichi-obara/node-red-run-local.git 【任意のdir名】 > cd 【cloneしたdir名】 > npm i 準備1. node-red-run-local https://github.com/ryoichi-obara/node-red-run-local
11. 準備2. カスタムノード開発用ディレクトリ • ディレクトリ新規作成 • git, npm初期化 • 開発するノードについての - package.json - ノード名.html - ノード名.js を配置 https://nodered.jp/docs/creating-nodes/first-node > mkdir node-red-contrib-your-custom-node > cd node-red-contrib-your-custom-node > git init > npm init -y
12. カレントディレクトリを実行環境(run-localの方)にして 開発対象のディレクトリを npm i する (ディレクトリ名/構成は一例) C:¥node-red-run-local> npm i C:¥node-red-contrib-your-custom-node 準備3. npmでリンクする https://nodered.jp/docs/creating-nodes/first-node#node-redでノードの動作確認
13. 準備3. npmでリンクする(イメージ)
14. 準備4. VS Codeでワークスペースの設定 • VS Codeで新しいウィンドウ • フォルダーをワークスペースに追加 - cloneしたローカル実行用ディレクトリ (≒ node-red-run-local) - 開発用のノード (ここでは node-red-contrib-your-custom-node) • この構成を、 [任意のファイル名].code-workspace として 保存することもできる
15. 構成の概要 (おさらい) 1. Node-REDをローカルで実行するためのディレクトリ 例 C:¥node-red-run-local 2. カスタムノード開発用のディレクトリ (≒ 公開するリポジトリ) 例 C:¥node-red-contrib-your-custom-node npmで 参照(リンク)する VS Codeのワークスペース
16. 実際の画面
17. 実行してみましょう • F5 でローカル実行 • デバッグ用のフローを作成 • inject で動かす • VS Code 上で F9 でブレークポイントを貼る • また inject で動かす 今度は VS Code のブレークポイントで止まっていることを確認 • F10 でステップ実行 • フローが最後まで動いたことを確認 コアノードもデバッグできるよ! node_modules/@node-red/nodes/core/**
18. 時間があればデモ あるはず・・・!
19. ご清聴ありがとうございました • 公式ドキュメントは充実しているので、読むと勉強になる • Node-REDはプログラムレスだけど、プログラム書くならVS Code