PHONE APPLI Engineer blog

エンジニアブログ

Node-RED: Docker で自作ノードの開発環境を整えてみた

はじめに

nodered.jp

こんにちは、リサーチデベロップメントの後藤です。

簡易なバッチ処理や API 開発には、Node-RED がとても便利で、業務でもよくお世話になっています。
とくに、視覚的に優しいのが個人的に気に入っている点で、HTTP のエンドポイントなんかは理解しやすいです。

Node-RED に使い慣れてくると、npm で公開されている外部のノードを活用する機会があります。
公開されているものでも便利なノードは多くあるのですが、中には求めているものと若干違うノードや、ピンとくるものがあっても開発が止まってしまっているノードがあり、そういう時は少しもどかしい気持ちになります。

ということで、今回は Node-RED における自作ノードの開発方法と環境構築の方法を学習し、記事にしてみました。
ぜひご覧ください。

環境定義

Node-RED はさまざまな環境にインストールできますが、今回はタイトルの通り Docker の環境でノードの開発をおこなっていきます。

まずは、適当な場所に作業ディレクトリを作成します。

mkdir Node-RED
cd Node-RED

次に Docker Compose を使い、今回の実行環境をYAMLファイルに定義します。
docker-compose.yml を作成し、以下を記述します。

touch docker-compose.yml

version: '3'
services:
  node-red:
    image: nodered/node-red:latest
    container_name: Dev-node-red
    volumes:
      - node_red_data:/data
      - ./self-node:/data/self-node
    ports:
      - "1880:1880"

volumes:
  node_red_data:
    # external: true 　　　　//　　既に存在している volumes を活用する場合

すでに Docker で Node-RED の用の Volumes が存在しているかたは、docker-compose.yml に external: true の記述を含めて、既存 Volumes を流用した新しい container を作成してください。

ノード開発

ノードを開発するには、npm モジュールとしてパッケージ化されたファイル群が必要です。
今回は、公式のサンプルとして紹介されている lower-case ノードを例に進めていきます。

まずは下記コマンドを実行し、必要な3つのファイルとディレクトリを用意します。

mkdir -p self-node/node-red-contrib-example-lower-case
cd self-node/node-red-contrib-example-lower-case
touch lower-case.{js,html}

npm init -y

すべてのコマンドを実行しきった後は、今回の作業ディレクトリ "Node-RED" の構成は以下のようになっているはずです。

Node-RED
.
├── docker-compose.yml
└── self-node
    └── node-red-contrib-example-lower-case
        ├── lower-case.html
        ├── lower-case.js
        └── package.json

2 directories, 4 files

続いて、node-red-contrib-example-lower-case 内のファイル群を、それぞれ個別に更新します。

①packege.json

packege.json の一部を下記のように更新します。

{
    "name" : "node-red-contrib-example-lower-case",
    ...
    "node-red" : {
        "nodes": {
            "lower-case": "lower-case.js"
        }
    }
}

ノードには命名規則があり、基本的にはプレフィックスとして、node-red-contrib- を利用する必要があります。
packege.json の name プロパティを命名規則に沿うように変更します。

また、npm init 時には生成されなかった、node-red プロパティも必要です。

②lower-case.js

lower-case.js には下記のコードを記述します。

module.exports = function(RED) {
    function LowerCaseNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        node.on('input', function(msg) {
            msg.payload = msg.payload.toLowerCase();
            node.send(msg);
        });
    }
    RED.nodes.registerType("lower-case",LowerCaseNode);
}

ノード開発における JavaScript のファイルは、ノードの処理を記述したファイルです。
on によるイベントリスナーの登録と、send によるメッセージの出力、これらの2つが基本的な要素になるかと思います。

ここでは、input イベントの登録をすることで、上流のフローからメッセージを受け付けます。そして、受け取ったメッセージを toLowerCase( ) で変換し、 変換したメッセージを send により後続のフローへと流しています。

③lower-case.html

lower-case.html には下記のコードを記述します。

<!-- ノードプロパティ -->
<script type="text/javascript">
    RED.nodes.registerType('lower-case',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"lower-case";
        }
    });
</script>

<!-- 編集画面 -->
<script type="text/html" data-template-name="lower-case">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<!-- ヘルプ -->
<script type="text/html" data-help-name="lower-case">
    <p>A simple node that converts the message payloads into all lower-case characters</p>
</script>

HTML のファイルでは、ノードプロパティ、編集画面、ヘルプを定義します。
script タグで囲まれている3つのセクションがそれぞれ該当します。

実行環境へのインストール

すべてのファイルを作成できたら、次は実行環境へのインストールです。

プロジェクトルートへ戻り、下記のコマンドでコンテナを立ち上げます。

docker compose up -d

起動したらコンテナ内に入り、/data へと移動します。
docker-compose.yml で定義したように、作業ディレクトリの ./self-node/node-red-contrib-example-lower-case が /data へとマウントされているはずです。
/data に移動したら、node-red-contrib-example-lower-case に対して npm install を実行します。

docker compose exec node-red  bash

cd /data
npm install ./self-node/node-red-contrib-example-lower-case

また、環境によって npm install を実行するディレクトリは異なる場合があります。
ローカルPC へと Node-RED をインストールした場合、npm install は ~/.node-red での実行になるそうなのでお気をつけください。

Node-RED のコンテナを再起動し、ノード一覧を見てみると、インストールした lower-case ノードが反映されているのが分かります！

インストール結果

ヘルプメッセージや編集画面には、lower-case.html で記述した内容がしっかりと反映されています。

ヘルプ
編集画面

以降、Node-RED の自作ノードを作っていく場合は、self-node 内でパッケージを作っていけば良いので管理の面でも楽ちんです。

おわりに

今回の環境構築の結果、自作のノード開発がとてもやりやすくなりました。
Docker なので環境が壊れても大丈夫という安心感がありますし、ホスト側に自作ノードのパッケージが残るので管理のしやすさもあるかなと思います。
個人的にはある程度良い環境ができたと感じるのですが、もっといい方法があればぜひ教えていただきたいです。

次の機会には、外部モジュールとして npm に公開するまでをまとめていきたいなと思います。
以上、「Node-RED: Docker で自作ノードの開発環境を整えてみた」でした！


PHONE APPLIについて

phoneappli.net
phoneappli.net