目次


初めての Node.js Webサイトを構築する、第 1 回

Comments

私の 9 歳になる息子が、彼にとって初めてのアプリケーションを作成するのを手伝って欲しいと言ってきました。そこで私は、データベースに保管された情報を表示する 2、3 の Web ページを作成することにしました。私は長年、コードの作成から遠ざかっていましたが、この単純な Web サイトを作成するのは、どれくらい難しいことになるのでしょう?

私たちは、各種の教育的な Web サイトや本を調べました。そして、コンピューターの中が取り散らかることから本当はインストールしたくなかった数多くのソフトウェアをインストールしましたが、Web サイトを作成するのがこんなにも大変とは、とても信じることができませんでした。

そこで、IBM Bluemix を試してみることにしました。サンプル・アプリケーションを実行させるのは簡単でしたが、結局は、理解できなかった一連のコードを苦労して読んで、アプリケーションを開発するために必要なソフトウェアをさらにインストールしなければならないということがわかりました。― これでは、9 歳の子供に何も指導することはできません。

Bluemix への愛着が生まれたのは、IBM DevOps Services の Web IDE を見つけた日です。この IDE では、アプリケーションを編集し、それを Bluemix にプッシュして、アプリケーションを実行することができます。しかも、追加でインストールしなければならないソフトウェアは 1 つもありません。もちろん、Bluemix を Eclipse などのローカル開発環境や、Bluemix のコマンドラインとともに使用することもできますが、新しいことに取り掛かってすぐに試すには DevOps Services の Web IDE が最適です。

それでも最初は HTML ページを表示できさえすれば良かったのですが、Bluemix の Node.js Web スターターには、古き良き時代の HTML のようなものが見当たりません。データベースとの連携に関しては、Bluemix のサンプル ToDo アプリケーションでは大袈裟すぎます。

そこで思い付いたのが、この全 3 回からなる連載記事です。この連載では、必要最小限のアプリケーションを出発点に、Node.js を使用して、ステップバイステップで動的な Web サイトを構築していきます。連載を通して、何かをインストールする必要は一切ありません。この第 1 回では、単純なリクエストを処理するために Node.js サーバーを立ち上げる方法を説明します。まずは、昔ながらの Hello World サンプルから始めて、サーバー・サイドのカウンターを追加しました。皆さんが自分で使用するには、このアプリケーションのコピーを作成して、Bluemix にデプロイした後、コードに変更を加えてその効果を確かめます。

この Node.js アプリケーションは、複数のブラウザーからのリクエストに対応して、それぞれのリクエストのカウントを記録します。

アプリケーションのフロー図
アプリケーションのフロー図

第 2 回では Express フレームワークを追加するとともに、HTML ページのフォーマット設定と、HTML ページに表示するために Node.js サーバーから渡されるデータを追加します。第 3 回では、Redis データベースを使用して、Web サイトで表示するデータを永続化する方法を説明します。

必要になるもの

お約束したように、何もインストールする必要はありません。必要なのは、以下の 2 つだけです。

アプリを実行するコードを入手する

ステップ 1: Node.js アプリケーションをコピーする

  1. DevOps Services にログインします。
  2. この記事の、ここより少し前にある「コードを入手する」ボタンをクリックしてから、DevOps Services で「FORK PROJECT (プロジェクトのフォーク)」ボタンをクリックし、自分用のコードのコピーを作成します。プロジェクトの名前には、固有の名前を入力して、「CREATE (作成)」ボタンをクリックします。
  3. 「EDIT CODE (コードの編集)」ボタンをクリックして、このアプリケーションでの作業を開始します。

ステップ 2: アプリケーションを手作業でデプロイする

DevOps Services から Bluemix にデプロイするプロセスには、manifest.yml ファイルが使用されます。皆さんが使用するプロジェクトでは、このファイルの内容はすべてセットアップされているので、ファイルに変更を加える必要はありません。manifest.yml 内の行 runtime: node08 は、デプロイメント・プロセスに対し、Bluemix Node.js ランタイムを使用するように指示します。host: の値 ${random-word} は、皆さんが行うデプロイメントが他のデプロイメントと競合しないよう、皆さんのアプリケーションに対して一意の URL を生成します。

