© Copyright IBM Corporation 2015 商標IBM DevOps Services と Bluemix による Node.js アプリ ページ 1 / 10

IBM DevOps Services と Bluemix による Node.js アプリdeveloperWorks Japan編集部IBM

2015年 5月 21日

IBM DevOps Services を利用して Node.js アプリケーションを開発し、そのアプリケーションをBluemix にデプロイするのがいかに容易であるかを理解してください。

このラボでは、IBM Bluemix DevOps Services を利用して Node.js アプリケーションを開発し、そのアプリケーションを IBM Bluemix にデプロイするのがいかに容易であるかを、例を用いて説明します。

これらの製品の役割について説明すると、まず、IBM Bluemix DevOps Services は他の開発者と協力してソフトウェアを開発、追跡、計画、デプロイすることができるコラボレーションの場です。読者の皆さんは、DevOps Services の以前の名前である JazzHub をご存知かもしれません。DevOps Services で開発したアプリケーションは、オープン・スタンダードのクラウド・ベースのプラットフォームである Bluemix 上で実行することができます。

このラボを最後まで終えると、DevOps Services を利用してアプリケーションを Bluemix にデプロイする方法を理解できるようになります。

学習目的

アプリケーション、製品ローンチ、キャンペーン、現在行われているイベントなどに対するTwitter の世界での反応にざっと目を通すと非常に参考になります。Twitter の世界での反応は肯定的ですか？それとも否定的ですか？あるいは中立的ですか？

このラボでは JavaScript、Node.js、そして Bluemix ランタイム環境を使用して、ツイートを分析するアプリケーションをホストします。Node.js について十分な知識がないとしても、心配する必要はありません。ラボで用意しているサンプル・アプリケーションには、必要な基本機能が揃っています。このサンプル・アプリケーションを、Bluemix の任意のサービス (Data Cache サービスなど) を利用するように更新することもできます。

手短に言うと、このラボでは DevOps Services を利用してサンプル・アプリケーションを Bluemixにデプロイする方法を理解してもらえるようにすることを目的として、以下の作業を行う方法を説明します。

•  既存の DevOps Services プロジェクトをフォークする

developerWorks® ibm.com/developerWorks/jp/

IBM DevOps Services と Bluemix による Node.js アプリ ページ 2 / 10

•  アプリケーションを手作業で Bluemix にデプロイする•  アプリケーションを更新して手作業で再デプロイする•  プロジェクトの自動デプロイを有効にする•  変更をソース管理へプッシュすると自動デプロイがトリガーされるようにする

所要時間

このラボを完了するのに必要な時間は、約 15 分です。

始める前に

ラボを開始する前に、https://hub.jazz.net にアクセスして IBM Bluemix DevOps Services に登録する必要があります。

登録が完了して e-メールで IBM ID を受け取ったら (または、すでに IBM ID を持っている場合は)、このラボを開始することができます。説明する手順で IBM Bluemix アカウントを参照している箇所では、登録した皆さんのアカウントの IBM ID を使用してください。

DevOps Services プロジェクトを作成する

このチュートリアルでは、まず、サンプル・プロジェクトをフォークするところから始めます。プロジェクトをフォークする際には、フォークしたプロジェクトのコードのコピーが含まれる、新しい DevOps Services プロジェクトを作成します。

DevOps Services プロジェクトをフォークする

IDS プロジェクトをフォークするには、以下のステップに従います。

1. spirit | Sentiment Analysis App を開きます。2. このプロジェクトをフォークする前に、その内容を調べることができます。3. このプロジェクトのコードを新規プロジェクトにコピーするために、「FORK PROJECT (プロ

ジェクトのフォーク)」をクリックします。

4. 「Fork Project (プロジェクトのフォーク)」ウィンドウでは、一意のプロジェクト名、使用している Bluemix スペースの情報を入力し、「CREATE (作成)」をクリックします。プロジェクトのサイズによっては、フォーク・プロセスに数分かかる場合があります。プロジェクトをフォークすると、新しく作成されるプロジェクト用に DevOps Services でホストされる Git リポジトリーが作成されて、そのリポジトリーに元のプロジェクトのコードのコピーが自動的にプッシュされます。

