目次


ブラウザーから離れることなく Node.js アプリを開発する

IBM Bluemix Live Edit、Bluemix Debugger、Bluemix シェルを使用して、クラウド内でアプリを開発、デバッグ、デプロイする

Comments

皆さんは、自分が行ったコードの変更が即座に Bluemix にデプロイされて、すべてのコードが再デプロイされるのを待つ煩わしさから解放されたいと思ったことはありませんか?あるいは、Bluemix 上で実行中の Node.js アプリをデバッグしたいと思ったことは?あるいは単に、シェルを使って Bluemix 環境を探索したいと思ったことは?

皆さんの願いは、私たちへの指令です。このチュートリアルでは、以下の機能の使い方を説明します

  • コードの変更を即座に Bluemix にデプロイするための IBM Bluemix DevOps Services の Live Edit
  • アプリをデバッグするための Bluemix Debugger
  • Bluemix 環境を参照するための Bluemix シェル

この 3 つすべての機能は、ブラウザーを離れることなく使用することができます。

アプリの概要

このチュートリアルでは、Bluemix の Personality Insights Node.js Web Starter アプリを使用します。このアプリは IBM Watson Personality Insights サービスを利用して、テキストを分析し、テキストを書いた人の性格の特徴に関する情報を引き出します。

Personality Insights アプリのスクリーンショット
Personality Insights アプリのスクリーンショット

Bluemix Debugger を使用すると、Node Inspector を使用して Node.js アプリをデバッグすることができます。

作業を開始する上で必要となるもの

  • Bluemix アカウントと Bluemix DevOps Services アカウント (両方とも IBM ID に関連付けられていること)
  • 以下のいずれかのブラウザー
    • Firefox 15 またはそれ以降のバージョン
    • Chrome 21 またはそれ以降のバージョン (: Chrome はステップ 3 で必要になります)
    • Internet Explorer 10 またはそれ以降のバージョン
    • Safari 7 またはそれ以降のバージョン

ステップ 1. アプリを作成する

何よりもまず必要なのは、Node.js アプリです。新規アプリを最も早く用意する方法の 1 つは、Bluemix ボイラープレート (サンプル・アプリ) を使用することです。

アプリを作成してデプロイする

  1. Bluemix をブラウザーで開いて (まだ認証が済んでいない場合は) ログインします。
  2. Bluemix カタログを開きます。
  3. カタログの「Boilerplates (ボイラープレート)」セクションで、「Personality Insights Node.js Web Starter」をクリックします。
  4. アプリの名前 (Bluemix 内でアプリを参照する際の名前) と、アプリのホスト (URL で mybluemix.net に先行する部分) を入力します。ホスト名はすべての Bluemix アプリの間でグローバルに一意でなければならないので、工夫した名前にしてください。
  5. 「CREATE (作成)」をクリックします。ボイラープレート・コードのコピーが新規アプリに取り込まれて Bluemix にデプロイされます。
  6. 「Start coding with Cloud Foundry command line interface (Cloud Foundry コマンド・ライン・インターフェースを使用したコーディングの開始)」ページの左ペインで「Overview (概要)」をクリックします。
  7. 「APP HEALTH (アプリの正常性)」セクションに「Your app is running (アプリは稼働しています)」というメッセージが表示されるまで待ちます。
  8. アプリが実行中になったら、経路をクリックしてアプリを開きます (経路とはアプリの URL で、通常は末尾が mybluemix.net になっています。経路はページの最上部近くに表示されます)。

アプリの詳細を探る

少し時間をとって、実行中のアプリを、その UI を使用して調べてください。Personality Insights アプリは Watson Personality Insights サービスを利用してテキストを分析し、テキストを書いた人の性格の特徴を判断します。

  1. デフォルトでは、アプリの UI に「白鯨」からのサンプル・テキストが挿入されています。「白鯨」の著者である Herman Melville の性格について Watson がどのように考えているかを調べるには、「ANALYZE (分析)」をクリックします。すると、性格の分析結果をテキスト出力したものとグラフィカルに可視化したものが表示されます。
  2. 英語のテキストを使用した好みの Web サイトのいずれかを参照し、任意のテキストのブロックをコピーします。
  3. アプリに戻り、コピーしたテキストを「Try the Service (このサービスを試す)」ボックスに貼り付け、「ANALYZE (分析)」をクリックします。
  4. 分析結果をテキスト出力した表とグラフィカルに可視化した図を確認します。

