IBM Cloud DevOps ToolChainを利用してNode-RED環境を　簡単にデプロイする方法

#ボイラーテンプレートは便利。でもカスタムノードを入れるのにはちょっと不便。
IBM Cloud上でNode-REDを利用する際に、欲しいノードを追加する際にちょっと不便に感じることありませんか？

---
#そんなあなたにIBM CloudのDevOps ToolChainをオススメ


##こんなことできるよ
1. 自分で欲しかったノードを予め登録しておくことができる
2. Node-REDでこんなフロー作ったぜ、デモするのにこのURLクリックしてみてよ

---
#早速試してみよう

↓これをクリックしてIBMクラウドへデプロイ！
[![Deploy to IBM Cloud](https://bluemix.net/deploy/button.png)](http://bit.ly/2MqMAtG)

※IBM Cloud ライトアカウントが利用可能です。
　ツールチェーン、CloudFoundry Node.js、
　GitLabプライベートレポジトリ
　がデプロイされます。(無料範囲内)

---
実行画面
[![Deploy to IBM Cloud](https://bluemix.net/deploy/button.png)](http://bit.ly/2MqMAtG)
をクリックするとこんな画面が出てくる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/2ed080b2-0d53-2b04-6d9a-075a124bfe69.png)

---
右下にある「作成」ボタンをクリックするだけで
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/b9f46b17-d7b6-211b-e7d5-21e6cbf12b20.png)

---
## ツールチェーンが作成された
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/089ebebb-299e-925e-934e-69ea06a84c78.png)

---
Delivery Pipelineをクリックすると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/dddde4dc-28d3-cbee-7172-87aa9174590c.png)

---
実行結果が表示される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/8e87796d-0660-ff2d-db61-341d1da97608.png)

---
ダッシュボードを開いてみる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/8ebb7d46-8116-6a07-7416-d8326488c35c.png)

---
増えてる！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/bc1117fe-3dd4-18e1-e913-c6d5bc0c8b55.png)

---
Cloud Foundry - SDK for Node.jsを利用して構築されてる。
アプリURLにアクセスしてみる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/6345d97b-b9ab-8205-8131-3547ee716896.png)

---
ウィザードが表示された！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/64b937a9-b726-751c-556a-617a35375d40.png)

---
flowエディタの管理者権限を設定する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/7a9629bc-ae96-d6f1-8855-9c1f76b70783.png)

---
使用状況の可視化についての選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/d8cb8fd6-f04d-c08e-c06a-328b56f50290.png)

---
IBM Cloudで利用できるnodeの紹介
このままNext
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/dbd7f9a9-091c-48ed-7102-04121790a25b.png)

---
インストール前の確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/513c069a-ebfc-e22d-cf2d-2f92bf544972.png)

---
Node-REDがデプロイされたあとの最初の画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/8b8f8370-bfd5-affb-62a0-19edef3e54ff.png)

---
フローエディタのログイン画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/66a138e8-df7c-9285-f0cc-92607ba73ee8.png)

---
フローエディタが表示された
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/a1b9b1d5-e94c-5699-216b-4a01c5d15e30.png)

---
#ありがとうございました

---
#ここからはtoolchainの機能紹介/どうやって作ったのかを紹介していきます
---
#Deploy前の機能紹介

---
##機能説明: Gitレポジトリー
今回はNode-REDをIBM Cloudにデプロイ/設定するための設定情報がレポジトリに配置されます
package.jsonに必要なノードパッケージを追記することが可能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/6040ecc2-87ed-a874-0c67-f72681e65fad.png)

---
### Gitレポジトリは以下の方法が可能
GitHubのレポジトリーをクローンして、プライベートでコードを編集する
(今回公開したテンプレートのデフォルト)
->自分だけの新しいノード追加などが試せる

GitHubのレポジトリーをリンクさせて、GitHub上でコード編集をする
->GitHub側で管理されているレポジトリ上でコード編集を行う(公開されている必要あり)