5. プロジェクトがフォークされたら、「EDIT CODE (コードの編集)」をクリックして、コードを編集する作業を開始します。

ibm.com/developerWorks/jp/ developerWorks®

IBM DevOps Services と Bluemix による Node.js アプリ ページ 3 / 10

アプリケーションを構成する

センチメント分析アプリケーションがフォークされたので、このアプリケーションを正常に実行するには、アプリケーションを更新して Twitter キーを組み込む必要があります。

1. デフォルトでは、readme.md が右ペインに表示されます。「To get your own TwitterApplication Keys (自分用の Twitter アプリケーション・キーを入手するには)」というセクションまでスクロールダウンしてください。このセクションの説明に従って、Twitter キーを入手します。それには、Twitter アカウントにサインインする必要があります。

2. アプリケーションの「app.js」ファイルを構成して、Twitter アプリケーションから入手した以下の値を設定します。

•  consumer_key は、Twitter の「Consumer key (コンシューマー・キー)」です。•  consumer_secret は、Twitter の「Consumer secret (コンシューマー・シークレット)」で

す。•  access_token_key は、Twitter の「Access token (アクセス・トークン)」です。•  access_token_secret は、Twitter の「Access token secret (アクセス・トークン・シーク

レット)」です。3. オンライン・エディターで「File (ファイル)」 > 「Save (保存)」の順に選択して、app.js に対

する変更内容を保存します。

developerWorks® ibm.com/developerWorks/jp/

IBM DevOps Services と Bluemix による Node.js アプリ ページ 4 / 10

アプリケーションを Bluemix にプッシュする

センチメント分析アプリケーションがフォークされ、このアプリケーションを Bluemix にデプロイする準備が整いました。Bluemix にアプリケーションをデプロイするということは、裏ではプロジェクトの成果物がバンドルされ、Bluemix でアプリケーションが作成され、バンドルされたアプリケーションが Bluemix に転送され、アプリケーションが起動されるということです。Bluemix アプリケーションの名前と URL は、プロジェクトの manifest.yml ファイルに通常定義されているプロパティーを使用して作成されます。フォークした既存のプロジェクトのプロパティーは、manifest.yml にすでにセットアップされています。

アプリケーションを手作業で Bluemix にデプロイするには、以下のステップに従います。

1. エディター領域の一番上にある「Run (実行)」バーを展開し、「Plus (プラス)」アイコン (+)をクリックします。

2. 「Edit Launch Configuration (起動構成の編集)」ウィンドウで、アプリケーションのデプロイ先を選択します。デフォルトでは組織としてユーザーの e-メール・アドレス、スペースとして「dev」が設定されています。これらの値はデフォルトのままで問題ありません。「SAVE(保存)」をクリックします。

3. 「Run (実行)」バーの横にあるデプロイ用アイコンをクリックします。

アプリケーションを Bluemix にデプロイするプロセスが完了すると、灰色の丸いアイコンが緑色に変わります。緑色のアイコンは、アプリケーションが Bluemix に正常にデプロイされたことを示します。

アプリケーションを試してみるために、以下のステップに従います。

1. 「Run (実行)」バーの横にある「Open the application URL (アプリケーション URL を開く)」アイコンをクリックします。これにより、アプリケーションがブラウザーの新しいタブまたは新しいウィンドウに開きます。

2. アプリケーションで、例えば「Justin Bieber」というサブジェクトを入力して、「Go (実行)」をクリックします。

3. アプリケーションが、このトピックに対する Twitter の世界での反応を分析する様子を観察します。

ibm.com/developerWorks/jp/ developerWorks®

IBM DevOps Services と Bluemix による Node.js アプリ ページ 5 / 10

Bluemix でアプリケーションを管理するには、以下のステップに従います。

1. 「Run (実行)」バーの横にある「Open application dashboard (アプリケーション・ダッシュボードを開く)」アイコンをクリックします。br

