BlueMix上のNodeJSアプリをEclipseNEON+αで作る（その１：ToolChain使ってBlueMix環境作ってみる編）

流行のものをモリモリとりこんで開発してみよー。


・・・と思ったが、ここ10年Javaメインのプロジェクトしか参画していなかった自分に、最近の流行開発など経験もなく、死角しかなかったのであったorz

そんなわけで、
**『レガシーSIエンジニアのための最近の流行おいつき講座（第1話。記事に反応なければ最終話）』**
はっじめっるよー。

ちなみにこちらは構築編で、BlueMix自体に対する考察とかアーキテクチャとか設計思想についてはBlogの方で記載します。興味がある人はこちらもどうぞ（[IBM Garrage Methodを見て感じたITシステムのアーキテクトの変遷（と今後）について](https://maru0ka.blogspot.jp/2016/07/ibm-garrageit.html)）。


#　無料のBlueMix環境を扱ってみる
この記事シリーズではBlueMixというサービスをつかってみるので、BlueMixについて。
BlueMixはIBM社が提供しているクラウド上の開発＆サーバ基盤提供サービスです。
説明が難しいので、[他の記事](http://qiita.com/zuhito/items/86e7ad47d14937d3e9b6#bluemix%E3%81%A8%E3%81%AF)を参照して下さい。

※BlueMixは1ヶ月間のフリーとWEBページには記載していますが、実は無料用の機能を使う分には実質的な無料利用できるとか（クレジットの登録は必要なので、有料機能を使った時点で課金が発生してしまいますのでご注意を！）[参考文献](http://qiita.com/zuhito/items/86e7ad47d14937d3e9b6#%E7%84%A1%E6%96%99%E6%9E%A0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
BlueMixを味見程度に使うとしても、ソース自体はGITに公開保存もできるので、気軽に使えばいいのではと思ったり。ただし、使い方を誤って期待しない課金されても当方は一切の責任は負えないので自己責任でやってね（ｷﾘｯ

BlueMixへの登録がまだな人はこの辺で。　[BlueMixの登録方法の紹介記事](http://qiita.com/KenichiSekine/items/6ad49b25167b3f4cdb63)

#　前提方針
サーバー立てるのがめんどくさいので、当分はBlueMixをつかってみることを前提とする。

そんなわけで２～3時間つかって調べてみた「ぼくのかんがえるさいきょうのJS試験環境」を発表します。（おー、パチパチ）

- 検証サーバー：BlueMix
- 統合開発環境onBlueMix：ToolChain＋α　*1
    - [参考文献：Simple ToolChain](https://www.ibm.com/devops/method/toolchains/simple_toolchain)
- ローカル開発環境：Eclipse（NEON）＋α　*2
    - [Eclipse NEON本家](https://eclipse.org/)
    - [参考文献](http://qiita.com/cypher256/items/2384d6797ac49740f217)

*1　ToolChainという統合開発は、最近、試験版が出たばかりで、開発チームにメールを送らないとつかえないという、メンドクサイやつ。しかしながら、ちょっと触ってみた感じ、次世代の開発環境っぽい有効性を感じたので、味見がてら試してみようというものです。試作1号機と聞くとガンダムGPXXとかエヴァンゲリオンX号機っぽくてかっこいいので今回の環境として採用してみた。試作機だけあって、使えるメニューはまだ少ないです。

*2　JavaScript開発環境というと、VIMとかSublineXXXXとかオシャレなエディタが増えているので二番煎じでもいいかなーと思ったが、丁度、NEONが発表され、Node.js ランタイム
JavaScript デバッガ、JSONエディタにも対応してきたとのことで、味見がてら試してみようというものです。リリース直後の量産品と聞くと、エヴァ量産期という感じがして~~キモイ~~性能向上がありそうなので~~怖いけど~~、人柱的な気分でチャレンジ採用してみた。もっさりしてなければいいけどー。とはいえ、リリース直後だけあって、世の中の情報がまだ少ないのでジタバタしてます。

今回は、まず環境の初期構築としてtoolChainの構築編だす。ふんだす。

#　ToolChainって何？
[このへん](http://www.slideshare.net/KazukiHarada/bluemixnext-devopstoolchain)がわかりやすい。

まだ詳細な解説については、日本語では無い模様（2016/7/30・Maru0kaリサーチ社調べ）。

英語をざっくり翻訳すると、「アイデアソン用のMURALとか、タスク管理のGIT Issuesとか、ソース管理のGUT HUBとか、リリース管理のJENKINSEとか、いろいろバラバラに使うのめんどいじゃん！？　だったら、統合的に使えるアレがあると、いい感じに使いやすいじゃん」という理論に基づいた「アレ」の部分を示すもの・・・らしいです。

#　ToolChainを使ってみる
本家は[ここ](https://new-console.ng.bluemix.net/docs/toolchains/toolchains_overview.html)です。

翻訳版ではなく、実体験がてらに使い方を解説するよ。
※ToolChainは拡張される可能性があり、構成切り替えにより他の環境に影響するかもしれないらしいので（リンク先のtoolChainをつかえるようにするための申請メールにそれっぽい記載があった）、BlueMixを商用で利用している人は、そのアカウントとは別のアカウントでやったほうが無難かも。

今回はシンプルなToolChainを作ってみましょう。

* * *
ToolChainを使うにはまず、サイトにログインするべし。

- ここにアクセス。[参考文献：Simple ToolChain](https://www.ibm.com/devops/method/toolchains/simple_toolchain)　ここで、Create ToolChainのボタンをおす。（押した後、BlueMixにログインする必要があります。）
![002.png](https://qiita-image-store.s3.amazonaws.com/0/3168/6108428f-9e94-63a8-446b-06ab4c5d8b55.png)

* * *
- ログインすると謎の動画とボタンがあると思いますが、このボタンはメール送信リンクになっています。この送信ボタンを押すことで、ToolChainが使えるようになるとか。
-　1週間後ぐらいに「できたよー」という英語のメールがとどくはず。
-　んで、もういちどはじめのリンクを押すとこんなんでるはず。
-　こんなん。その後で、Createボタンを押す
![003.png](https://qiita-image-store.s3.amazonaws.com/0/3168/f87305b7-7720-a379-a06a-96ed75be881e.png)

    - するとこんな感じでToolChainのページができます。
![004.png](https://qiita-image-store.s3.amazonaws.com/0/3168/c100cb24-3837-7a7a-0333-3bc136a9cf4c.png)

この時点で、アプリ実行環境は完成しています。内容を簡単に説明しておきましょう。

- [Issues](https://www.ibm.com/devops/method/content/think/tool_github_issues)　このアイコンはGIT HUB Issuesとリンクできます。このアイコンあたりをクリックすると当該のIssuesに飛びます。飛ばないときは、設定を変えてリンクを定義する必要があります。
    - こんな感じで。
![005.png](https://qiita-image-store.s3.amazonaws.com/0/3168/9334d1e2-b978-caf8-b762-ab8ef4133687.png)

- [GIT HUB](https://www.ibm.com/devops/method/content/code/tool_github)　このアイコンはGIT HUB（ソースリポジトリ）とリンクできます。このアイコンあたりをクリックすると（以下略）。

- [Eclipse Orion Web IDE](https://www.ibm.com/devops/method/content/code/tool_web_ide)　このアイコンはWEB上でソースコードの修正、GIT　HUBへのPushができるもの。便利なんだけど、複数人で修正するには競合の問題があるので、少し難あり。それについては[このへん](http://www.slideshare.net/KazukiHarada/bluemixnext-devopstoolchain)の最後のほうのスライドでも言及しています。なるほど。
    - とりあえず、この環境が気になる人はこのアイコンをクリックしてソース構造を見てみるといいかも。実態がNodeJSベースでできていることに気づくでしょう。
- [Delivery Pipeline](https://www.ibm.com/devops/method/content/deliver/tool_build_and_deploy)　このアイコンはBlueMixサーバへのリリースの自動化を担当します。どうやら、Delivery Pipelineの内部はJenkinsだそう（どこかのWebニュースで見ただけなので眉唾情報だけど）
    - クリックするとこんな感じの画面が出るはず。
![006.png](https://qiita-image-store.s3.amazonaws.com/0/3168/6c431b95-729d-6f85-ec89-7b9d1775ac06.png)
        - Deployのコマを見てみると、しれっとBlueMix上にサーバ環境ができていることがわかります
        - 信じられない人はリンクをクリックしてみよう。なんとも味気の無いサンプルウェブ画面が見れるはずです。（味気がない、いうな）
![007.png](https://qiita-image-store.s3.amazonaws.com/0/3168/de5601e5-8758-1ef1-3c96-0f5498aeb9e4.png)

てなわけで、お手軽にコーディング＆リリース環境ができるわけです。

#　ToolChainを機能拡張してみる
アイコンの呼び方がわからないので、ここではアイコンのようなものをコマとよぶ。
深い意味は無い。

デフォルトではGITとかPilelineとかがあるが、更にふやすことができます。
今回は、皆で管理することを意識して、リリース時にSlackに通知される機能を作ってみましょう。

* * *
- 初期画面の右端に隠れている+ボタンを押す。
![008.png](https://qiita-image-store.s3.amazonaws.com/0/3168/18cac4d0-1074-5017-6943-48d6cfe58a94.png)

* * *
- 例として、Slackを追加してみる。
![009.png](https://qiita-image-store.s3.amazonaws.com/0/3168/84df2695-9698-292b-ea32-625908fd5417.png)

- あ、何か聞かれた。
![010.png](https://qiita-image-store.s3.amazonaws.com/0/3168/62fce1e1-65d8-6779-ffa1-3aadb01bb53c.png)
    - これはSlackとリンク付けるもの。
    - [ここ](https://api.slack.com/web)にアクセスして、緑色のGenerate Tokensを選ぶと、次のページに遷移する。
![011.png](https://qiita-image-store.s3.amazonaws.com/0/3168/aa056263-fc11-1e29-fd09-654fa414a400.png)
    - ここの「Token」のアドレスと、対象Slackのチャネル#XXXXのXXXX部分を入れると認証される。
![012.png](https://qiita-image-store.s3.amazonaws.com/0/3168/5d49b60c-172b-a4ae-fd70-caf24a02059e.png)

このTokeとチャネルの値をBlueMix ToolChainにセットする。

* * *
- 増やすことに成功すると、初期画面にSlackが増える
![013.png](https://qiita-image-store.s3.amazonaws.com/0/3168/17c363a2-cf66-edab-c130-92961487c78c.png)

- Slackアイコンをクリックすると該当のSlackに遷移する。で、Delivery Pipelineとかでアプリをデプロイすると、自動でSlackにコメントが通知される。こんな感じで。
![014.png](https://qiita-image-store.s3.amazonaws.com/0/3168/55b6842c-3909-a4c3-006d-801fba62140e.png)


よし、これでサーバ側の作業がSlackで通知されたぞ。
一人だけど、いつかみんなで開発するときに役立てよう。

#　まとめ
コードを1行も書かずに、クリックだけで、Issue管理、ソース管理、リリース構成、サーバリリース（公開）環境、Slackでの状況管理までできました。

これは意外にすごい便利なツールなんじゃないか？
※今のところはBlueMix上のDevOpsと関連していない模様なのが玉に傷。きっと、試作機だからさ！