IBM CloudでNode-REDの立ち上げ方

IBM Cloud上で使えるビジュアルプログラミングツールNode-RED。ここではIBM CloudでCloud Foundryアプリを使用したNode-REDの立ち上げ方を説明します。

ころころUIは変わりますので、これは以下時点の情報です:
2021年1月16日

#0. 前提はIBM Cloudのアカウントがあること
前提は有効なIBM Cloudのアカウントがあることです。
お持ちでないかたは [こちら](https://cloud.ibm.com/registration?cm_mmc=Email_Events-_-Developer_Innovation-_-WW_WW-_-nishito\tokyo\japan&cm_mmca1=000019RS&cm_mmca2=10004805&cm_mmca3=M99938765&cvosrc=email.Events.M99938765&cvo_campaign=000019RS
) から取得お願いします。
取得方法の動画はこちらです: https://youtu.be/Krn1jQ4iy_s

また無料のライトプランではCloud Foundryアプリが256Mのメモリまでしか動作できません。以前作成したことがある場合は　[ダッシュボードから停止](https://qiita.com/nishikyon/items/3356db8bb4c1524517be)しておきましょう(または使用メモリを調整してください)。

**最近Cloud Foundryのプランはライトアカウントを使ってない場合は、利用料金がかかる場合があります。もし絶対無料でしか使いたくない場合は、必ずライトアカウントでログインして作成してください。ライトアカウントにはクレジットカード情報など課金情報の登録がありませんので、課金されることはありません。**


#1.Node-RED Cloud Foundry アプリの作成
Node-RED Starter から.Node-RED Cloud Foundry アプリを作成します。

###1.1: IBM Cloudにログイン
https://cloud.ibm.com よりIBM Cloudにログインします。

###1.2: 「カタログ」をクリック　（「リソースの作成」をクリックでもOK）
ダッシュボードが表示されるので、上部のメニューにある「カタログ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3b211d56-a6c1-41dc-4e40-6bfa02c64e96.png)





###1.3: 検索窓に`node red`と入力しEnterキーを押下、　表示された「Node-RED App」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c5fecada-0b73-e5ff-3aff-6c1996eae6ce.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/79e763f9-6dee-4826-c4ce-426118b28fe6.png)


###1.4: Cloud Foundry アプリの作成
製品情報のタブが最初に表示されるので、「始めに」のボタン、または「作成」のタブをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/e68e2e6a-60ff-2d56-6caf-9c5da8682303.png)

作成のタブが表示されるので、以下を設定します。
- アプリ名: 変更したい場合は変更します
- リージョン: こだわりがなければ`ダラス`にしておきます(現状はアプリの稼働リージョンがダラスのため。もし他のリージョンを選んでしまっても通常は問題ないです。)。
- 価格設定プラン: Cloudantの無料のプランを使用したい場合は `Lite`であることを確認


全て記入・確認が終わったら「作成」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/b7129a2f-4ab5-c5f6-c067-e92c8fd3d146.png)



Cloudantセクションで以下のようなエラーが表示され、「作成」ボタンがクリックできない場合:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/7c2dc351-2430-af1a-2bde-68cb627d66d6.png)

`Cloudant`サービスを以前作成してないでしょうか?　`Cloudant`サービスもライトプランでは1つしか作成できません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/57e1dca0-57ab-555c-4a53-3b1d81f822aa.png)


以前作成した`Cloudant`サービスを`価格設定プラン`から選択するか(とりあえずはこれでよいはず)、[以前のCloudantサービスは削除](https://qiita.com/nishikyon/items/0758bc584ea385785347)してから再度作成するか、PAYGプランにアップグレードしてください。

以前作成した`Cloudant`サービスを`価格設定プラン`から選択:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/930833ea-2170-6a4d-fefe-a9bfc3bdb0fb.png)


作成が成功すると下のような画面になります (英語の場合あり)。`アプリのデプロイ`ボタンが青くなりクリックできるようになるまで待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d07aebf1-6281-99d0-2cf1-c3423b810cf6.png)


#2.　必要な場合: サービスの接続
IBM Cloudのサービスと接続したい場合は、ここで設定可能です。また稼働後でも設定可能です。稼働後の接続方法は[こちら](https://qiita.com/nishikyon/items/0e21fdabcd7f8966bb24#5-%E5%B7%A6%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E6%8E%A5%E7%B6%9A%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B)

最初に設定しておきたい場合は`サービス`の中の、「既存のサービスを作成」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/0975ccaa-ce5b-d375-938a-97b1c2ad0b0a.png)

既存のサービス一覧が表示されるので、接続したいサービスをチェックして、「完了」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d3b68415-a1f1-a1f2-eab5-f530f84cf9d1.png)

`アプリの詳細`画面に戻り、しばらく待つと、`サービス`の中に接続したサービス名が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d25de4ac-a39f-df37-ed72-c77020f0d10c.png)

