5
4

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.

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

Last updated at Posted at 2018-06-27
1 / 43

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


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

##こんなことできるよ

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

#早速試してみよう

↓これをクリックしてIBMクラウドへデプロイ!
Deploy to IBM Cloud

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


実行画面
Deploy to IBM Cloud
をクリックするとこんな画面が出てくる
image.png


右下にある「作成」ボタンをクリックするだけで
image.png


ツールチェーンが作成された

image.png


Delivery Pipelineをクリックすると
image.png


実行結果が表示される。

image.png


ダッシュボードを開いてみる
image.png


増えてる!
image.png


Cloud Foundry - SDK for Node.jsを利用して構築されてる。
アプリURLにアクセスしてみる。
image.png


ウィザードが表示された!
image.png


flowエディタの管理者権限を設定する
image.png


使用状況の可視化についての選択
image.png


IBM Cloudで利用できるnodeの紹介
このままNext
image.png


インストール前の確認
image.png


Node-REDがデプロイされたあとの最初の画面
image.png


フローエディタのログイン画面
image.png


フローエディタが表示された
image.png


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


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

#Deploy前の機能紹介


##機能説明: Gitレポジトリー
今回はNode-REDをIBM Cloudにデプロイ/設定するための設定情報がレポジトリに配置されます
package.jsonに必要なノードパッケージを追記することが可能
image.png


Gitレポジトリは以下の方法が可能

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

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


##機能説明: Eclipse Orion Web IDE
Gitレポジトリの中身をWebブラウザ上で編集することのできるIDE環境
あのノードを追加したい!というタイミングでIDEこのIDEを開けば簡単に追加が可能
image.png


##機能説明: Delivery Pipeline
GitレポジトリーにコードがPushされたことをトリガーにアプリケーションの構築が可能
package.jsonがアップデートされたことを検知してNode-REDを再構築するよ
image.png


#作成ボタンをクリックすると

ツールチェーンが作成された

image.png


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

image.png


###機能説明: THINK - Issues(画面サンプル)
image.png


###機能説明: Code - Git
Gitに、リンクorクローンしたGitレポジトリへのリンク
image.png


###機能説明: Code - Git (画面サンプル)
image.png


###機能説明: Code - Eclipse Orion Web IDE
Web上で展開されるエディタ
image.png


###機能説明: Code - Eclipse Orion Web IDE(画面サンプル)
ブラウザ上からpackage.jsonなどの設定ファイル編集が可能に。
image.png
image.png


###機能説明: DELIVER - DeliveryPipeline
ブラウザ上からpackage.jsonなどの設定ファイル編集が可能に。
image.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


##Open Toolchain
defualt-toolchainというベースとなるテンプレートを始め、k8sコンテナのデプロイやマイクロサービスなどさまざまなツールチェーンサンプルが公開されています。
image.png
https://qiita.com/ssakaigawa/items/7f9a8d96d86dd5d68437


##既存プロジェクトをフォーク
IBMから公開されているプロジェクトをtoolchain部分を強化してフォーク
https://github.com/ibmets/node-red-bluemix-starter
image.png


##カスタマイズ

参考)
IBM Cloud DevOps ToolChain "Develop a Kubernetes app toolchain"をカスタマイズしてオリジナルのToolChainを作成する


##公開してみた
https://github.com/phssakaigawa/node-red-bluemix-starter
↓クリックしてIBMクラウドへデプロイ!
Deploy to IBM Cloud
image.png


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


#おしまい

5
4
0

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
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?