本記事は「Node-REDのGit機能を学ぶハンズオン(第3回)」で紹介した内容です。
本記事では、Node-REDのGit機能を用いてGitHubにアップロードした画像認識アプリのフローを、単体のアプリとしてクラウド上で実行する方法を紹介します。ここではクラウド環境としてGitHubから手軽に利用できるGitHub Codespacesを使用します。
Node-REDで開発したアプリの問題点
Node-REDダッシュボードを用いる際は、次のように1つのNode-RED環境内に「フローエディタ」と「ダッシュボード」の2つのアクセス先が存在することになります。
プロトタイプの段階では、開発者がフローにバグや改善点を見つけた場合、すぐに修正できるため、単一環境のほうが便利なこともあるでしょう。しかし、開発したアプリをクラウド上の本番環境にリリースした後は、フローを変更する必要はありません。フローの変更を防ぐために、ユーザ認証を有効にしたり、読み取り専用にしたりすることで、フローエディタへアクセスできないようにしている本番環境をよく見かけます。理想的には、次のようにフローエディタを無効にして、ダッシュボードだけを提供するのがベストでしょう。
これを実現するために、Node-REDのアプリを単体で動作するように修正する方法を説明します。
GitHubのリポジトリをインポート
この記事から始められる様に「画像認識アプリ」のフローをアップロード済みのGitHubリポジトリをコピーして使います。まず次のURLから「GitHubリポジトリ」の「インポートページ」を開きます。
「The URL for your source repository」の入力欄に、次の画像認識アプリ」のフローを共有したGitHubリポジトリのURLを入力します。
https://github.com/kazuhitoyokoi/image-recognition-app4513.git
本リポジトリはパブリックリポジトリであるため、ユーザ名とアクセストークンの欄の入力は不要です。
「Repository name」の欄には、「インポート先のリポジトリ名」を入力します。ここでは「image-recognition-app4513deploy」と入力しましたが、別の名前をリポジトリ名として使っても問題ありません。
最後に、リポジトリの公開設定として「Private」を選択します。Node-REDのフローには認証情報が含まれることがあるため、Git機能ではプライベートリポジトリが推奨されるためです。
すべての項目を入力したら、「Begin import」ボタンをクリック。しばらく経つと元のリポジトリが自身のGitHubアカウント内の新しいリポジトリ「image-recognition-app4513deploy」にコピーされます。
単体で動作するアプリに修正
次に、単体のアプリ化をするため、用意したリポジトリにあるpackage.jsonファイルを編集します。
本ファイルは「アプリ名」「概要」「バージョン番号」といった、Node.jsアプリの情報を定義するために使われるファイルです。このファイルをクリックしましょう。
するとpackage.jsonファイルの内容が表示されます。
右上にある鉛筆マークをクリックして、ブラウザ上に本ファイルを編集するためのテキストエディタを表示します。
最初に、package.jsonファイルの「dependencies」セクションの中に「"node-red": "3.0.2",」を追加します（行末にカンマが必要な点に注意）。
"node-red": "3.0.2",
「dependencies」セクションは、フローで使用する「ノード」や「モジュール」を記載する部分です。この行に、フローを実行するバージョンの「node-red」モジュールを記載することで、アプリは内部で「Node-RED実行ランタイム」を利用できるようになります。
次に、package.jsonファイルの「scripts」セクションにアプリの起動設定を定義します。次の定義により「npm start」コマンドでアプリを実行できるようになります。
"scripts": {
"start": "node-red -D httpAdminRoot=false"
},
記載したnode-redコマンドには、「-Dオプション」が指定されています。「-Dオプション」は、Node-REDの設定ファイルである「settings.js」内の設定を上書きするオプションです。「httpAdminRoot」の設定は、フローエディタのエンドポイントを提供するかどうかを指定するために使われます。本番環境でフローエディタへアクセスできないようにするため、この設定は「false」を指定しています。
package.jsonファイルを編集したあと、右上にある「Commit changes...」のボタンをクリックします。
コミットメッセージを入力後、「Commit changes」ボタンをクリックして、変更をGitHubリポジトリに反映します。
GitHub Codespacesへアクセスしたときにアプリケーションを自動的に実行するためには、GitHubリポジトリ内の.devcontainerディレクトリの下にdevcontainer.jsonファイルを追加する必要があります。まず、リポジトリページのプラスボタンをクリックし、「Create new file」を選択します。
新規ファイルのための次のテキストエディタを開いた後、ブラウザに2つの項目を入力する必要があります。
まず、上部の赤い四角で囲まれたパス領域に、以下のファイルパスを追加します。
.devcontainer/devcontainer.json
そして、ファイルの内容として以下のJSONデータを追加します。
{
"postAttachCommand": {
"server": "npm start"
}
}
これはGitHub Codespases環境でnpm startコマンドを実行するための設定です。
最後に、右上の「Commit changes...」ボタンをクリックして、次のダイアログを表示します。
先ほどと同様に、コミットメッセージを入力して変更を反映させます。すると、.devcontainerフォルダの下にdevcontainer.jsonファイルが作成されます。
次の操作のため、GitHubリポジトリのトップページに移りましょう。
GitHub Codespaces上でアプリを起動
それでは、さっそくGitHub Codespaces上で「画像認識アプリ」を起動してみます。
GitHub Codespacesを開くには、GitHubリポジトリのページに戻り、「Code」ボタンをクリックしたあと、「Codespaces」タブ内のメニュー内の「Create codespace on main」ボタンをクリックします。
Codespaces環境を起動させると、自動的に依存ノードモジュールがインストールされ、約2分後に次のようなNode-REDアプリの起動を知らせるダイアログが表示されます。もし、本ダイアログが自動的に表示されない場合は、ターミナルエリアで「npm start」コマンドを入力して、アプリを手動で起動してください。
ダイアログ内の「ブラウザで開く」ボタンをクリックすると、次の様な画面となりNode-REDフローエディタが表示されないことが分かります。
URLの末尾に「/dashboard」を追加するとダッシュボード画面が表示されます。
人物が写っている写真をアップロードすると、正常に画像認識が行なわれ、下に画像内にある物体名として「person」が表示されました。
Node-REDで開発したアプリを単体のアプリに修正する手順について紹介しました。本番環境でアプリを運用する際は、ぜひこの方法を用いてみてください。