目次


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

Comments

この記事は、ソフトウェアのインストール不要の Node.js 開発をステップバイステップで紹介する、全 3 回からなる連載記事の第 3 回です。第 1 回第 2 回では、IBM DevOps Services と IBM Bluemix を使用して Web サーバーを立ち上げ、単純な HTML フロントエンドを作成し、サーバーから送られてくるデータを取得してブラウザーに渡すようにしました。残る作業は、データをデータベースに保持することのみです。

Bluemix には、インストールや管理が不要の、すぐに利用できる素晴らしいデータベース・サービスが用意されています。例えば、カウンターを保管する場合、リレーショナル・データベースや NoSQL (MongoDBCloudantRedis) など、数々の選択肢がありました。

Redis サービスのライフサイクルはアプリケーションとは独立しています。したがって、このサービスに保管されたデータは、アプリケーションが何度再起動されても保持されます。

このサンプル・アプリケーションでデータを保管するのは、Bluemix によって管理される、独立した Redis サービスです。このサービスのライフサイクルは、アプリケーションのライフサイクルとは独立しているため、このサービスに保管されたデータは、アプリケーションが何度再起動されても保持されます。

Bluemix サービスにアクセスするには、コードでのセットアップがかなり必要になりますが、皆さんは、Redis サービスのすべてがあらかじめセットアップされているスターター・プロジェクトを使用します。この新しいアプリケーションのフローは、以下のとおりです。

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

必要となるもの

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

ステップ 1: HTML データベース・アプリケーションのコピーを作成してデプロイする

  1. DevOps Services にログインします。
  2. この記事の、ここより少し前にある「コードを入手する」ボタンをクリックします。
  3. DevOps Services で「FORK PROJECT (プロジェクトのフォーク)」ボタンをクリックし、自分用のコードのコピーを作成します。プロジェクトの名前には、固有の名前を入力して、「CREATE (作成)」ボタンをクリックします。「EDIT CODE (コードの編集)」ボタンをクリックして、このアプリケーションでの作業を開始します。
  4. 関連するファイルにざっと目を通してください。
    • package.json には、Redis の依存関係として "redis": "*" が追加されていることに注意してください。
    • manifest.yml に、Redis サービスを作成するための仕様が含まれています。
        services:
          redis-5a659:
            label: redis
            provider: core
            version: '2.6'
            plan: 100
    • app.jsで redis を検索して、Redis サービスとのインターフェースに加えられたすべての変更を確認します。
  5. これまでの全 2 回の記事と同じプロセスに従って、アプリケーションをデプロイします。
  6. 実行中のアプリケーションには、2 つのユーザー・カウントが表示されます。これらのユーザー・カウントは、いずれも 1 から始まります。一方のユーザー・カウントは Node.js サーバーに保管されていて (第 2 回で構成済み)、もう一方の新しいカウントは、データベースに保管されています。
  7. ブラウザーのページを最新の表示に更新し、更新のたびにカウントがインクリメントされることを確認します。現時点 (最初のデプロイメント後) では、サーバー内のユーザー・カウントとデータベース内のユーザー・カウントは同一の状態になっています。

ステップ 2: 再起動の前後でデータベースのデータが保持されていることを確認する

  1. アプリケーションを管理するために、Bluemix のアプリケーション・ダッシュボードにアクセスします。 DevOps Service の実行バーにあるアプリケーション・ダッシュボードへのリンクのスクリーンショット
    DevOps Service の実行バーにあるアプリケーション・ダッシュボードへのリンクのスクリーンショット
  2. アプリケーション・ダッシュボードで、「STOP (停止)」ボタンをクリックします。アプリケーションが停止したら、「RESTART (再始動)」ボタンをクリックします。 「RESTART (再始動)」ボタンが表示された、手作業によるデプロイメントの情報のスクリーンショット
  3. 「Routes (経路)」のリンクに従って、再起動されたアプリケーションへリンクバックします。Node.js アプリケーション内のユーザー・カウントは 1 にリセットされている一方、データベース内のカウントは、アプリケーションを停止して再起動する前にページに表示されていた数値からインクリメントされていることに注目してください。こうしたことが起こるのは、Redis サービスのライフサイクルが Node.js アプリケーションとは独立しているためです。

ステップ 3: Bluemix 上で Redis サービスを操作する