ステップ 2. Live Edit モードでアプリを更新する

Live Edit モードでアプリのソース・コードに変更を加え、デプロイ済みアプリに変更が即時に反映されていることを確認します。

Live Editの準備

  1. Personality Insights アプリの Bluemix ページに戻ります (実行中のアプリを別個のウィンドウまたはタブに表示していない場合は、アプリの経路を右クリックし、このリンクを新しいウィンドウまたはタブに開いてください)。
  2. 右上隅にある「ADD GIT (Git の追加)」をクリックします。
  3. 「Create Git Repository (Git リポジトリーの作成)」ダイアログ・ボックスで、「CONTINUE (続行)」をクリックします。これで Bluemix により、アプリのコードのコピーが、Bluemix DevOps Services でホストされる Git リポジトリーに配置されます。
  4. Git リポジトリーが正常に作成された後、「CLOSE (閉じる)」をクリックします。
  5. 右上隅にある「EDIT CODE (コードの編集)」をクリックして、DevOps Services Web IDE を開きます。
  6. 「Live Edit (ライブ編集)」オプションをオンに切り替えます。 Live Edit を有効/無効にするトグル・スイッチのスクリーンショット
  7. 再デプロイするよう促されたら、「OK」をクリックします。すると、アプリが再デプロイされて、デプロイ済みアプリにライブで変更を反映できるようになります。アプリのデプロイが完了すると、実行バーに緑色の丸が表示されます。緑色の丸が表示された実行バーのスクリーンショット

アプリのデプロイが完了した時点で、ライブ編集を開始することができます。

静的ファイルを変更する

静的ファイル (例えば、Jade または CSS ファイルなど) に変更を加えると、その変更はほぼ瞬時にデプロイ済みアプリに反映されます。

  1. 左側のナビゲーター・ビューで、views ディレクトリーを展開します。
  2. layout.jade ファイルを選択します。
  3. h2 (行 30 のあたり) を、例えば「This article is so great that I'm going to Tweet about it! (この記事は、ツイートしないわけにはいかないくらい素晴らしい記事です!)」といったテキストに変更します。行った変更は、手動で保存しなくても、Web IDE によって自動的に保存されます!
  4. 実行中のアプリが表示されているタブまたはウィンドウに切り替えて、ページを最新の表示に更新します。アプリの見出しが即時に変更されたことに注目してください。アプリが再デプロイされるまで待つ必要はありません!
  5. 他にもいくつかの変更を静的ファイルに加えて、アプリがリアルタイムで更新される様子を観察します。

Node.js モジュールに変更を加える

変更を Node.js モジュールにデプロイするには、(完全な再デプロイではなく) アプリの高速再起動を行う必要があります。というのも、サーバーはメモリー内に Node.js モジュールをキャッシュしているからです。この機能をデモンストレーションするために、デフォルト・テキストの代わりに使用する、アプリの新規テキスト・ファイルを作成します。このアプリは Node.js モジュール内のデフォルト・テキスト・ファイルを参照するため、変更が反映されていることを確認するには、アプリを再起動しなければなりません。

  1. 左ペインのナビゲーターで、アプリのルート・ディレクトリーを選択します。
  2. 「File (ファイル)」 > 「New (新規)」 > 「File (ファイル)」の順にクリックします。
  3. ファイルの名前が強調表示され、名前を変更できるようになります。「defaulttext.txt」と入力した後、キーボードで Enter キーまたは Return キーを押します。
  4. 右側のエディターで、アプリのデフォルト・テキストとして使用するテキストを入力するか、貼り付けます。
  5. 左ペインのナビゲーターで、app.js ファイルを選択します。
  6. 右側のエディターで、25 行目あたりにある dummy_text 変数を見つけて、mobydick.txtdefaulttext.txt で置き換えます。
    dummy_text = fs.readFileSync('defaulttext.txt');
  7. Web IDE の上部バーにある「Restart (再始動)」ボタンをクリックします。 「Restart (再始動)」ボタンのスクリーンショット.
  8. アプリの再起動が完了すると (ほんの 2、3 秒で完了します)、実行バーに緑色の丸が表示されます。
  9. 実行中のアプリが表示されているタブまたはウィンドウに切り替えます。ページを最新の表示に更新して、新規テキストを確認します (ブラウザーがページをキャッシュしていて、テキストの更新を確認できない場合は、アプリの URL をブラウザーで再び開くと、変更が表示されるはずです)。

