8
0

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 1 year has passed since last update.

Cisco Systems JapanAdvent Calendar 2021

Day 22

Node-RED: API != Programing

Last updated at Posted at 2021-12-21

#はじめに
この記事はシスコの同志による Advent Calendar の一部として投稿しています

本記事は2021年版Advent Calendarの22日目の投稿です。私個人としては初めての投稿になります。

#Node-REDとは
Node-JSベースのローコードプログラミングツールで、フローチャートのような図を描いてロジックを実装していくことができます。
image.png

#Node-REDの良いところ

  1. プログラミングの知識がなくても使えるネットワーク機器のコマンドだったら慣れているけど、プログラミングは未経験という方は多いと思います。基礎的なプログラミングはOSPFやBGPなどのオプションを全て覚えるのに比べると簡単だと思いますが、慣れていないから分からない・近寄りたくないという方にとっても気軽に始められる点で非常に優れているツールであると思います。
  2. ネットワークにまつわるAPIで必要な入出力が完備されているHTTPのI N/OUTが標準装備で、ngrokモジュールも公開されたものがありますので、固定のグローバルIPアドレスがなくてもWebhookを受信する子もできます。また、私が所属するMeraki関連ではMQTTのPublisher/Subscriberにもなれますので、これ一つでMeraki関連のAPIを扱うことができます。
  3. 作ったプログラムを簡単に共有できる作成したプログラムはフローと呼びますが、JSON形式で簡単にエクスポートして他の人と共有できるほか、GitHubを経由して公開することも可能です。

#Node-REDを使ってみる
##インストール
Node-REDはNode.jsというサーバサイドJavaScriptで動きますので、色々な環境で利用することができます。私は手元のMacBookで動かすことにしましたので、以下の手順でインストールしました。

ターミナル
#Node.jsのインストール
brew install node

#Node-Redのインストール
sudo npm install -g --unsafe-perm node-red

#Node-Redの実行
node-red

Windowsやラズパイで動かすこともできますが、インストールの仕方はオフィシャルサイトをご覧いただくかググってみてください。

##Node-REDのエディタにアクセスする
デフォルトではtcp/1880で動作しますので、ブラウザに http://localhost:1880/ と入力してアクセスすると白紙のキャンバスが見えてきます。

##Hello World!!してみる
まず、この図のように[HTTP IN]-[CHANGE]-[HTTP RESPONSE]の順に並べてワイヤで繋ぎます。
image.png

次に一番左のHTTP INをダブルクックしてプロフパティを開きます。ここではアクセス先のパスを指定する必要がありますので、なんでも良いのですが /hello としてみました。
image.png

次に真ん中のCHANGEノードをダブルクリックして、表示させたい"Hello World!!"を入力します。
image.png

最後に画面右上のDeployボタンをクリックして完了です。このボタンが赤いときは変更が反映されていませんので、変更した後には必ずクリックしてから動かすようにしましょう。
image.png

動作確認としてブラウザでアクセスしてみます。
http://localhost:1880/hello
image.png

Hello World!!できました。

##少し解説
何気なくぽちぽちノードを並べて繋げただけで、簡単なアプリケーションが出来上がりました。ここで一つ理解しておいた方が良い重要なことが起きていました。それはノードとノードを繋いでいるワイヤが何をしてくれているのか?ということです。答えから先に書くと、このワイヤは msg という変数をノード間で受け渡しています。HTTP INとHTTP RESPONSEは必ずセットで使う必要があるのですが、アクセスがあったときに返す値をmsg.payloadという部分から取り出してきます。msg.payloadは本当によく使うのですが、 msg というオブジェクト型変数の一部になります。

msg をやりとりしてプログラムが成立するというのは本当に大切なことなので、もう少し深掘りしてみたいと思います。まず、debugノードをこのように配置して、Deployします。
image.png

その後もう一度Hello World!!の画面をリロードしてみます。先ほどと同じようにHello World!!と表示されるだけですが、その後Node-REDの画面に戻ってきて、画面右上の虫さんマークをクリックします。
image.png

そうすると、HTTP INでは値がない状態でしたがCHANGEノードを通過することによってHello World!!に書き換えられたことがわかります。今度はこのDEBUGノードでmsg全体を見てみます。ノードをダブルクリックしてdebugの対象をmsg全体に広げます。
image.png

両方ともを変更して、忘れずにDeployをクリックした後に、再度Hello World!!を読み込んでみると、Node-REDのdebugには次にような表示が出ることかと思います。
image.png

実は表示しているメッセージだけではなく、セッションのIDとかリクエスト・レスポンスのパラメータなんかも持ち運ばれていたことがわかってきます。

まずはmsgというNode-RED独特の変数が使われることと、この変数にはPayload以外の属性も含まれているということを理解しておくと後々悩むことが減る思いますので、少し長くなりましたが解説してみました。

#Meraki APIでやりとりをしてみる
##Webhookの受信
クラウドサービスのsyslogと思えば良いかと思いますが、Webサービスで何かイベントが起きた時の通知の手段です。

インターネットからメッセージが飛んできますので、家庭やオフィスで利用しているPCが受信できるようにngrokを利用します。ngrokを単体で利用しても良いのですが、便利なノードがありましたので使ってみました。

右上のメニューからManage paletteをクリックします。
image.png

Installタブでnode-red-contrib-ngrokを検索してインストールします。
image.png

今回は受信するだけですのでこのようにフローを作りました。
image.png