2. Bluemix でのアプリケーション設定ページが表示されます。このページを見回すと、使用中のメモリー容量などといった、アプリケーションの詳細なステータスを確認することができます。

オプション: アプリケーションを更新する試しにアプリケーションを更新して、変更を Bluemixにプッシュしてみることをお勧めします。こうすることで、多少なりとも DevOps Services エディターを探る機会になります。このエディターには、かなりの数のキーボード・ショートカットが設定されています。すべてのキーボード・ショートカットを網羅したリストは、DevOps Services エディターの「Help (ヘルプ)」メニューから表示することができます。

1. DevOps Services エディターで、app.js をクリックして開きます。2. 「Find (検索)」のキーボード・ショートカット (CTRL+F または CMD+F) を使用して

「Welcome」という単語を検索し、HTML タグ内の一部のテキストを別のテキストに変更します。

developerWorks® ibm.com/developerWorks/jp/

IBM DevOps Services と Bluemix による Node.js アプリ ページ 6 / 10

3. 「Save (保存)」のキーボード・ショートカット (CTRL+S または CMD+S) を使用して変更を保存します。

4. 「Run (実行)」バーの横にあるデプロイ用アイコンを再びクリックして、Bluemix で実行中のアプリケーションを更新します。

オプション: プロジェクトの自動デプロイを有効にする

このラボでは前に、「Run (実行)」バーの横にある「Deploy (デプロイ)」ボタンをクリックして、アプリケーションを手作業で Bluemix にプッシュしました。もう 1 つのオプションとして、Git のプロジェクトのソース管理にプッシュするごとに、アプリケーションが自動的に Bluemix にデプロイされるようにすることもできます。

自動デプロイメントを有効にするには、以下のステップに従います。

1. 「BUILD & DEPLOY (ビルドおよびデプロイ)」をクリックします。2. 「ADD STAGE (ステージの追加)」をクリックします。3. ステージの名前を「Auto deploy the Sentiment Analysis Project (センチメント分析プロジェク

トの自動デプロイ)」に変更します。4. 「INPUT (入力)」タブで、以下のオプションを選択します。

1. 「Input type (入力タイプ)」には、「SCM Repository (SCM リポジトリー)」を選択します。

2. 「Git URL」は、Git リポジトリーへのデフォルト URL のままにして構いません。3. 「Branch (ブランチ)」には、「master」を指定します。4. 「Stage trigger (ステージ・トリガー)」では、「Automatically execute jobs when a change

is pushed to Git (変更が Git にプッシュされたら自動的にジョブを実行)」を選択します。5. 「JOBS (ジョブ)」タブで、「ADD JOB (ジョブの追加)」をクリックします。

1. 「Deploy (デプロイ)」を選択します。2. デフォルト値のまま、「SAVE (保存)」をクリックします。

これで、「Deploy From (デプロイ元)」メニューで選択したブランチにコミットをプッシュするたびに、新しいデプロイメントが開始され、「Recent Auto-Deployments (最近の自動デプロイメント)」テーブルにリスト表示されるようになります。

変更を加えてプッシュする

自動デプロイメントの動作を確認するために、別の簡単な変更を加えて、その変更をリポジトリーにプッシュしてみましょう。

1. DevOps Services エディターで、app.js を開きます。2. HTML タグ内に簡単な変更を加えて、変更を保存します。3. 左側のナビゲーション・バーで、「Git Repository (Git リポジトリー)」アイコンをクリックし

ます。4. 変更が保留されているファイルが以下のように表示されます。

ibm.com/developerWorks/jp/ developerWorks®

IBM DevOps Services と Bluemix による Node.js アプリ ページ 7 / 10

5. 変更はコミットできる状態になっています。変更したファイルを選択し、変更についての説明を入力します。

6. 「Commit (コミット)」をクリックします。7. 変更は「Outgoing (送信)」セクションに表示され、Git リポジトリーにプッシュする必要が

あるので、「Push (プッシュ)」をクリックします。これにより、変更がプッシュされて、ページが更新され、保留中の変更が表示されなくなります。変更のプッシュについて詳しくは、Orion のオープンソース・ドキュメントを参照してください。