ステップ 3. Bluemix Debugger でアプリをデバッグする

場合によっては、コードを調べるだけでは何が問題であるかを突き止めることができず、デバッガーを使用しなければならないことがあります。そのような場合に役立つのが、Bluemix Debugger です。Bluemix Debugger では、Node Inspector を使用して Node.js アプリをデバッグすることができます。

: Node Inspector は現在、Chrome でのみ機能します。まだ Chrome を使用していない場合は、この機会にブラウザーを変更してください。

  1. 現在、Web IDE でプロジェクトを表示していない場合は、プロジェクトの概要ページで「EDIT CODE (コードの編集)」をクリックします。
  2. Web IDE の上部バーにある「Debug (デバッグ)」ボタンをクリックします。 「Debug (デバッグ)」ボタンのスクリーンショット.
  3. 資格情報の入力を促されたら、IBM ID とパスワードを入力します。
  4. プロジェクトの Bluemix Debugger ページで、「Open Debugger (デバッガーを開く)」をクリックします。デバッガーをロードするには、約 30 秒かかります。
  5. 左側にナビゲーターが表示されていない場合は、「Show navigator (ナビゲーターを表示)」ボタンをクリックしてから、ナビゲーターで app.js ファイルを選択して開きます。 「Show navigator (ナビゲーターを表示)」ボタンのスクリーンショット
    「Show navigator (ナビゲーターを表示)」ボタンのスクリーンショット
  6. 48 行目にブレークポイントを追加するために、「48」をクリックします。 48 行目のブレークポイントを選択する操作のスクリーンショット
    48 行目のブレークポイントを選択する操作のスクリーンショット
  7. ブラウザーの別のタブまたはウィンドウで、実行中のアプリを開き、「Analyze (分析)」をクリックします。
  8. デバッガーが表示されているタブまたはウィンドウに切り替えます。ブレークポイントがヒットしたことに注目してください。右側で、コール・スタックと変数を表示することができます。また、右側にあるボタンを使用して、次の関数コールに対するステップオーバー、ステップイン、ステップアウトを操作することもできます。
  9. 実行中のアプリを調べ終わったら、右側にある「Resume script execution (スクリプト実行の再開)」ボタンをクリックします。 「Resume script execution (スクリプト実行の再開)」ボタンのスクリーンショット on the right.

Bluemix Debugger ページから、アプリの中断を選択することもできます。この場合、アプリが再起動されて、コードの最初の行で中断されます。

ステップ 4. Bluemix シェルを使用してBluemix 環境を探索する

Bluemix シェルを使用すると、組み込み bash シェルによってアプリが実行されている Bluemix 環境を調べて操作することができます。

  1. プロジェクトの Bluemix Debugger ページで、「Open Shell (シェルを開く)」をクリックします。ブラウザー内にシェル・クライアントが開きます。
  2. top コマンドを実行して、Bluemix 環境で実行中のプロセスを表示します。
  3. 「NEW WINDOW (新規ウィンドウ)」をクリックします。
  4. ログ・ファイルを調べる間、プロセスを引き続き観察できるように、新規ウィンドウをドラッグします。
  5. 新規ウィンドウで cd ../logs コマンドを実行して、ログ・ファイルが格納されているディレクトリーにカレント・ディレクトリーを変更します。
  6. ls コマンドを実行して、logs ディレクトリー内のファイルを一覧表示します。
  7. staging_task.log は logs ディレクトリー内にあることに注意してください。tail staging_task.log コマンドを実行して、ログ・ファイルの最新の 10 行を表示します。

任意のコマンドを使用して、Bluemix 環境の探索を続けることができます。

まとめ

このチュートリアルでは、Bluemix Live Edit、Bluemix Debugger、そして Bluemix シェルを使用して、デスクトップ上のツールを使う場合と同じように、クラウド内のアプリをコーディングおよびデバッグする方法を説明しました。クラウド内で Bluemix のツールを使用すれば、デスクトップにツールをセットアップする時間も煩わしさも省くことができます。しかも、開発中に Bluemix にデプロイすることで、本番アプリを Bluemix にデプロイして初めて驚くようなこともなくなります。なぜなら、開発にも本番にも同じ環境を使っているからです!


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Cloud computing
ArticleID=1007518
ArticleTitle=ブラウザーから離れることなく Node.js アプリを開発する
publish-date=06112015