まず、ngrokを有効にします。ノードの左側にある薄緑のところをクリックすると有効になり、debugのところにアクセス先となるURLが表示されると思います。
image.png

このURLをコピーして、MerakiダッシュボードでWebhookの設定を行います。[ネットワーク全体]→[アラート]のページの下ほうにWebhookの設定はあります。URLの部分にはngrokで生成されたホスト名にノードで指定しているパス(この例では/webhook)を追加してあげる必要があります。共有パスワードはなんでも良いのですが、cisco123としてみました。
image.png

テストWebhookを送信というボタンをクリックするとテストメッセージが受信できると思います。
image.png

syslogみたいなものと例えましたが、メッセージの中身はsyslogよりも充実してそうですね。

ここで少しセキュリティ対策を施します。Webhookの送り先は言ってみればただのWebサーバですから、基本的には誰でもアクセス可能です。もし悪意のある人がこの宛先を知って、偽のメッセージを投げてこられたら困りますよね?実際には起きてない障害が起きたことになって、バタバタするかもしれません。このような事態を回避するために共有パスワードを受信時にチェックして、信頼できる送信元かどうかをチェックすることができます。この例ではすでにcisco123とセットしてありますから、チェックする仕組みをフローに組み込みます。

image.png

今回利用するのはスイッチノードです。HTTP INとHTTP RESPONSEの間にドロップすると自動的にワイヤも再接続してくれます。賢いやつですね。プロパティはこのようにmsg.payload.sharedSecretがcisco123と完全一致しているかどうかを定義して、他のものであったら捨てます。

image.png

これで再度テストする際にcisco1234などと少しでも変更すると、エラーになると思います。このように条件分岐する際にはスイッチノードを使います。

##Dashboard APIをコールしてみる
Dashboard APIは文字通りダッシュボード上で行う設定だったりステータスの確認等をREST API経由で行うものです。作成するフローはこのようになります。

image.png

WebhookやHello World!!ではWebアクセスによってその後のフローが動作していましたが、今回は手動でフローを開始する必要がありますので、インジェクトノードを最初に置きます。その後ろにHTTP REQUESTを置いて完了ですが、動作確認のためのDebugを最後に置いています。HTTP REQUESTは、URLの設定だけですが今回はオーガナイゼーション一覧を取得するためのURLを指定しました。

image.png

認証に使うAPIキーの設定などはインジェクトノードの中で行なっています。CHANGEノードと同じように値のセットを行うことができます。

image.png

準備としてDashboard APIを受け付けるようにオーガナイゼーションの設定を行うことと、Meraki Dashboardアカウントに対するAPIキーの生成が必要になります。

[オーガナイゼーション]→[設定]
image.png

[画面右上のメールアドレス]→[プロファイル]
image.png

なお、最新のDashboard APIに関するドキュメントはこちらで確認できます。
https://developer.cisco.com/meraki/api-v1/

これでインジェクトノードの左にあるボタンをクリックすることで実行でき、応答をdebugで確認できるかと思います。
image.png

ただ、ここで気がつく方もいるかもしれませんが、JSONの形式で表記された文字列として取り扱われています。このため、この先の処理をしやすくするために少し工夫をします。HTTP REQUESTノードのプロパティを開き、JSON Parseするように変更します。
image.png

もしくはこのようにJSON Parseのノードを挟みます。
image.png

これによりdebugが次のように変化し、後で扱いやすくなります。
image.png

##便利なパレット
ここまででAPIに触れることができ、同じような方法でMeraki以外のAPIも触れることができるようになると思います。Merakiでは簡単にAPIをご利用いただくためにいくつか専用のパレットを準備しています。

image.png

node-red-contrib-meraki-cmxはSanning APIという無線アクセスポイントで検出したMACアドレスの位置情報を取得するためのノードになります。今回は使いません。

node-red-contrib-meraki-dashboard-api-v1を入れておくと、先ほどのDashboard APIへのアクセスもより簡単になります。
image.png

DashboardノードのプロパティからAPIエンドポイントの一覧を探すことができますので、ドキュメントを読まなくもダッシュボードの操作に慣れている方でしたら探していくことができるようになっています。
image.png

以下のようなフローにすることでHTTP REQUESTノードで作った時と同じように動きます。
image.png

#おわりに
今までプログラミングが苦手でAPIな話題には耳を塞いでいた方も、Node-REDを利用すれば自分でもできるんじゃないかな?と思われたのではないでしょうか?実際、私の同僚の数名はNode-REDを知ることでAPIを使ったプログラムを作り始めました。Node-REDは今日紹介したこと以外にもLINEに通知を出すためのパレットなども備えていますので、実用的なアプリケーションを作るために便利な要素が詰まっています。また、子供向けのプログラミング学習で電子工作キットなどでも利用されていて、仕事の場面以外でも役に立つと思います。この記事がきっかけで、少しでもプログラミングアレルギーをお持ちの方が減ると嬉しいです。

#免責事項
本サイトおよび対応するコメントにおいて表明される意見は、投稿者本人の個人的意見であり、シスコの意見ではありません。本サイトの内容は、情報の提供のみを目的として掲載されており、シスコや他の関係者による推奨や表明を目的としたものではありません。各利用者は、本 Web サイトへの掲載により、投稿、リンクその他の方法でアップロードした全ての情報の内容に対して全責任を負い、本 Web サイトの利用に関するあらゆる責任からシスコを免責することに同意したものとします。

8
0
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
8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?