BluemixとGitHubの連動 - Twilioを使ったブラウザ電話アプリをBluemixにデプロイ

前回は、[「BluemixのGITによるソースコードの管理。」](http://qiita.com/joohounsong/items/dce81860732695df6c44)にてソースコードをGITで管理する方法を紹介しました。
今回は、BluemixとGitHubを連動し、GitHubで管理されている「ブラウザ電話アプリ」をBluemix上にデプロイしてみたいと思います。
ご紹介する「ブラウザ電話アプリ」は、[Twilio](http://twilio.kddi-web.com/)で開発されたウェウアプリで、普通のブラウザ（Chrome）から一般電話（携帯）を含めアプリ間の通話機能を開発できる機能になります。

まず、[IBM Bluemix DevOps Service](https://hub.jazz.net/)にログインします。
※ ログインIDは、IBMアカウント（Bluemixと同様）でログインできます。
下記は、ログイン後の画面。みなさんのアカウントで管理されているプロジェクトが表示されます。
![スクリーンショット 2015-11-24 0.05.37.png](https://qiita-image-store.s3.amazonaws.com/0/29452/a76b4e51-dd47-483a-e3b9-e2b11d18dae1.png)

<h1>新規プロジェクトの生成（GitHub）</h1>
今回は、GitHubのプロジェクトと連動してみたいと思います。
「CREATE PROJECT」を選択すると、下記のように新規作成もしくは連携ができるメニューが表示されます。
![スクリーンショット 2015-11-24 0.16.50.png](https://qiita-image-store.s3.amazonaws.com/0/29452/0a7640b5-6de3-1ad7-42bc-7f73e7b34bbb.png)

次の画面で、自分のGitHubアカウントを入力すると下記のようにレポジトリの内容が表示されます。
![スクリーンショット 2015-11-24 0.22.16.png](https://qiita-image-store.s3.amazonaws.com/0/29452/72ca0b5b-c311-16d6-0641-ec2b37f9564f.png)

今回は、私のレポジトリに上がっているブラウザ電話アプリをBluemixにデプロイしてみたいと思います。
レポジトリの中から、Bluemixにデプロイするアプリを選択します。

下の画面からBluemix情報設定のあと、「CREATE」クリック。
※ 基本、ログインされたアカウントと紐付いている情報が検索されますので、みなさんのBluemix環境に合わせて選択してください。
![スクリーンショット 2015-11-24 0.27.14.png](https://qiita-image-store.s3.amazonaws.com/0/29452/42c9ab43-a6fa-5be9-fbfc-0a633e9f08a4.png)

正常に生成されたら、下記のようにGitHubのソースコードやREADMEが表示されることが確認できます。
これで、GitHubのプロジェクトをBluemixにインポートしました。
![スクリーンショット 2015-11-24 0.31.27.png](https://qiita-image-store.s3.amazonaws.com/0/29452/4ad442e8-51c0-34a4-6407-899f51d55977.png)

※ 画面の右上にある、「EDIT」からソースコードの変更も可能です。
![スクリーンショット 2015-11-24 0.34.53.png](https://qiita-image-store.s3.amazonaws.com/0/29452/971793cf-1450-481a-a5a2-a927bc6a19dc.png)

<h1>アプリのビールド&デプロイ</h1>
それでは、BluemixにインポートしたGitHubのアプリをBluemixのアプリケーションにデプロイしてみたいと思います。

「画面の右上のBUILD&DEPLOY」→ ADD STAGE
![スクリーンショット 2015-11-24 0.38.36.png](https://qiita-image-store.s3.amazonaws.com/0/29452/c3970c41-5f41-f79e-1d98-71c20c6e53ce.png)

STAGE生成画面にて、「JOBS」選択。
※ ビルドやデプロイの設定では、みなさんのBluemix環境設定が可能になっていますので、それぞれ設定をしてください。
![スクリーンショット 2015-11-24 0.43.31.png](https://qiita-image-store.s3.amazonaws.com/0/29452/ac5e4240-2f93-1853-1fb7-213ab9b09c1d.png)

ビルドとデプロイの設定を完了すると下記のように「MyStage」が構成されます。
※ Testも可能ですので、ぜひ試してみてください。
![スクリーンショット 2015-11-24 0.47.25.png](https://qiita-image-store.s3.amazonaws.com/0/29452/7a86c0ae-3df0-d316-b839-807c413cecfa.png)

設定完了後、「SAVE」にて設定内容を保存すると、下記のように新しいステージが生成されます。
下記の手順で、今回生成されたステージ（アプリ）をBluemixにデプロイしてみます。
① 実行
② デプロイ確認
③ BluemixのDASHBOARDに移動。
![スクリーンショット 2015-11-24 0.58.28.png](https://qiita-image-store.s3.amazonaws.com/0/29452/cc92461f-a349-e4aa-b4fd-84e7672b590c.png)

<h1>アプリの確認</h1>
BluemixのDASHBOARDに移動すると、先ほどGitHubからインポートし、生成されたアプリ（BrowserPhone）が追加されていることが確認できますので、アプリをブラウザで実行してみると、アプリが起動することを確認できます。
![スクリーンショット 2015-11-24 1.03.26.png](https://qiita-image-store.s3.amazonaws.com/0/29452/117a6693-86ff-0bee-3464-5c5a362a6828.png)

※ Twilio Browser PhoneアプリでErrorが表示されていますが、これはTwilio側の設定が完了していないためになります。

<h1>最後に</h1>
このように、GitHubの新規プロジェクトはもちろん、既存のプロジェクトも簡単にBluemixと連動を行うことが可能ですのでみなさんもぜひ、試してみてください。
次回は、今回BluemixにデプロイされたTwilioの電話アプリを完成させてみたいと思います。

<b>Bluemix Qiitaページはこちら。</b>
Bluemixの最新記事やユーザーからの記事が投稿されています、Bluemixに興味のある方はフォローをお願いします！
http://qiita.com/tags/Bluemix