ファイアウォールの外側から Node-RED のフローエディタにアクセスする

はじめに

Node-REDの場合、開発環境がそのままWebブラウザでのアクセスになっているのはご存じの通りです。Node-REDの開発画面つまりフローエディタは、安全なネットワーク例えば社内のネットワーク等からアクセスするものであり、不特定多数からアクセスできるような環境では利用しないのが普通でしょう。しかし時には、インターネットから社内のNode-REDのフローエディタを利用したくなるような場面もあります。

以下の図を見てください。(A)と(B)の間、並びに(B)と(C)の間は自由に通信できますが、(C)から(A)はファイアウォールがあって自由な相互通信はできない状態です。

ここでインターネット側から(A)のNode-REDのフローエディタにアクセスできるように、(B)のWebサーバーにリバースプロキシを設定してみます。

Node-RED の設定

今回の構成で Node-RED に特別な設定変更を行う必要は無いのですが、インターネット側からアクセスするURLとそろえるため Node-RED のフローエディタにアクセスするURLを変更します。Node-RED の setting.js で httpAdminRoot を次のように設定しました。

    httpAdminRoot: '/red'; 

これによって
　　　http://nodered.example.jp:1880/
であったフローエディタのURLが、
　　　http://nodered.example.jp:1880/red
に変わります。

Apache でリバースプロキシを設定する

まずは www.example.jp で動いている Webサーバーのソフトウェアが Apache であるとして、Apache で Node-RED 用のリバースプロキシを設定してみます。通常 Apache のデフォルトではリバースプロキシは有効になっていませんから、それを有効にします。そのためには mod_proxy と mod_proxy_http を読み込む設定を加えます。

LoadModule proxy_module libexec/apache24/mod_proxy.so
LoadModule proxy_http_module libexec/apache24/mod_proxy_http.so

あとは、www.example.jp のコンテンツの設定部に、次の 1行を加えます。

ProxyPass  "/red"   "http://nodered.example.jp:1880/red"

これで Apache を再起動します。

Apache の再起動後に、http://www.example.jp/red にアクセスしましょう。無事にフローエディタにアクセスできますね。

めでたしめでたし！と思ったのも束の間、少しするとこんなダイアログが出現します。

何が起きているのか、Apache のアクセスログで確認します。

203.0.113.100 - - [03/Dec/2018:17:12:12 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:13 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:14 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:15 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:16 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:18 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"
203.0.113.100 - - [03/Dec/2018:17:12:20 +0900] "GET /red/comms HTTP/1.1" 404 148 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0"

これを見ると"/red/comms" にアクセスできていないということになりますが、"/red" を ProxyPass で設定しているので、"/red/comms" であれば リバースプロキシが有効になるはずです。

それなのに何故エラーになるのか？お気づきの方も居ると思いますが、どうやら Node-RED のフローエディタでは WebSocket を使っているようで、Apacheのリバースプロキシの場合前述の設定だけでは WebSocket が通りません。WebSocket を通すためには mod_proxy_wstunnel を有効にする必要があり、設定ファイルで、mod_proxy_wstunnel の設定をさらに1行追加します。

LoadModule proxy_module libexec/apache24/mod_proxy.so
LoadModule proxy_http_module libexec/apache24/mod_proxy_http.so
LoadModule proxy_wstunnel_module libexec/apache24/mod_proxy_wstunnel.so

コンテンツの設定部分にもWebSocketのアクセスを追加します。

ProxyPass  "/red/comms"  "ws://nodered.example.jp:1880/red/comms"
ProxyPass  "/red"        "http://nodered.example.jp:1880/red"

"/red/comms" の行を先に記述する必要があることに注意してください。

改めて Apache を再起動し http://www.example.jp/red にアクセスすると、無事にフローエディタにアクセスできます。

Nginx でリバースプロキシを設定する

こんどは Webサーバーのソフトウェアに Nginx を使っている場合です。Nginxでは標準でプロキシの機能が有効で WebSocketのための機能も標準で用意されています。具体的にはサーバーの設定部に次を追加します。

location /red {
      proxy_pass  http://nodered.example.jp:1880/red;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
}

Nginxを再起動すれば http://www.example.jp/red でフローエディタにアクセスできます。

セキュリティに注意

ここに書いた記述だけではインターネット側から誰もが自由に http://www.exapmle.jp/red にアクセスできてしまうため、セキュリティ面では大変危険なものとなります。最低でもフローエディタにパスワードをつける等、アクセス制限は必須です。このような設定は十分注意してご利用ください。

ちょうどNode-REDのフローエディタにパスワードをつける記事が公開されているので、フローエディタにパスワードをつける方法等は以下の記事の「セキュリティ設定」の項を参照してください。

• Raspberry PiにおけるNode-REDの活用について(2018年末版)