Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node-RED on SAKURA cloud

497 views

Published on

さくらのクラウド上に Node-RED を立ち上げて、体験してみるハンズオンの資料です。

さくらクラブ岐阜 第8回 Node-RED 入門ハンズオン
https://saku-love.doorkeeper.jp/events/77302

Published in: Technology
  • Be the first to comment

Node-RED on SAKURA cloud

  1. 1. Node-RED ハンズオン キホン編 さくらクラブ岐阜 第8回 Node-RED 入門ハンズオン https://saku-love.doorkeeper.jp/events/77302 資料
  2. 2. Node-RED ハンズオン キホン編 • さくらのクラウド(IaaS) でNode-RED環境を作る (30分) • アカウント、ユーザーを準備する • 仮想サーバで Node-RED 環境を作成する • Node-RED の基本操作を覚える (30分) • Node-RED キホンのキ • Node-RED を体験してみよう! • Node-REDダッシュボードが便利! • Node-REDダッシュボードの準備 • Node-REDダッシュボードとは • Node-REDダッシュボードを体験してみよう!
  3. 3. 大平かづみ / Kazumi OHIRA @dz_ 主にプログラマ Ansible 好き! クラウド大好き! Azure
  4. 4. さくらのクラウドで Node-RED 環境をつくる
  5. 5. さくらのクラウドとは • さくらインターネットが提供 するクラウドサービス • 仮想サーバ(IaaS) をはじめ、 同社ならではの物理インフラ との相性を兼ね添えたライン ナップ • その他、sakura.io (IoT プラッ トフォーム) など
  6. 6. コントロールパネルにログインする (1) さくらのクラウドのトップページから、コントロールパネルのログイン画面を開く。 https://cloud.sakura.ad.jp/
  7. 7. コントロールパネルにログインする (2) 「さくらインターネット会員としてログイン」のフォームからログインする。
  8. 8. アカウントを作成する(1) 「アカウントの作成…」をクリックする。
  9. 9. アカウントを作成する(2) 約款、個人情報の取扱いを確認・同意し、「名前」「アカウントコード」を入力する。 また、「このアカウント用の同名ユーザを作成」のチェックを外し、作成します。 チェックを外す (別途作成するため) この「アカウント」は、プロジェ クト単位またはチーム、部署単位 で作成するとよさそうです。
  10. 10. アカウントを作成する(3) 「確認」ダイアログで、「作成」をクリックします。
  11. 11. 作成したアカウントを確認する 今作成したアカウントの情報が表示されていることを確認します。
  12. 12. アカウントを選択する 「サービス」を開き、作成したアカウントを選択します。
  13. 13. さくらのクラウドにクーポンを適用 する(1) 「さくらのクラウド(IaaS)」を開きます。
  14. 14. さくらのクラウドにクーポンを適用 する(2) 「設定」(歯車のマーク)を開きます。
  15. 15. さくらのクラウドにクーポンを適用 する(3) 「クーポン」を開き、「追加」をクリックします。
  16. 16. 追加したクーポンを確認する 今追加したクーポンの情報が表示されていることを確認します。
  17. 17. ホームに戻る 右上のアカウント名をクリックし、「ホームへ戻る」をクリックします。
  18. 18. ユーザを作成する(1) 「ユーザ」を開きます。
  19. 19. ユーザを作成する(2) 「ユーザーの作成」をクリックします。
  20. 20. ユーザを作成する(3) 「名前」「ユーザコード」「パスワード」を入力します。「アカウントのアクセス権限」 は、「作成・削除」を選択し、「作成」をクリックします。
  21. 21. ユーザを作成する(4) 「確認」ダイアログで、「作成」をクリックします。
  22. 22. 作成したユーザを確認する 今作成したユーザの情報が表示されてることを確認します。
  23. 23. ログアウトする 「ログアウト」します。
  24. 24. ユーザでログインする 今作成したユーザーでログインしましょう。
  25. 25. ユーザでログインできたことを確認 する 右上に「<ユーザ名>@<会員ID>」と表示され、ユーザでログインできたことを確認します。
  26. 26. Node-REDがうごくサーバを 作成する
  27. 27. Node-REDがうごく仮想サーバを作成する 流れ • 「スタートアップスクリプト」を利用して、Node-REDがインス トールされた仮想サーバを作成します。 • 「スタートアップスクリプト」とは • 仮想サーバを作成する際に任意のスクリプトを指定し、起動時にそれ らを実行する仕組み。 • https://manual.sakura.ad.jp/cloud/startup-script/about.html • 今回は、さくらのクラウドが提供する「パブリックスクリプト」のう ち、Node-REDをインストールするスクリプトを利用します。 • https://github.com/sakura-internet/cloud-startupscripts/tree/master/publicscript/node- red せいごさんも、 コントリビュート!
  28. 28. Node-REDがうごく仮想サーバを作成 する(1) 「さくらのクラウド (IaaS)」を開きます。
  29. 29. Node-REDがうごく仮想サーバを作成 する(2) 「サーバ」を開き、「追加」をクリックします。
  30. 30. Node-REDがうごく仮想サーバを作成 する(2) 「シンプルモード」のチェックを外し、シンプルモードを解除します。
  31. 31. Node-REDがうごく仮想サーバを作成 する(3) 「1. サーバプラン」はそのままにし、スクロールします。
  32. 32. Node-REDがうごく仮想サーバを作成 する(4) 「2. ディスク」は、「アーカイブを選択」で「CentOS 7.5 (1804) 64bit」( CentOS 7系)を選 択し、その他の項目はそのまま、スクロールして次に進みます。
  33. 33. Node-REDがうごく仮想サーバを作成 する(5) 「3. NIC」はそのまま、スクロールして次に進みます。
  34. 34. Node-REDがうごく仮想サーバを作成 する(6) 「4. ディスクの修正」は、「管理ユーザのパスワード」「ホスト名」を入力する。公開鍵 は、そのままで、「スタートアップスクリプト」の設定に続きます。
  35. 35. Node-REDがうごく仮想サーバを作成 する(7) 「スタートアップスクリプト」は、「shell」を選択し、「配置する スタートアップスクリ プト」で「Node-RED」を選択します。
  36. 36. Node-REDがうごく仮想サーバを作成 する(8) 「スタートアップスクリプト オプション」は、「Node-REDのログインID」「Node-REDのロ グインパスワード」を入力します。(ポート番号はデフォルトのままとする。)
  37. 37. Node-REDがうごく仮想サーバを作成 する(9) 「5. シンプル監視」「6. サーバの情報」「7. その他のオプション」「作成数」はそのまま で、「作成」をクリックします。
  38. 38. Node-REDがうごく仮想サーバを作成 する(10) 「操作確認」ダイアログで、「作成」をクリックします。
  39. 39. Node-REDがうごく仮想サーバを作成 する(11) 完了するまでしばらく待ちます。
  40. 40. Node-REDがうごく仮想サーバを作成 する(12) サーバの作成が完了しました! 「閉じる」をクリックし、「サーバ」を開きます。
  41. 41. 作成したNode-REDがうごく仮想サー バを確認する(1) 「サーバ一覧」に今作成したサーバが表示されていることを確認します。
  42. 42. 作成したNode-REDがうごく仮想サー バを確認する(2) 「インターフェース」のIPアドレスを 1880 ポートを指定(例: http://xx.xx.xx.xx:1880 ) ひらくと、Node-REDのログイン画面が表示されることを確認します。
  43. 43. Node-REDにログインする Node-REDのログイン画面で、「スタートアップスクリプト オプション」で指定したログイ ンIDとパスワードでログインします。
  44. 44. Node-REDにログインできることを確 認する ログインが成功して、Node-REDのワークスペースが表示されればOK!
  45. 45. Node-RED キホンのキ Essential of Node-RED
  46. 46. 画面の説明 (1)
  47. 47. 画面の説明 (2) パレット ワークスペース タブ • 情報 • デバッグ • ダッシュボード
  48. 48. 画面の説明 (3) デプロイボタン メニューボタン メニュー
  49. 49. ノードの説明 (1) データの入力を受けとる ノード。待機させたり、タ イミングを指定できたり。 入力ノード • inject • mqtt • http • tcp/udp 様々な処理を行うノード。 変換、追加・削除したり、 条件分岐したり。 機能ノード • function • template • switch • change • csv • base64 データを出力するノード。 出力ノード • debug • mqtt • http response • tcp/udp • play audio
  50. 50. ノードの説明 (2) 端子(ポート)ボタン (入力ノード) ボタン (出力ノード)
  51. 51. フローの説明 (1) 処理の流れ
  52. 52. フローの説明 (2) { data: { temp: 20, hum: 65 }, status: “ok” } データ データの流れ
  53. 53. Node-REDを 体験してみよう! Let’s try!
  54. 54. 「まっさらなキャンバスを」 ワークスペースを 追加するボタン
  55. 55. まっさらなワークスペース準備完了
  56. 56. 最初のフロー (1) injectノード
  57. 57. 片方のポートをク リックして、ドラッ グしてもう片方の ポートの上ではなす 最初のフロー (2)
  58. 58. 最初のフロー (2) デプロイ!
  59. 59. 最初のフロー、 デプロイできたか確認 デプロイできました
  60. 60. インジェクトすると、 デバッグ出力される確認 injectノード のボタンをク リック デバッグウィンド ウにタイムスタン プが表示されまし た!
  61. 61. ノードのプロパティを変えてみる ダブルクリック でプロパティが 開く JSON に 変えてみる
  62. 62. injectノードのペイロード(JSON)を 編集する クリックして、 JSON を編集する
  63. 63. デプロイ! 編集を「完了」し、 「デプロイ」しま しょう
  64. 64. インジェクトすると、 JSONデータが出力される確認 デバッグウィンド ウにJSONデータが 出力されました! ポチッ
  65. 65. ダッシュボードが便利 🙌 Dashboard is so useful!
  66. 66. Node-REDダッシュボードの 準備
  67. 67. ダッシュボードをインストールする (1) 右上のメニューボタンからメニューを開き、「Manage palette」を開きます。
  68. 68. ダッシュボードをインストールする (2) 「Palette」の「Install」を開きます。
  69. 69. ダッシュボードをインストールする (3) 検索フィールドに node-red-dashoboard と入力し、表示されたパッケージの「Install」をク リックします。
  70. 70. ダッシュボードをインストールする (4) 確認のダイアログで、「Install」をクリックします。 (ドキュメントを読みたい方は、「Open node information」からひらけます。)
  71. 71. ダッシュボードをインストールする (5) インストールされたら、「Close」をクリックして、Palette を閉じます。
  72. 72. インストールしたダッシュボードを 確認する パレットに「dashboard」が、また右のタブに「dashboard」が追加されていることを確認し ます。
  73. 73. Node-REDダッシュボードとは
  74. 74. Node-RED ダッシュボード • 簡単にリアルタイムで可視化 • メーター • グラフ • スライダー • テキスト入力・出力 • カラーピッカー • 書籍でもピックアップ • 5.3 Node-RED ダッシュボード • 5.4「データベースを利用する」 • 5.5「worldmapノード」で地図表示 https://flows.nodered.org/node/node-red-dashboard
  75. 75. ダッシュボード関連の画面 ダッシュボード タブ ダッシュボード 設定ウィンドウパレットの ダッシュボード
  76. 76. Node-REDダッシュボードを 体験してみよう! Try Node-RED dashboard!
  77. 77. Node-REDダッシュボードに テキストを表示する
  78. 78. 「inject」ノードをtimestampに戻す 先ほどの「Inject」ノードをタイムスタンプに戻します。
  79. 79. ダッシュボードにテキストを表示す る(1) パレットの「dashboard」から「text」出力ノードをみつけ、ドラッグ&ペーストします。
  80. 80. ダッシュボードにテキストを表示す る(2) 「text」出力ノードに「inject」ノードをつなげます。
  81. 81. ダッシュボードにテキストを表示す る(3) 「text」出力ノードをダブルクリックしプロパティを開き、「Group」の鉛筆マークをク リックして新しいUIグループを作成します。
  82. 82. ダッシュボードにテキストを表示す る(4) Default という名前の新規UIグループが仮作成されるので、「Tab」の鉛筆マークをクリック し、新規UIタブを作成します。
  83. 83. ダッシュボードにテキストを表示す る(5) 新規UIタブのプロパティでは、「Name」「Icon」をそのまま、「Add」をクリックして作成 します。
  84. 84. ダッシュボードにテキストを表示す る(6) 新規UIグループのプロパティで、「Tab」に今作成した Home タブが指定されてることを確 認し、「Add」をクリックします。
  85. 85. ダッシュボードにテキストを表示す る(7) 「text」出力ノードのプロパティで、「Group」に今作成した Default [Home] グループが指 定されてることを確認し、「Done」をクリックします。
  86. 86. ダッシュボードにテキストを表示す る(8) 「Deploy」をクリックして、変更を反映します。
  87. 87. ダッシュボードにテキストを表示す る(9) 「dashboard」タブを開くと、先ほど作成したUIタブとUIグループが確認できます。 「開く」アイコンをクリックし、ダッシュボードを開きます。
  88. 88. ダッシュボードを確認する 上記のダッシュボード画面が表示されることを確認します。
  89. 89. ダッシュボードのテキストの動作を 確認する 「inject」ノードのボタンをクリックすると、ダッシュボードのテキストの内容がリアルタ イムに更新されることを確認できます。
  90. 90. Node-REDダッシュボードに グラフを表示する
  91. 91. ダッシュボードにグラフを表示する (1) ワークスペースに戻り、「chart」ノードをドラッグ&ドロップします。
  92. 92. ダッシュボードにグラフを表示する (2) 「inject」ノードと、「chart」ノードをつなげます。
  93. 93. ダッシュボードにグラフを表示する (3) 「chart」ノードをダブルクリックしてプロパティを開き、何も変えずに「Done」をクリッ クして保存します。
  94. 94. ダッシュボードにグラフを表示する (4) 「Deploy」ボタンをクリックして、変更を反映します。
  95. 95. ダッシュボードを確認する ダッシュボードを開くと、 chart が追加されていることを確認できます。
  96. 96. ダッシュボードのテキストの動作を 確認する 「inject」ノードのボタンを何度かクリックすると、ダッシュボードの chart のグラフがリ アルタイムに更新されることを確認できます。
  97. 97. Node-REDダッシュボードから 音声を出力する
  98. 98. ダッシュボードから音声を出力する (1) ワークスペースに戻り、新しい「inject」ノードをドラッグ&ドロップします。
  99. 99. ダッシュボードから音声を出力する (2) 「inject」ノードをダブルクリックしてプロパティを開き、「Payload」を「string」に変更 します。
  100. 100. ダッシュボードから音声を出力する (3) 「Payload」に適当な文字列を入力し、「Done」をクリックして保存します。
  101. 101. ダッシュボードから音声を出力する (4) 「dashboard」の「audio out」ノードを、ワークスペースにドロップします。
  102. 102. ダッシュボードから音声を出力する (5) 「audio out」ノードをダブルクリックしてプロパティを開き、そのまま「Done」をクリッ クして保存します。
  103. 103. ダッシュボードから音声を出力する (6) 「Deploy」ボタンをクリックし、変更を反映します。
  104. 104. ダッシュボードから音声が出力され ることを確認する 「inject」ノードのボタンをクリックすると、音声が出力されることを確認できます。
  105. 105. キホン編はここまで 🙌

×