---
##機能説明: Eclipse Orion Web IDE
Gitレポジトリの中身をWebブラウザ上で編集することのできるIDE環境
あのノードを追加したい！というタイミングでIDEこのIDEを開けば簡単に追加が可能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/4ecaeb31-7c91-178d-5512-e38cca64611d.png)

---
##機能説明: Delivery Pipeline
GitレポジトリーにコードがPushされたことをトリガーにアプリケーションの構築が可能
package.jsonがアップデートされたことを検知してNode-REDを再構築するよ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/5bf052a1-d14d-7ee2-fb9c-67a47d219265.png)

---
#作成ボタンをクリックすると
---
## ツールチェーンが作成された
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/089ebebb-299e-925e-934e-69ea06a84c78.png)

---
###機能説明: THINK - Issues
課題やタスク・バグなどを管理することができる機能

![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/6f65d586-cbb1-fe8d-54ee-d24a1b257301.png)

---
###機能説明: THINK - Issues(画面サンプル)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/e8b7392b-6050-a76a-2974-b866bdd589a7.png)

---
###機能説明: Code - Git
Gitに、リンクorクローンしたGitレポジトリへのリンク
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/3e218798-ce50-b842-2be0-65b8f2fba438.png)

---
###機能説明: Code - Git (画面サンプル)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/fb8d51b2-82dd-b3f3-9fac-e1c4e0e60c3d.png)

---
###機能説明: Code - Eclipse Orion Web IDE
Web上で展開されるエディタ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/ab53ba00-6771-3a27-9840-8cf1b9075e2b.png)

---
###機能説明: Code - Eclipse Orion Web IDE(画面サンプル)
ブラウザ上からpackage.jsonなどの設定ファイル編集が可能に。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/00f3c92a-0267-4fc5-496c-1c057971c89c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/785f3e71-d7e1-2263-2335-1464de4feefc.png)

---
###機能説明: DELIVER - DeliveryPipeline
ブラウザ上からpackage.jsonなどの設定ファイル編集が可能に。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/dddde4dc-28d3-cbee-7172-87aa9174590c.png)

---
#どうやって作ったの？

---
##IBM Cloud DevOps toolchains

IBM Cloudでは、様々なToolChainサンプルが公開されています。
http://www.ibm.com/cloud/garage/toolchains

※ToolChainとは、アプリケーションを作成するにあたって、使用されるプログラムの集合体

---
##IBM Cloud DevOps toolchains
DevOps toolchainsとしてサンプル公開しているものはすべて、GitHubのOpen Toolchainに公開されています。
http://www.ibm.com/cloud/garage/toolchains
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/16fe3946-5ed1-a382-0543-62ebfa033829.png)

---
##Open Toolchain
defualt-toolchainというベースとなるテンプレートを始め、k8sコンテナのデプロイやマイクロサービスなどさまざまなツールチェーンサンプルが公開されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/cfcacfc3-5d54-8d22-f506-93d8422e77b4.png)
https://qiita.com/ssakaigawa/items/7f9a8d96d86dd5d68437

---
##既存プロジェクトをフォーク
IBMから公開されているプロジェクトをtoolchain部分を強化してフォーク
https://github.com/ibmets/node-red-bluemix-starter
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/f32cbad9-b7b6-4ce5-29e9-680ab9512556.png)

---
##カスタマイズ

参考）
[IBM Cloud DevOps ToolChain "Develop a Kubernetes app toolchain"をカスタマイズしてオリジナルのToolChainを作成する](https://qiita.com/ssakaigawa/items/7f9a8d96d86dd5d68437)

---
##公開してみた
https://github.com/phssakaigawa/node-red-bluemix-starter
↓クリックしてIBMクラウドへデプロイ！
[![Deploy to IBM Cloud](https://bluemix.net/deploy/button.png)](http://bit.ly/2MqMAtG)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/126158/4356b6ea-f0d6-0bf9-c08f-27ce57bb5962.png)

---
#フローも共有できる！
gitプロジェクト内のdefaults/flow.jsonを編集すると
デプロイしてすぐ、自分の作ったNode-REDのフローが再現できます
-> すげーの作ったから見てくれ！　的な公開ができる

---
#おしまい