Node-REDをIBM Cloud Code Engineで動かしてみる


:::note warn
スターター・キットの提供が終了したため、現在はこの記事の方法ではNode−Redが利用できなくなっています。

Code Engineを動かしたい方は、こちらのQiitaがおすすめです
（スターターキットを使わない方法でNode-Redを動かす方法）
https://qiita.com/masaffff/items/740e322a72e26231670e

:::


ローコード環境でサクッとアプリが作れてしまう便利なNode-RED！

今回はそのNode-REDをIBM Cloud Code Engineで動かしてみたいと思います

Cloud Foundryのときと同じで、Node-REDのアプリと設定情報を管理するCloudantの両方をまとめて作成可能な[スターター・キット](https://cloud.ibm.com/developer/appservice/create-app?starterKit=59c9d5bd-4d31-3611-897a-f94eea80dc9f)を使ってデプロイすることが可能です

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/ec02218d-e3c7-d52a-942b-31e16f245647.png)

## 事前準備

- [Code Engine](https://cloud.ibm.com/codeengine/projects) プロジェクト
- [Container Registry](https://cloud.ibm.com/registry/namespaces) の名前空間

参考情報：[数分でアプリがデプロイできるコンテナ環境！IBM Cloud Code Engine - Qiita](https://qiita.com/satokota/items/b3cecd591e244fed391f)

## Code Engineへのデプロイの流れ

1. アプリの作成
    
    カタログからNode-REDを探しアプリを作成
    
2. DevOpsツールチェーンの設定
    
    Code Engineにデプロイできるように設定する
    
3. Node-REDの初期設定
    
    Code Engine上のNode-REDにアクセスしログインユーザー・パスワードの設定を行う
    
4. Node-REDにログイン！
5. [オプション] Node-REDの割当リソースの追加や常時起動設定

## 1. アプリの作成

Node-REDをCode Engineにデプロイしていきたいと思います！

まずカタログからスターター・キットを探します

[「カタログ」](https://cloud.ibm.com/catalog)にて「Node-RED」を検索し **「Node-RED App」** をクリックします

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/471b8458-dea3-4bb3-0752-e75bc9ea1167.png)

Node-RED スターター・キットの画面が表示されたら **「始める」** をクリック

![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/56194610-b91d-26ea-11b5-240eeb611a86.png)

作成タブが表示されるので、名前やどのリージョンに作るのかといった必要事項を入力し **「作成」** をクリックします

アプリの詳細

- アプリ名：わかりやすい名前（例：node-red）
- リソース・グループ：利用したいリソースグループ（defaultのままでもOKです）

サービスの詳細

- リージョン： デプロイしたい地域（例：東京）
- リソース・グループ：利用したいリソースグループ（defaultのままでもOKです）
- 価格設定プラン：ライト

![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/d34d957a-ae6d-efd6-e32d-6fbd934cce69.png)

**「アプリの詳細」** が表示されます。画面表示直後はCloudantのインスタンス作成やアプリコードの準備が実行されます。その後 **「アプリのデプロイ」** がクリックできるようになるので、クリックします

![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/10b53c0f-e158-e90a-456a-ce0815d308bb.png)

## 2. Continuous Deliveryツールチェーンの設定

アプリのデプロイをクリックしたら、「デプロイメント・ターゲットの選択」が表示されます。ここでは利用する地域やデプロイ先のCode Engineプロジェクトの指定、コンテナイメージの保管場所（Code EngineではNode-REDをコンテナ化して動かします）などデプロイに必要な情報を設定します。

必要事項を入力し 「次へ」 をクリック

- デプロイ先の設定
    - デプロイメント・ターゲット：Code Engine を選択
- APIキーの設定
    - IBM Cloud API 鍵：一番右の **「新規」** ボタンをクリックし新規APIキーの作成を行う
    

以下コンテナレジストリとCode Engineの設定は事前に作成された情報を元に選択してください。

- コンテナレジストリの設定
    - コンテナー・レジストリー・リージョン
    - コンテナー・レジストリー名前空間
- Code Engineの設定
    - リージョン
    - リソース・グループ
    - プロジェクト

![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/ef41819b-043f-76ea-dee0-0a9b77485a79.png)

「DevOps ツールチェーンの構成」が表示されます。特に変更する必要はありませんが、ここではリージョンをCode Engineプロジェクトと同じリージョンを選択し、 「作成」 をクリックします

![Untitled 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/c80c398f-ca0a-f639-0a80-2e70beed0acf.png)

作成をクリック後、Delivery Pipeline が自動的に実行されCode Engineへのデプロイが始まります。

「Delivery Pipeline」の「ci-pipeline」 が成功ステータスになるまで待ちます。ステータスが変わるまで今回は5-10分ほどかかりました。

![Untitled 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/a158dda1-7fe5-2bb8-a4b0-9b90b623b64d.png)

## 3. Node-REDの初期設定

デプロイが完了したので、早速Node-REDにアクセスしたいと思います。

「アプリURL」に表示されているアドレスをクリックします。

![Untitled 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/2947fccd-1a19-8640-d727-828a0d007a91.png)

少し待っていると以下のように見慣れたNode-REDの初期設定の画面が表示されます。

ここからはいつものNode-REDですね。「Next」をクリックします

![Untitled 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/00384d4b-a85a-2f65-8f31-776e8d21c18b.png)

Node-REDのログインユーザーの設定を行います。好きな名前と強そうなパスワードを入力し「Next」をクリックします

![Untitled 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/f9176f87-e0e6-3550-f5ca-57d6f0003ec8.png)

ここは説明を読むだけなので「Next」をクリックします。

![Untitled 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/334039e9-2443-2bde-4331-82e16b8d852c.png)

最後に「Finish」をクリックします。

クリック後、次のステップのログイン画面が表示されます

![Untitled 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/7fcf0e16-74fb-cd83-de15-e8e7aec0aa9f.png)

## 4. Node-REDにログイン！

ここまででデプロイと初期設定すべて完了しました！あとはログインするだけです

「Go to your Node-RED flow editor」をクリックします

![Untitled 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/0ec3d3be-6b5b-83fe-777a-a41f7a8b9cec.png)

初期設定で設定したログインユーザーとパスワードを使ってログインします

![Untitled 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/707031e2-d9ce-ddea-9468-fb50cb2cf67e.png)

「Node-RED 2.2へようこそ！」とエディタ画面が表示されました！！！

あとは、Node-REDを使い倒すだけです。

![Untitled 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/316ac751-8f37-76df-9b7a-5e8ce7d4c9aa.png)

## 5. [オプション] Node-REDの割当リソースの追加や常時起動設定

今回試してみたところ、スターター・キットのデフォルト値ではランタイムリソースは 「0.25vCPU x 0.5GB メモリ」 でデプロイされました

オートスケールの設定は「０−１」とゼロスケールを利用する設定です

（ゼロスケールというのはまさにインスタンスをゼロにすることができる機能です。Code Engineではインスタンスへのアクセスがないときにインスタンスを停止させるというゼロスケールが利用できます。これによってアクセスがないときの課金を減らせますが、インスタンスが停止しているときにアクセスがあると立ち上げに数十秒かかるためレスポンスが悪くなってしまいます）

![Untitled 16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/3ac8da2d-223a-be25-2cb0-1951d7047b2e.png)

今回はリソースを0.5 vCPU x 1 GBメモリに上げるのと、レスポンスを良くするために常時起動の設定をしてみます

Code Engineの画面で直接編集することもできますが、その方法では今後パイプラインを再実行した際に設定値が戻ってしまうので、Delivery Pipelineの設定値を変更していきます

「アプリの詳細」にある 「Delivery Pipeline」の「ci-pipeline」をクリックします 

![Untitled 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/16f46960-9ad7-09f6-99df-bc9dbbbc855d.png)

「環境プロパティ」を開き、CPU、Memory、min-scaleの値を変更し、最後に「パイプラインの実行」をクリックします

- cpu：0.5
- memory：1
- min-scale：1

※ CPUとメモリはサポートされている組み合わせの中から自由に選べます。
[サポートされるメモリとCPUの組み合わせ](https://cloud.ibm.com/docs/codeengine?topic=codeengine-mem-cpu-combo)

![Untitled 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/3ccf3e0f-4147-d7b4-fa4b-ce227a2a647b.png)

「パイプラインの実行」にて、右下の「実行」をクリックし、デプロイを行います

![Untitled 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/611fb164-ac71-7082-7de5-85a3accac71d.png)

「PipelineRuns」にて手動実行したPipelineが完了し状態が「Succeeded」となるのを待ちます

![Untitled 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/c2cfbcff-99e2-fb9f-fd8b-b419c266f4dd.png)

Pipelineの状態が「Succeeded」となったので、Code Engineのアプリ画面でランタイムの設定を確認してみます。環境プロパティで設定したとおりにリソース追加と常時稼働するように設定ができました!

実際にアプリにアクセスしてみたところ、元々の「0.25vCPU x 0.5GB メモリ」ではエディター画面の読み込みがもっさりしていたのですが、リソース追加後はスムーズに表示されました

![Untitled 21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/77f0c145-3326-4640-778c-cf76678ee973.png)

Node-REDのスターター・キットを使うことで、Code Engineへのデプロイと設定ファイルの保管先であるCloudantをまとめてデプロイできました。Node-REDをCode Engineにデプロイすることで必要なリソースを瞬時に割り当てられたり、ゼロスケールで課金を抑えながら使えたり、負荷に応じてスケールさせたりできる。そんな便利なNode-RED環境が手に入りました！

## 関連の情報

- [Create a Node-RED starter application - IBM Developer](https://developer.ibm.com/tutorials/how-to-create-a-node-red-starter-application/)