Node-RED で git 使ってる？

Node-RED の Projects の機能で目についたものをつらつら書いてみる

- Node-RED Projects の公式説明ページ
    - [Node-RED : Projects](https://nodered.org/docs/user-guide/projects/)

## １．まずは、Projects を有効にして、Node-RED の起動

- 下記のやり方は少し好みが入っているかも。
- 大事な部分は、 `settings.js` の `projects: {enabled: true}` を `true` に編集していところのみ。

```
echo '{}' > package.json
npm i -D node-red
ln -s node_modules/node-red/red.js red
```

- ベースとなる `settings.js` を編集する。
- 後から、ユーザディレクトリ内に作成された `settings.js` を編集しても良い。

```
vim node_modules/node-red/settings.js
```

- `settings.js` の編集部分とその前後のみを抜粋。

```diff
    // Customising the editor
    editorTheme: {
        projects: {
            // To enable the Projects feature, set this value to true
-           enabled: false
+           enabled: true
        }
    },
```

- Node-RED 起動。

```
node red -u .
```

- http://localhost:1880 へアクセスすると、下記画面が表示される。
- とりあえず、 `プロジェクトの作成` ボタンを押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/73fcf921-22df-5d63-25fa-5e3091933654.png)

- git の `ユーザ名` 、 `Email` を入力する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/af9dd9ae-f88f-af56-6e00-d0205fb1776c.png)

- `プロジェクト名` を入力する。
- 今回の例では、分かりやすくするため github のリポジトリ名にする名称を入力する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/3c30208b-9022-6c68-36c0-1f4e72699fcc.png)

- フローファイル名をデフォルトで `flow.json` が入力されているので、今回は、そのまま使用する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/246c460a-d20b-f04f-a7ef-57e840c4cdc2.png)

- 暗号化を有効にするため、鍵を入力する。暗号化用の鍵はおそらくなんでもいい。
- 公式サイトにも説明されているが、認証情報ファイルもパブリックなリポジトリにプッシュするなら、暗号化は有効であるべき。
- Projects とは関係ないけど、複数人、複数箇所などで、フローを作成するときには、その環境毎に認証情報ファイルの内容を適用したいことがある。その場合は、認証情報じゃなくて、環境変数とかにしたいんだよな。ノードの中には、環境変数に対応したものもあって、それ見るとサイコーって感じる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/74d3e680-cf4d-6a5b-f575-5ba8be41d8ce.png)

- 文章なんか読まずに `完了` を押す！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b4b8425c-8715-ac20-7e33-d4cdf05626d8.png)

- 上記の通り Node-RED を起動していると、カレントディレクトリがユーザディレクトリになっていて、 `projects` ディレクトリができているはずである。
- projects ディレクトリ配下の構成は以下の通り。 
- README、フローファイル、認証情報ファイル、package.json が作成されている。

```
projects/
└── try-node-red-projects
    ├── README.md
    ├── flow.json
    ├── flow_cred.json
    └── package.json
```

## ２．フローを作成し、コミットしてみる

- 適当に、以下のようなフローを作成してみる。
- 下記では、 http://localhost:1880/page にアクセスすると template に基づいたページが表示される。
- function や template ノードの中は適当に。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/e07ae1dd-a0d6-8146-ae3b-98c8c3928eee.png)

- フローを作成し、デプロイを行った後、サイドバー？の git タブ？ へアクセスしてみると、ローカルの変更に、 `flow.json` が入っている。
- `git status` みたいなものか。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/e0e164ab-2935-6da9-7df9-21cf7f754d66.png)

- コミット履歴を覗くと、プロジェクトを作成した時のものが確認できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/8965868d-3297-b67e-30dd-bbf36ebb0b08.png)

- 変更をコミット対象にして、そのままコミットしてみる。
- ローカルの変更欄で、 `+ 全て` で対象に追加する。`+` で個別に追加しても良い。
- `git add .` や `git add flow.json` か。
- 上記操作後、コミット対象に flow.json が入る。
- そうしたら、 `コミット` を押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/79679cd4-189b-8ee0-c61f-792eba711067.png)

- テキストエリアにコミットメッセージを入力して `コミット` 押す。
- `git commit -m 'add page'` か。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/2bbaa139-301e-17ee-e27a-b405a3205a8a.png)

- ローカルの変更は、空になる。そりゃそうだ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/7be03950-9532-a219-7bb2-86dfea409fa8.png)

- コミット履歴が増える。そりゃそうだ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b4f0222f-b5fb-8571-1a92-df8315d54783.png)

- コミット履歴のリストからいずれかをクリックすると、詳細がぴょこっと生えてくる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/5d3abfef-c383-dd0e-30f7-75027700b86c.png)

## ３．github へ push する

- プロジェクトの設定を開く。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/1a5a8468-1f28-2581-ab4a-a91b41fe94de.png)