Bluemix ダッシュボードを使用して、Bluemix サービスを直接操作します。

  1. 右上のほうにある歯車の形をしたボタンをクリックし、「Delete App (アプリケーションの削除)」をクリックします。
  2. 「Are you sure... (操作を続けますか…)」ダイアログ・ボックスで、Redis サービス (redis-5a659) を削除するためのチェック・ボックスを選択し、「OK」をクリックします。アプリケーションと一緒にサービスを削除することで、アプリケーションが再起動されても存続していたデータベース・カウンターが削除されます。
  3. DevOps Services に戻り、横向き三角形のボタンを使用してアプリケーションを再デプロイします。Redis サービスは削除したので、この再デプロイメントによって、サービスの新しいインスタンスが作成されます。
  4. 実行中のアプリケーションをブラウズして、Redis データベースに保管されているユーザー・カウントも 1 にリセットされていることを確認します。

ステップ 4: データベースにデータを追加する

今度は、2 ずつインクリメントされるカウンターが Redis サービスに保管されて HTML ページに表示されるように、コードを更新します。Redis サービスに対する呼び出しは非同期で行われるため、適切な順序で呼び出しが行われるように、ネストされた構造に新しい呼び出しを挿入する必要があります (別の方法として、明示的な非同期ライブラリーを追加することもできますが、その方法についてはこの記事では取り上げません)。

  1. app.js を開いて、client.incrby の行を見つけます。このステートメントは Redis 内の DBuserCountBy1 変数をインクリメントしてから、その更新された値を replyBy1 変数で返します。
  2. データベース変数 DBuserCount2 を 2 ずつインクリメントして、その値を replyBy2 として返す行を追加します。
    client.incrby("DBuserCountBy2", 2, function (err, replyBy2);

    Redis に対する呼び出しが同期されるように、このステーメントは DBuserCountBy1 のインクリメントの中にネストする必要があります。
    client.incrby("DBuserCountBy1", 1, function (err, replyBy1) { 
       client.incrby("DBuserCountBy2", 2, function (err, replyBy2) {

    閉じ括弧 }); も忘れずに追加してください。
  3. res.render ステートメントを更新して、Redis 関数コールから replyBy2 変数で返される DBuserCountby2 を渡すようにします。
    res.render('index', {userCount: userCount, DBuserCountBy1: replyBy1, DBuserCountBy2: replyBy2});

    以上の変更が完了すると、コードの app.get セクションは以下のようになります。
    app.get('/', function(req, res) {
      userCount = userCount + 1;
      // Increment the value in the database and render the results
      client.incrby("DBuserCountBy1", 1, function (err, replyBy1) {
       client.incrby("DBuserCountBy2", 2, function (err, replyBy2) {
        res.render('index', {userCount: userCount, DBuserCountBy1: replyBy1, DBuserCountBy2: replyBy2});
        });
      });
    });
  4. index.ejs HTML ページを更新して、DbuserCountBy2 にレンダリングするようにします。
    <p>The stored user count by two in my redis database is <%= DBuserCountBy2 %></p>.
  5. アプリケーションを再デプロイして、すべてのカウントが期待通りに動作していることを確認します。

まとめ

この全 3 回からなる連載記事では、ステップバイステップで、Node.js サーバーを立ち上げ、静的ページとサーバーからの動的コンテンツを使用する Web フロントエンドを追加した後、動的データがデータベースに保管されるようにしました。Redis データベース・サービスのライフサイクルがアプリケーションのライフサイクルから独立していると、アプリケーションが停止された後で起動されてもユーザー・カウントが存続できる仕組みを理解できたはずです。このサンプル・アプリケーションは、終始、Web ブラウザーで DevOps Services と Bluemix にアクセスして処理が行われるため、何かをインストールする必要は一切ありません。

謝辞

この記事を執筆する際に被害を被った子供は一人もいませんが、数名の子供たちが、テクノロジーを利用する側から独自のテクノロジーを作成する側に成長することを要求されました。初心者として記事の作成に協力してくれた、私の息子 Tucker、そして Carolyn Norton 氏と彼女の息子 Patrick に感謝いたします。また、私に Node.js を指導してくれた Mike McKay 氏と Patrick Mueller 氏に感謝の言葉を贈ります。


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


関連トピック


コメント

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

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