45
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Node-REDAdvent Calendar 2018

Day 14

Node-RED で git 使ってる?

Last updated at Posted at 2018-12-13

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

1.まずは、Projects を有効にして、Node-RED の起動

  • 下記のやり方は少し好みが入っているかも。
  • 大事な部分は、 settings.jsprojects: {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 の編集部分とその前後のみを抜粋。
    // 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

  • git の ユーザ名Email を入力する。

image.png

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

image.png

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

image.png

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

image.png

  • 文章なんか読まずに 完了 を押す!

image.png

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

2.フローを作成し、コミットしてみる

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

3.github へ push する

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

  • ↑プッシュ だ!

image.png

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

image.png

  • github を再び訪れると。
  • プッシュされてるーーーーー。
    image.png

4.ブランチの作成

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

image.png

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

image.png

  • できた〜!

image.png

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

image.png

image.png

image.png

5.github でプルリクとマージする

  • おもむろに、プルリク作成する。

image.png

  • 勢いで、マージする。

image.png

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

image.png

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

image.png

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

image.png

6.プロジェクトの取り込み

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

image.png

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

image.png

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

image.png

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

image.png

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

7.所感

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?