- `プロジェクト` では、プロジェクト名や、READMEの内容が確認/編集できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/06467639-bbe4-c03b-feae-db6dc152b9e7.png)

- README の編集はこんな感じ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/8e4c9a40-b012-8ff2-0ede-70087b5e47d5.png)

- `依存関係` では、インストールしたノード一覧が確認/更新できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/c1583e81-8050-d182-24dd-f89a6f42952f.png)

- github で、空のリモートリポジトリを作成する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/a593adbd-7dd5-2a4e-3771-f7db60f7bf50.png)

- `設定` では、フローファイル名や、ローカルブランチ、リモートブランチの設定が確認/編集/追加できる。
- `リモートを追加` を押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/11743f88-1a63-2133-30e0-488c9eb44047.png)

- 今回は、 `リモート名` はデフォルトで入力されている `origin` のまま、URL は、 `https://github.com/user-name/repository-name` を入力する。末尾の `.git` はあっても無くても良さげ？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/9c9d20a2-60e2-a3f1-d552-27aca12330d6.png)

- サイドバーに戻って、リモートの master ブランチを作成する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/77cad054-5c15-8e59-269c-0489b4e8cadc.png)

- `↑プッシュ` だ！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/ea5decde-19e7-476f-64be-941c77f18ff9.png)

- github の認証が要求される。
- `リトライ` 押すと、（自分のPC環境では、一瞬、間があって、）完了する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/61b2c719-022b-499e-9b3f-3fb533d20a70.png)

- github を再び訪れると。
- プッシュされてるーーーーー。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/d845b1ad-c781-dd84-dc36-f0da3b927557.png)


## ４．ブランチの作成

- 先程は master ブランチだったけど、ここで、ブランチの作成もできる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/dc459a62-96e4-2e82-898b-0be77c1fe056.png)

- 下記の例では、 `hogeb` という存在していないブランチ名を入力している。
- `ブランチの作成` と出てくるので、迷わずクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/5e2444da-b610-d578-abf7-10f9f622d35f.png)

- できた〜！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/8e135ed3-5611-c2e3-e746-031c3493603b.png)

- `hogeb` ブランチに `有効` が表示されている状態のまま、フローに変更を加えて、コミット、プッシュを行っておく。
- **ちなみに、 `function` ノードのソースコードの diff も見れる！！！！！！！！！**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b543a0b8-4630-88df-aae2-fc9bf703a502.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/f0276d61-c9a6-cb07-ff18-6f55e7d45c60.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/31cec485-b8c2-b41e-cdfd-feed0457aa65.png)

## ５．github でプルリクとマージする

- おもむろに、プルリク作成する。
 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/a2896654-4f30-b8d3-9b4b-07962740208d.png)

- 勢いで、マージする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/1c3dbb93-b156-b6d0-0b7e-b88ce8f7ecfa.png)

- Node-RED に戻って、下記ボタンを押す。（最新の状態になっていなければ。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/908d6a9d-afa3-b334-3567-d2ab92c5de14.png)

- コミット履歴に `↑0 ↓3` のような表示が確認できるはず。
- `↓プル` だ！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/2f22f8b3-e99a-8d2f-0f20-d22f2e9be0c5.png)

- こんな選択迫られるけど、`無視` で。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/7b265124-f940-36d6-ca1e-d2c19ec3ed60.png)

## ６．プロジェクトの取り込み

- 下記画面で、 `プロジェクトのクローン` を押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/d3f4cc96-bfff-da8f-6f2c-149c09704c41.png)

- 自身の情報を入力する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/ebc68099-2a7f-c750-6063-f234267833a8.png)

- はじめに、 `GitリポジトリのURL` に、clone する URL を入力すれば、 `プロジェクト名` は自動で入力される。
- あれ？ ここの `ユーザ名` と `パスワード` ってなんだっけ？ private リポジトリの場合？
- `認証情報の暗号化キー` は、Node-RED で、プロジェクトを作成した時に入力している鍵を入力する。
- `プロジェクトをクローン` ！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/4a4d8a9e-4709-4141-2dcd-2b98e54c0df2.png)

- 無事に取り込まれているよう。
- （認証情報ありのノードを含めておけばよかった。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/7a7095c8-a49d-d2a7-9b72-ff6f3a67940c.png)


- 上記以外の機能は、確認できていない。ローカルの他の git クライアントか、github などのリモートリポジトリで操作して、push なり pull なりする必要がありそう。
- 機能紹介漏れてたら、教えて。

## ７．所感

- なんといっても、function も含めた diff が良いな。それに尽きる。
- Node-RED から離れず、git の基本操作が GUI できるのはやっぱ便利。
- 複数人でのフロー作成も改善要素多数。（複数人で作成なんてしない？）
- ま、使っていきましょー。