IBM Cloud で Node-RED セットアップ (2021年4月)

- 2021/04/10 手順が少し変わっていたので、更新しました。
- 2021/04/14 タイポご指摘いただいたので修正更新しました。
- 2021/09/01 IBM Cloud lite plan で、 Cloud Foundry が選択できない状態になっています。IBM に問い合わせ中です。


## 初めに

このドキュメントは IBM Cloud に、Node-RED の実行環境を準備するための手順です。<br>
IBM Lite アカウントの範囲で利用できます。 <br>

_※ここに記載されている手順は、２０２１年４月のものです。_

## 開発・実行環境準備
### Node-RED 用リソース追加
#### IBM Cloud にログイン

ログイン画面でユーザパスワードを入力すると「ダッシュボード」が表示されます。<br>
「リソースの追加」ボタンをクリックし、カタログ画面を表示します。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/010.png)


#### Node-RED App の検索

[カタログを検索...] と表示されているエリアに `node-red` と入力します。すると、`Node-RED App` の候補が表示されるのでクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/030.png)

#### アプリの作成

Node-RED アプリの作成画面が表示されます。内容を確認したうえで、画面上部「作成」タブをクリックします
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/040.png)

Node-RED アプリを設定します。**アプリ名** の欄には任意のアプリケーション名を入力します。**サービス詳細** の **リージョン** は `ダラス`を選択します。設定が終ったら「作成」ボタンをクリックします。

![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/060.png)

アプリ作成が完了するまで１分ほど待ちます
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/070.png)

### Node-RED デプロイ

#### アプリのデプロイ

アプリの作成が完了すると、「アプリの詳細」画面に切り替わります。**デプロイメント自動化** カードの「アプリのデプロイ」ボタンがクリックできるようになるまで、２～３分ほど待ちます
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/080.png)

「アプリのデプロイ」ボタンが有効になったら、クリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/090.png)

#### Cloud Foundry 選択
**デプロイメント・ターゲット** では、`Cloud Foundry` を選択します。

![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/095.png)

(※ほかのデプロイメント・ターゲットは Lite アカウント では利用できません。)

#### IBM Cloud API 鍵設定

続いて  `IBM Cloud API 鍵` を設定します。入力欄の右にある「新規＋」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/100.png)

＜API 鍵作成のダイアログ＞が表示されるので、`OK` ボタンをクリックし API 鍵を作成します。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/110.png)

＜デプロイメント自動化画面＞に戻るので、画面最下部の「次へ」ボタンが有効になるのを待ってからクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/120.png)

＜DevOpps ツールチェーンの構成＞画面で、画面下部の「作成」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/130.png)

＜アプリの詳細＞画面に戻るので、**成功しました** ダイアログが表示されるまで3分ほど待ちます。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/140.png)

そのまま待つと **ci-pipeline** の「状況」が「進行中」となります。１０分ほど待つと「成功」に変化します。

![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/165.png)
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/172.png)


##### ci-pipeline 詳細確認(オプション)
パイプラインの完了まではかなりの時間がかかるので、 **「パイプラインの状況がどうなっているのか？」** を確認するのもよいかと思います。

「状況」の「進行中」横にあるアイコンをクリックします。

![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/167.png)

別ウインドウで「ci-pipeline ダッシュボード」が表示されますので、「名前」の部分をクリックして進捗状況を確認できます。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/169.png)

画面左側の各ステップが、すべて緑になるまで詳細を確認してください。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/171.png)

## Node-RED 設定

#### URLアクセス

Node-RED の準備が整っているので、画面左上の「ハンバーガーメニュ」から `ダッシュボード` を選択します。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/170.png)

＜ダッシュボード＞で、`Cloud Foundry アプリ` をクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/200.png)

＜リソース・リスト＞画面で、Node-RED のアプリを選択します。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/210.png)

Cloud Foundry アプリ 詳細画面で、画面上にある `アプリURLにアクセス` をクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/220.png)

#### セットアップ

Node-RED アプリが別ウインドウ（別タブ）で表示されます。画面下部の「Next」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/300.png)

Node-RED にログインするための、ユーザ名とパスワードを設定します。ユーザ認証無しで利用することも可能ですが、だれもがプログラムフローを編集できる状態になってしまうので、ユーザパスワードを設定することをオススメします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/310.png)

ノードの追加について説明が表示されるので、画面下部の「Next」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/320.png)

Node-RED のセットアップ完了と、ユーザパスワードの変更に関する説明が表示されます。内容を確認したうえで画面下部の「Finish」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/330.png)

## Node-RED 実行

#### トップ画面
しばらく待つと Node-RED のトップ画面が表示されます。「Go to your Node-RED flow Editor」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/350.png)

#### ログイン
Node-RED のログイン画面が表示されるので、セットアップ時に設定したユーザパスワードを入力し、「ログイン」ボタンをクリックします。
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/360.png)

#### フローエディター
Node-RED フローエディターが表示されます。Node-RED のステキな世界をお楽しみくださいっ！
![](https://github.com/Kakimoty-Field/IBMCloud-NodeRED/raw/master/Node-RED/img/370.png)