Node-REDのGit機能を学ぶ(6) アプリケーションをGitHub Codespaces上で起動

　本記事は「Node-REDのGit機能を学ぶハンズオン(第3回)」で紹介した内容です。

https://youtu.be/faU7qmTtFgk?t=126

　本記事では、Node-REDのGit機能を用いてGitHubにアップロードした画像認識アプリのフローを、単体のアプリとしてクラウド上で実行する方法を紹介します。ここではクラウド環境としてGitHubから手軽に利用できるGitHub Codespacesを使用します。

# Node-REDで開発したアプリの問題点
　Node-REDダッシュボードを用いる際は、次のように1つのNode-RED環境内に「フローエディタ」と「ダッシュボード」の2つのアクセス先が存在することになります。

<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/99639827-9e7d-1cc1-7b96-f2f3fad78da9.png">

　プロトタイプの段階では、開発者がフローにバグや改善点を見つけた場合、すぐに修正できるため、単一環境のほうが便利なこともあるでしょう。しかし、開発したアプリをクラウド上の本番環境にリリースした後は、フローを変更する必要はありません。フローの変更を防ぐために、ユーザ認証を有効にしたり、読み取り専用にしたりすることで、フローエディタへアクセスできないようにしている本番環境をよく見かけます。理想的には、次のようにフローエディタを無効にして、ダッシュボードだけを提供するのがベストでしょう。

<img width="250px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/9b3565b6-0b4e-c7a8-2571-e460ddde1cf5.png">

　これを実現するために、Node-REDのアプリを単体で動作するように修正する方法を説明します。