8. 「BUILD & DEPLOY (ビルドおよびデプロイ)」をクリックして、自動デプロイメント・ステータス・ページを開きます。このページで、ジョブ・ステータス、最終コミット・メッセージ、デプロイメント・ステータスを確認することができます。

9. デプロイメントが完了したら、アプリケーションを再び開いて、自動デプロイされた変更を確認します。

オプション: Bluemix Live SyncNode.js アプリケーションでは、HTML や CSS などの静的ファイルに変更を加えた後、Bluemix LiveSync フィーチャーを使用して、その変更をデプロイ済みアプリケーションに即座に組み込むことができます。さらに、コードを編集することもできますが、「Restart (再始動)」アイコンをクリックするまでは、編集内容はデプロイ済みアプリケーションに反映されません。

1. アプリケーションが実行中になっていることを確認します。

developerWorks® ibm.com/developerWorks/jp/

IBM DevOps Services と Bluemix による Node.js アプリ ページ 8 / 10

2. 「Live Edit (ライブ編集)」スイッチをオン位置に切り替えます。

アプリケーションが再デプロイされます。再デプロイメントが完了すると、「Live Edit (ライブ編集)」モードが有効になり、「Run (実行)」バーで確認されます。

3. ファイルを編集して変更を保存します。1. app.js や server.jsなどのコードを編集した場合は、「Restart (再始動)」アイコンをクリッ

クします。4. ブラウザーでアプリケーションを最新の表示に更新します。すると瞬時に、静的ファイル

(HTML ファイルや CSS ファイルなど) に加えた変更が、デプロイ済みアプリケーションに反映されます。

5. オプション: デバッグ・ツールを使用して問題のトラブルシューティングを行います。1. 「Debug (デバッグ)」アイコンをクリックします。2. 「Open Debugger (デバッガーを開く)」をクリックします。すると、新しいブラウ

ザー・タブまたはブラウザー・ウィンドウにファイルが開き、コードを扱える状態になります。

3. 作業時に問題領域を切り分けるために、デバッグ・ツールを使用してブレークポイントを作成し、コード内の変数を検査します。

まとめこのラボでは、以下の作業を行う方法を説明しました。

•  既存のプロジェクトをフォークして、DevOps Services プロジェクトを作成する•  アプリケーションを手作業および自動で Bluemix にプッシュする•  Bluemix 上でアプリケーションを管理する

その他のリソースこの単純なセンチメント分析アプリケーションのアイデアと開発方法の詳細については、developerWorks の記事「Node.js、Express、sentiment、ntwitter を使用して感情分析アプリケーションを作成する」を参照してください。

質問があるなら、(ほぼ) どんな質問でもフォーラムで私たちに聞いてください。

他にも以下のチュートリアルを参照してください。

•  「Get started with Bluemix and Bluemix DevOps Services using Node.js」•  「Working locally with Bluemix DevOps Services projects」•  「Setting up local Eclipse clients to work with Jazz source control」•  「Get started with Bluemix DevOps Services」

以下の動画もお楽しみください。

•  ホワイトボード動画: 「Using JazzHub to Deploy Applications to the Cloud」•  ホワイトボード動画: 「Developing in the Cloud, for the Cloud」

ibm.com/developerWorks/jp/ developerWorks®

IBM DevOps Services と Bluemix による Node.js アプリ ページ 9 / 10

•  Webinar: 「Develop and Deploy Software in the Cloud with JazzHub」•  Webinar: 「Code in the Cloud with JazzHub: DevOps Services for IBM Cloud Platform」

ソーシャル・メディアで Bluemix DevOps の情報を入手してください。

•  Twitter でフォローする•  Facebook で「いいね！」する

developerWorks® ibm.com/developerWorks/jp/

IBM DevOps Services と Bluemix による Node.js アプリ ページ 10 / 10

著者について

developerWorks Japan

developerWorks Japan 編集室

© Copyright IBM Corporation 2015(www.ibm.com/legal/copytrade.shtml)商標(www.ibm.com/developerworks/jp/ibm/trademarks/)