#3. アプリのデプロイ
Continuous Delivery を有効にして IBM Cloud にデプロイします。
###3-1. アプリのデプロイ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d07aebf1-6281-99d0-2cf1-c3423b810cf6.png)

###3-2. `デプロイメント・ターゲット`から`Cloud Foundry`をクリックして、チェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/16899bfd-0a25-24aa-2932-e0a7bdb76974.png)


###3-3. 「IBM Cloud API 鍵」の「新規　+」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/12e046da-7841-ef38-27d7-7b0ce5aea7e3.png)


###3-4. 表示された「全アクセス権限を持つ新規 API キーの作成」の「OK」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/96ddeed4-3b80-5c68-1a8b-a3bf6b7f1e75.png)



###3-5. ホストを変更したい場合は変更して、「次へ」をクリック
ホストはドメイン内でユニークでない場合はエラーとなるので、エラーになった場合は別のホスト名に変更してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/57a79542-b4f8-6143-4302-ddf0138eb3e1.png)

###3-6. `DevOps ツールチェーンの構成`の画面で「作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/672577bc-0dc6-a8f7-28cc-a17d4dbcd4d3.png)



###3-7. 「デプロイメント自動化」の下の「Delivery Pipeline」に状況が「成功」になるまで待つ(約7〜10分くらいかかります)

最初は以下のような状態:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/4964a4f1-6b8a-4175-33f3-02178ac7d080.png)

次に「Delivery Pipeline」が表示されます:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d2c9fabc-3a91-0565-7a24-e1e3bc63f055.png)


しばらく待つと「Delivery Pipeline」の状況が`進行中`になります:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/e8fc4ca0-e7c1-9333-380d-2c7e943f8f17.png)

さらにしばらく待つと「Delivery Pipeline」の状況が「成功」になります:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/0dd3e62a-ce7d-2d3a-2b76-25a897f19e93.png)

###3-5. ページをリロードします。詳細にアプリURLが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/5efcae2f-4c4c-8a35-58fd-2a003af130a1.png)



#4. Node-REDフローエディタの設定
###4.1: `アプリURL`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3697bf9f-46c8-06e6-e686-7b362ea4e16a.png)


###4.2:初期設定開始画面が表示されるので「Next」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/1f00c2ab-05e1-2706-ee3f-c42f55bdc4e4.png)

###4.2:ユーザー名とパスワードを入れて「Next」をクリック
これはNode-REDフローエディタにアクセスするためのusernameとpasswordです。**Node-REDフローエディタアクセスするのに必要なので、忘れないようにしてください。***忘れそうな方はどこかにメモっておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d616a04c-64f2-5310-84ac-8ceb8a8e5c66.png)



尚、パスワードが`too weak`の状態だと「Next」ボタンがクリックできませんので、`weak`以上になるように設定してください。ありがちな`password'とか`12345678`とかは`too weak`のようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/9327914b-494d-a5c3-58c9-2fd5cbeee985.png)


###4.3: 「Learn how to install additional nodes」はそのまま「Next」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/ab69fa74-bfbe-7570-e324-8d36f3ff30c5.png)


###4.3: 「Finish the install」はそのまま「Finish」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/a17c57d2-7f30-7ecc-b9dd-f7442faa4e51.png)

###4.4: Node-REDの画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c8a3344e-2407-548f-fa36-c2c557d26747.png)

#5. Node-REDフローエディタの立ち上げ
###5.1: `Go to your Node-RED flow editor`をクリックします、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/97b3c98f-dfff-695b-238e-4d7cd8eedc3d.png)

###5.2:設定したユーザ名とパスワードを入れて、ログインをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3f9c174b-d093-4e9b-196e-21fd8aa91c29.png)

###5.3:  Node-REDフローエディタが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/2caf3db1-dcdc-826c-bd11-e9df6ed1559c.png)


以上です。

#補足
`アプリURLにアクセス`が表示されているCloud Foundry アプリの詳細画面が行方不明になった場合は以下の手順で表示してください。

###1. ログイン後、ダッシュボードを表示します。
どのページでも左上のIBM Cloudロゴをクリックすればダッシュボードの表示になります。またログイン直後は必ずダッシュボード画面となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/189612ed-249f-b705-aef8-5d6791812eff.png)

###2. リソースの要約の「Cloud Foundry アプリ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3eddb26b-6468-86c1-1e58-af2f21ddf783.png)




###3.表⽰されたリソースリストからから詳細画面を開きたいNode-REDのアプリ名をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/37175b24-9567-bb17-18ce-9cf36106687c.png)




###4. Cloud Foundry アプリの詳細画面が表示されます。
「アプリURLにアクセス」をクリックするとNode-REDの画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/9a196b29-81a2-0045-605d-8b8997116d0b.png)