DevOps Services では、アプリケーションを Bluemix に手作業でデプロイする方法と、自動的にデプロイする方法の両方を用意しています。ここでは、手作業でデプロイする方法を使用します。

  1. DevOps Services の IDE で、「DEPLOY (デプロイ)」ボタンをクリックします。IDE メニューの「DEPLOY (デプロイ)」ボタンのスクリーンショット
    IDE メニューの「DEPLOY (デプロイ)」ボタンのスクリーンショット
  2. デプロイメントが完了するまで待ちます。緑色で塗りつぶされた丸と「(running: normal) ((実行中: 正常))」という表示は、デプロイメントに成功したことを示しています。緑色で塗りつぶされた丸が表示された、手作業によるデプロイメントの情報のスクリーンショット
    緑色で塗りつぶされた丸が表示された、手作業によるデプロイメントの情報のスクリーンショット

    デプロイメントに問題が発生した場合には、ログを表示すれば、トラブルシューティングを行うことができます。
  3. NodeJS_Simple_1 リンクをクリックすると、実行中のアプリケーションが別のブラウザー・タブに表示されます。ブラウザーに表示されているページを最新表示に更新し、更新のたびにカウンターがインクリメントされることを確認します。(ブラウザーによっては、最初はカウンターが 1 より多くインクリメントされる場合があります。)

ステップ 3: アプリケーションを管理する

DevOps Services から、Bluemix デプロイメントを開始、停止するなどの管理作業を行うことができます。

  1. Bluemix 内のアプリケーションを管理するために、DevOps Services の中で以下に示す「application dashboard (アプリケーション・ダッシュボード)」リンクをクリックします。停止ボタンと手作業によるデプロイメントの情報が表示されている画面のスクリーンショット
    停止ボタンと手作業によるデプロイメントの情報が表示されている画面のスクリーンショット
  2. Bluemix ダッシュボードの該当するアプリケーションの概要ページで、「STOP (停止)」ボタンをクリックします。
  3. 「START (開始)」ボタンをクリックします。
  4. 「Route (経路)」の横にあるリンクをクリックし、別のタブでアプリケーションを再度開きます。カウンターがリセットされていることに注目してください。カウンターがリセットされたのは、このアプリケーションはステートレスであるため、アプリケーションの再起動時にはどのデータも保持されていないからです (データの保持についは、第 3 回で説明します)。

その他の管理機能には、Bluemix ダッシュボード・インターフェースからアクセスすることができます。

ステップ 4: アプリケーションに変更を加える

  1. DevOps Services IDE に戻り、app.js をクリックしてアプリケーションの Node.js コードを表示します。
  2. res.write('Hello from Ruth\n'); となっている行で、Ruth を自分の名前に変更します。
  3. ステップ 2 と同じ方法でアプリケーションをデプロイし、ブラウザーでアプリケーションを開きます。変更したテキストがページに反映されていることを確認します。
  4. DevOps Services の app.js に戻ります。var userCount = 0 の下に、userbytwo という新しい変数を追加して、この変数を 0 に初期化します。
  5. userCount をインクリメントする行の下に、userbytwo を 2 ずつインクリメントする行を追加します。
    userbytwo = userbytwo + 2;
  6. userCount の write ステートメントをコピー・アンド・ペーストして、userbytwo を出力するように変更します。
    res.write('We can also count by two. We have had '+userbytwo+ visits!\n');

    以上の作業を終えると、app.js コードのサブセクションは以下のようになります。
    var userCount = 0;
    var userbytwo = 0; /* added the var definition for new variable, userbytwo here */
    
    /**
     * This is the function that handles incoming requests
    **/
    var serverHandler = function(req,res) {
         userCount++;
         userbytwo = userbytwo + 2;  
         /* added the incrementing by two for your new variable, userbytwo here */    
         res.write('Hello from yourname\n');     /* edit this line to say your name */
         res.write('We have had '+userCount+' visits!\n');
         res.write('We can also count by two. We have had '+userbytwo+' visits!\n');
         res.end('Good Bye');
    };
  7. アプリケーションをデプロイし、URL リンクを使用して、そのアプリケーションを開きます。
  8. カウンターが 2 ずつインクリメントすることを確認します。

第 1 回のまとめ

この第 1 回では、ステップバイステップで Node.js サーバーを立ち上げました。これで、第 2 回に進んで、静的ページとサーバーからの動的コンテンツの両方を使用した Web フロントエンドを追加する準備ができました。サイトのデータをデータベースに保管する方法は、第 3 回で説明します。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Cloud computing
ArticleID=982103
ArticleTitle=初めての Node.js Webサイトを構築する、第 1 回
publish-date=05072015