メモ

ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモ

Posted on by seigo

ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモです。

ベースにしたもの

Heroku で動かす Node-RED にパスワード設定しノード追加インストールにも対応するメモ（npm prefix アプローチ）

こちらの仕組みがひとまずうまく行っているので、使いたいとき毎回も作業しなくてもいいように GitHub にリポジトリを作りました。

フロントエンド用にファイルを置いて公開できるナレッジだけ加えた

また、Node-RED のプロジェクト内で Vue CLI 4 で作った Vue 3 を動かす 記事などにある、httpStatic: './node-red-static/', で、フロントエンドまわりのファイルを置いて公開できる場所も Vue でも Svelte などもいれず、素の index.html だけですが入れています。

今後、Vue や Svelte などのフロントエンドのワークフレームについては、内容が大きく派生していくので別途つくる予定です。

GitHub リポジトリ

リポジトリはこちらです。

1ft-seabass/heroku-node-red-local-based-starter

今後、自分が使ってみて調整していく可能性はありますが、Heroku にコミットすると使えることを保つつもりです。そうでないと自分も使わなくなってしまいますしね。

ざっくり、以下の対応をしています。

  • Git の初期設定 main ブランチで作業できます
  • 最低限の .gitignore ファイル設定済み
  • プロジェクトフォルダ直下の Node-RED 設定データ集約フォルダ作成済み
  • 設定ファイルは Node-RED 設定データ集約フォルダ内の setting.js を作成済み
  • /api1 で簡単なレスポンスを返す HTTP API なフローを作成済み
  • Heroku Procfile ファイルの設定を作成済み
  • setting.js の httpAdminRoot 設定を /admin に設定済み
  • setting.js の adminAuth を設定してログインを Heroku の環境変数で設定している NODERED_LOGIN_ID と NODERED_LOGIN_PASSWORD でログインできるように設定済み
  • 手元の Node-RED で追加インストールが反映されるように Heroku Procfile + package.json 調整済み
  • setting.js の httpStatic: './node-red-static/', に設定して node-red-static をフロントエンドまわりのファイルを置いて公開できる場所を設定済み
  • Node-RED 設定データ集約フォルダを node-red_dir フォルダにしていたが、リネームして .node-red でやってみることにした

あたりを対応しています。結構ありますね。けれど、おおむねリストアップできたはず。

2021/10/04 現在の情報です。今後はこのリポジトリに関する更新は GitHub 上でもお知らせしていく予定です。

まずは GitHub から手元にクローン

2021/10/04 現在の情報で進めます。

Heroku CLI はインストールされ Heroku CLI は Heroku アカウントでログインして使える状態になっている前提で進めます。

ます、さきほどの

1ft-seabass/heroku-node-red-local-based-starter

から、自分の作業するフォルダに Git でクローンします。

もちろん、Web サイトからダウンロードして持ってこれるんですが、クローンがおススメです。クローンして持ってくることで Git の初期化が済んでいる状態なので、今後の Heroku へのアプリ反映の作業がしやすくなります。

フォルダ名の変更

image

heroku-node-red-local-based-starter のまま、作業することは少ないと思うので、

image

フォルダ名を自分の作業用に分かりやすい名前にリネームします。今回は heroku-node-red-test にします。

Visual Studio Code の起動

image

heroku-node-red-test フォルダを対象に Visual Studio Code を起動します。

npm run init の実行

もう、プロジェクトフォルダ直下の Node-RED 設定データ集約フォルダや setting.js を作成済みなので、そのあたりのコマンドではなく、

    "init": "npm i && npm run init:subdir-install",
    "init:subdir-install": "npm --prefix ./.node-red install ./.node-red"

このように、今後、なにかしら .node-red フォルダ内でノードの追加インストールがされたときや、直下の npm i node-red の対応をするような init コマンドにしてます。

これ手元で動くようになるはずです。

ローカルで Node-RED 実行

起動できるか、ためしてみましょう。

npm run node-red

ターミナルでコマンドを打って起動します。

image

こんなログがターミナルに出て起動します。

image

無事、初動のフロー入りの Node-RED が http://127.0.0.1:18801/admin/ で起動します。

変更内容をインデックスに追加してコミット対象にする

.gitinnore で node_modules が除外されていることを念入りに確認しましょう。

git add .

で、変更内容をインデックスに追加してコミット対象にします。

git commit -m "init"

コミット対象にしたらコミットします。

もちろん、Visual Studio Code の場合は SOURCE CONTROL のほうで GUI からインデックス追加とコミット対応してもOKです。