# GitHubのリポジトリをインポート
　この記事から始められる様に「画像認識アプリ」のフローを[アップロード済みのGitHubリポジトリ](https://github.com/kazuhitoyokoi/image-recognition-app4513.git)をコピーして使います。まず次のURLから「GitHubリポジトリ」の「インポートページ」を開きます。

https://github.com/new/import

　「The URL for your source repository」の入力欄に、次の画像認識アプリ」のフローを共有したGitHubリポジトリのURLを入力します。

```
https://github.com/kazuhitoyokoi/image-recognition-app4513.git
```

![Screenshot 2024-04-26 at 12.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/f5bbe503-3337-e07b-b9f0-c610d04780ee.png)

　本リポジトリはパブリックリポジトリであるため、ユーザ名とアクセストークンの欄の入力は不要です。

「Repository name」の欄には、「インポート先のリポジトリ名」を入力します。ここでは「image-recognition-app4513deploy」と入力しましたが、別の名前をリポジトリ名として使っても問題ありません。
　最後に、リポジトリの公開設定として「Private」を選択します。Node-REDのフローには認証情報が含まれることがあるため、Git機能ではプライベートリポジトリが推奨されるためです。

　すべての項目を入力したら、「Begin import」ボタンをクリック。しばらく経つと元のリポジトリが自身のGitHubアカウント内の新しいリポジトリ「image-recognition-app4513deploy」にコピーされます。

![Screenshot 2024-04-26 at 12.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/17e3931b-594f-2342-4bd1-b7d0a64b6bf8.png)

# 単体で動作するアプリに修正
　次に、単体のアプリ化をするため、用意したリポジトリにあるpackage.jsonファイルを編集します。
 
![Screenshot 2024-04-26 at 12.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/99dc8871-d4c9-20f1-5dc1-92a3804773c7.png)

　本ファイルは「アプリ名」「概要」「バージョン番号」といった、Node.jsアプリの情報を定義するために使われるファイルです。このファイルをクリックしましょう。

　するとpackage.jsonファイルの内容が表示されます。

![Screenshot 2024-04-26 at 12.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/9a555317-6c9f-8b84-e780-1b357fc4d92f.png)

　右上にある鉛筆マークをクリックして、ブラウザ上に本ファイルを編集するためのテキストエディタを表示します。

![Screenshot 2024-04-26 at 12.36.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/38dad979-1a15-d884-6cde-13c2b23bb308.png)

　最初に、package.jsonファイルの「dependencies」セクションの中に「"node-red": "3.0.2",」を追加します（行末にカンマが必要な点に注意）。

```
        "node-red": "3.0.2",
```

 ![Screenshot 2024-04-26 at 12.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/88ccd0a5-fc39-6792-49cd-4116caab1d94.png)
 
 「dependencies」セクションは、フローで使用する「ノード」や「モジュール」を記載する部分です。この行に、フローを実行するバージョンの「node-red」モジュールを記載することで、アプリは内部で「Node-RED実行ランタイム」を利用できるようになります。

　次に、package.jsonファイルの「scripts」セクションにアプリの起動設定を定義します。次の定義により「npm start」コマンドでアプリを実行できるようになります。

```
    "scripts": {
        "start": "node-red -D httpAdminRoot=false"
    },
```

![Screenshot 2024-04-26 at 12.39.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/85cb15b8-ba0d-d7bc-0ebf-8963e834cf0d.png)

　記載したnode-redコマンドには、「-Dオプション」が指定されています。「-Dオプション」は、Node-REDの設定ファイルである「settings.js」内の設定を上書きするオプションです。「httpAdminRoot」の設定は、フローエディタのエンドポイントを提供するかどうかを指定するために使われます。本番環境でフローエディタへアクセスできないようにするため、この設定は「false」を指定しています。

　package.jsonファイルを編集したあと、右上にある「Commit changes...」のボタンをクリックします。
 
![Screenshot 2024-04-26 at 12.40.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/800d3124-40ca-4fbb-f10d-e7bd903ade95.png)

　コミットメッセージを入力後、「Commit changes」ボタンをクリックして、変更をGitHubリポジトリに反映します。

　GitHub Codespacesへアクセスしたときにアプリケーションを自動的に実行するためには、GitHubリポジトリ内の`.devcontainer`ディレクトリの下に`devcontainer.json`ファイルを追加する必要があります。まず、リポジトリページのプラスボタンをクリックし、「Create new file」を選択します。
 
![Screenshot 2024-04-26 at 12.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/c787db4e-1a26-762a-8e89-db8cda74c771.png)

　新規ファイルのための次のテキストエディタを開いた後、ブラウザに2つの項目を入力する必要があります。

![Screenshot 2024-04-26 at 12.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/802049f9-82d3-9469-c9cd-12af8a91d670.png)

まず、上部の赤い四角で囲まれたパス領域に、以下のファイルパスを追加します。

```
.devcontainer/devcontainer.json
```

そして、ファイルの内容として以下のJSONデータを追加します。

```
{
  "postAttachCommand": {
    "server": "npm start"
  }
}
```

　これはGitHub Codespases環境でnpm startコマンドを実行するための設定です。

　最後に、右上の「Commit changes...」ボタンをクリックして、次のダイアログを表示します。
 
![Screenshot 2024-04-26 at 12.42.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/2fd190da-da46-61ec-c647-aa713c87b918.png)

　先ほどと同様に、コミットメッセージを入力して変更を反映させます。すると、`.devcontainer`フォルダの下に`devcontainer.json`ファイルが作成されます。

![Screenshot 2024-04-26 at 12.44.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/5c5bd28f-ef88-94bd-2c26-cb643496d102.png)

　次の操作のため、GitHubリポジトリのトップページに移りましょう。

# GitHub Codespaces上でアプリを起動
　それでは、さっそくGitHub Codespaces上で「画像認識アプリ」を起動してみます。

　GitHub Codespacesを開くには、GitHubリポジトリのページに戻り、「Code」ボタンをクリックしたあと、「Codespaces」タブ内のメニュー内の「Create codespace on main」ボタンをクリックします。

![Screenshot 2024-04-26 at 12.44.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/4124fa5a-fa96-3b11-9bc0-0648ceae5e1e.png)

　Codespaces環境を起動させると、自動的に依存ノードモジュールがインストールされ、約2分後に次のようなNode-REDアプリの起動を知らせるダイアログが表示されます。もし、本ダイアログが自動的に表示されない場合は、ターミナルエリアで「npm start」コマンドを入力して、アプリを手動で起動してください。

![Screenshot 2024-04-26 at 12.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/e82af0d6-1b69-a393-ca33-4d597f76baf7.png)

　ダイアログ内の「ブラウザで開く」ボタンをクリックすると、次の様な画面となりNode-REDフローエディタが表示されないことが分かります。

![Screenshot 2024-04-26 at 12.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/0ed2ffb5-27ef-13d0-edfb-09cab9145223.png)

URLの末尾に「/dashboard」を追加するとダッシュボード画面が表示されます。

![Screenshot 2024-04-26 at 12.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/a42ecf50-6d84-edb5-1444-4e43b38697a0.png)

　人物が写っている写真をアップロードすると、正常に画像認識が行なわれ、下に画像内にある物体名として「person」が表示されました。

![Screenshot 2024-04-26 at 12.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/c0f88448-094b-0cca-5a04-59c66c278d09.png)

　Node-REDで開発したアプリを単体のアプリに修正する手順について紹介しました。本番環境でアプリを運用する際は、ぜひこの方法を用いてみてください。