Heroku にアプリ作成

プロジェクトフォルダ直下で Herolu CLI のコマンドを実行して Heroku にアプリ作成します。

heroku create <サーバー名>

<サーバー名> は自分の作りたい名前にしましょう。

Heroku に反映

git push heroku main

で Heroku 側に push してアプリに反映します。

image

うまくいけば、このようにプッシュされアプリが反映されます。

Heroku で確認してみる

https://<今回のHerokuアドレス>/ でアクセスしてみましょう。

image

ごくごくシンプルな Hello Node-RED in Heroku. の文字が表示されているので httpStatic: './node-red-static/', で、フロントエンドまわりのファイルを置いて公開できる場所がちゃんと動いています。

https://<今回のHerokuアドレス>/admin でアクセスしてみましょう。

image

パスワードログインが Heroku では無事聞いていることが確認できます。

Heroku の環境変数を設定してログインの ID とパスワードを設定

設定と環境設定 | Heroku Dev Center

を、参考に Heroku Dashboard で、

image

アプリの Settings タブから、

image

環境変数の値でログイン ID とログインパスワード を用意します。

  • NODERED_LOGIN_ID
    • ログイン ID
  • NODERED_LOGIN_PASSWORD
    • ログインパスワード

と設定します。ID と パスワードが分からなくなっても Heroku の管理画面に戻って見れるのは良いですね！

再度 /admin から入ってみる

再度 https://<今回のHerokuアドレス>/admin でアクセスしてみましょう。

image

先ほど設定した ID と パスワードを元にログインしてみましょう。

image

無事ログインできたら、Heroku での環境構築は完了です！

追加でインストールしたノードがローカルから Heroku に反映されるかやってみる

image

ローカルで、node-red-contrib-os をインストールします。

image

無事追加されました。

image

ためしに、node-red-contrib-os ノードで OS情報を出力するだけのフローを作っておきます。うまくインストールされれば、無事動くはずのものです。

ということで、デプロイしたら、コミットして Heroku に反映します。

Heroku に更新できたら、アクセスしてみると、再起動なので ID とパスワードが聞かれると思います。前のフローをブラウザで開いているとフローの差分を更新しますか？と聞かれるので更新します。うっかり更新できなくても、ブラウザをリロードすればOKです。差分更新慣れないうちは、リロードのほうがいいかもしれないです。

image

ということで、無事、追加ノードとして node-red-contrib-os ノードが加わっていて、かつ、inject ノードを動かしてみると debug ノードで、Heroku が動いている OS 情報がちゃんと取得出来て動いていることを確認できました！

更新するときのおおまかな作業フロー

この仕組みは、ローカルで作業データを元に Heroku で動かす Node-RED なので、Heroku の仕組みを更新する場合は以下のように対応していきます。

  • ローカルで npm run node-redでローカルの Node-RED 起動
  • http://127.0.0.1:18801/admin/ にブラウザからアクセスして作業。
  • ローカルで Node-RED のフローをつくって、Heroku に反映していいなってところで落ち着かす。
  • ローカルで node-red-static フォルダでフロントエンドな作業をして、Heroku に反映していいなってところで落ち着かす。
  • ローカルで Node-RED で追加したいノードがあればインストールして作業をつづけ、Heroku に反映していいなってところで落ち着かす。
  • ローカルで変更内容をインデックスに追加してコミット対象にする
    • いわゆる git add と git commit
  • git push heroku main で Heroku に反映
  • Heroku に反映されたら動作確認
    • https://<今回のHerokuアドレス>/ でフロントエンドまわりの確認
    • https://<今回のHerokuアドレス>/admin/で Node-RED のフローが今回の反映ぶん動いているか確認
  • Heroku でのみおかしい Node-RED の挙動があれば Heroku 側のフローに debug ノード入れたりデバッグする
    • この変更は、再度ローカルから新しい更新をすると以前のものに戻るので注意
    • なにかしらフローで解決したら、いったんローカルに戻ってローカルの Node-RED のフローに同じ変更をして、次回反映
  • 以降は、作業をローカルに戻って繰り返す

あたりが、おおまかな作業フローになるかなと思います。

こうやって、GitHub でまとめられると自分のナレッジが固められて、ある程度出来上がった状態から先に進められるのがいいですね。

自分で使ってみながらブラッシュアップしていきます。今後はこのリポジトリに関する更新は GitHub 上でもお知らせしていく予定です。

、
seigo