さくらたんどっとびーず » express http://sakuratan.biz モロモロ工事中です Sun, 25 Jun 2023 12:51:51 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル http://sakuratan.biz/archives/3101 http://sakuratan.biz/archives/3101#comments Sun, 16 Jan 2011 15:52:14 +0000 さくら http://sakuratan.biz/?p=3101 (続きを読む)]]> 2011年はサーバサイド JavaScript の年！
サーバサイド JavaScript の本命は node.js！

node.js

ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。

チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。

結構長文になっちゃったので、先に目次置いときます。

  1. node.js のインストール
  2. npm (Node Package Manager) のインストール
  3. express フレームワークの簡単な使い方
  4. ejs テンプレートエンジンを express フレームワークで使う方法
  5. node.js 用 MySQL モジュールの使用例
  6. 自作モジュールの作成例

チュートリアルを一通り試せば簡単なウェブアプリなら作れるようになるかもしんないので、お暇な方はどうぞ。

あとチュートリアルで作ったソースを固めた ZIP も置いときますので、ソース見た方がはえーって人は ZIP からどうぞ。

nodejs-urlshortener.zip

（2011/1/18 21:20）ちろっと正規表現が変だったようで一ヶ所直して ZIP をうpり直しました。
×　/^\/([0-9A-Z]{5,}$)$/
○　/^\/([0-9A-Z]{5,})$/
修正前の正規表現でもちゃんと動いてるので機能的にバグってる訳ではないようですが、Typo ですし $)$ は変な感じです(*´・ω・)(・ω・｀*)ﾈｰ

node.js のインストール

とりあえず node.js が無ければ話が始まらないのでとっととインスコしていきます。

node.js のアーカイブは公式サイトのダウンロードから配布されています。2011年1月10日時点では安定版としてバージョン 0.2.6、開発版としてバージョン 0.3.4 のアーカイブが配布されています。

今んところ開発中の機能が使いたい訳でも無いので安定版をインストールすることにしました。開発版を使う場合はアーカイブのソースを使うよりも、github の node.js のリポジトリからソースを持ってきた方が良いと思います。

node.js が動く環境ですが公式サイトによると Linux、Macintosh、Solaris でテストされているということです。また Windows/Cygwin、FreeBSD、OpenBSD でもだいたい動くとのことです。

さくらの VPS の CentOS と MacBook にインスコしてみたのですが、どちらもインストール作業自体はあっさり簡単に終わりました。インストールする前に必要になるライブラリとかが若干違いますので OS 別にインストール方法を説明します。

CentOS の場合

CentOS の場合、node.js をインストールする前に OpenSSL と Python が必要になります。Python を yum 以外の方法でインストールする場合はバージョン 2.4 以降をインストールしてください。

$ yum install openssl-devel
$ yum install python

OpenSSL と Python がインストールできたら ビルド方法の説明 に従って node.js をインストールします。make install は root で実行してください。

$ tar xvzf node-v0.2.6.tar.gz
$ cd node-v0.2.6
$ ./configure
$ make
$ sudo make install

ビルド／インストールはすぐ終わると思います。

インストールが完了すると /usr/local/bin/node に node.js のバイナリがインストールされます。インストール先を変更したい場合は configure 実行時に –prefix=DIR オプションを指定してください。その他のビルド／インストールオプションについては、configure –help で参照してください。

Mac OS X の場合

Mac OS X の場合、コンパイルするのに GNU C コンパイラ (GCC) が必要になります。GCC は Xcode からインストールするのが良いと思います。Xcode のインストール方法は このページ等を参考にしてください。（ポックンの MacBook、iPhone の SDK 入れたときに Xcode 入れちゃったので、インストール手順覚えとらんので説明できんとです。サーセン）

Mac OS X には Python は元からインストールされていますので Xcode 以外のインストールは不要です。

node.js のビルド／インストールは、CentOS の場合と同じように configure / make で行います。

$ tar xvzf node-v0.2.6.tar.gz
$ cd node-v0.2.6
$ ./configure
$ make
$ sudo make install

node.js には Mac OS X 用パッケージを作るためのスクリプトが tools/osx-dist.sh に用意されているのですが、後述する npm と設定が一致していないため使わない方が良いと思います。

npm (Node Package Manager) のインストール

npm (Node Package Manager) は node.js の CPAN みたいなもので外部モジュールのインストールに使います。

npm のインストール用スクリプトが http://npmjs.org/install.sh にありますので、ダウンロードして実行します。

$ curl http://npmjs.org/install.sh | sh

ただまあこれ、そのまま一般ユーザーで動かすとディレクトリにパーミッションが無いエラーで異常終了します。

node.js と同じ /usr/local 以下にファイルを置こうとしてるので当然と言えば当然ですが、npm 自体がこの辺の仕様を固めきっていないみたいですのでアレコレ…

どこから説明したら良いものか悩みますが、npm のリポジトリには誰でもパッケージをアップロードできるので、root で npm をインストールする環境だとセキュリティホールになるようなパッケージもアップロードできたりしちゃうのですが、npm の作者さん的には誰でもパッケージメンテナになれる状態を保っておきたいので、npm 自体や npm パッケージを root 権限でインストールしない方がいいよ、ということらしいです。自分で書いてて変な日本語ww

isaacs / npm に root 権限なしでインストールする方法が何個か説明されてますが、ポックン的にはリスクは把握しましたし、Your own risk とか *NIX だと割と当たり前なんで sudo でインスコすることにしました。

$ curl http://npmjs.org/install.sh | sudo sh

心配な人は isaacs / npm に従って root 権限なしでインスコするか、https://gist.github.com/579814 の説明に従って ~/local とかに npm をインスコするのが良いと思います。

なお npm を sudo でインスコした場合、npm でパッケージをインスコする際も root で実行する必要があります。root でパッケージをインスコすると npm がワーニングを出しますがとりあえず無視です。

あとこの辺は、もうじき仕組みが変わる予定だそうです。変わった後でこのブログ見た人は上の説明を無視してください。

It is on the roadmap to make npm do a bunch of chown/setuid stuff when sudoed, so eventually it’ll actually be safer to run as root than as a user account, but that’s a refactor that is slowly progressing.
https://github.com/isaacs/npm

モジュールのインストール

npm がインスコできたらモジュールをインスコしていきます。

今回のチュートリアルでは、node-mysql (MySQL)、express (express フレームワーク)、ejs (テンプレートエンジン) を使います。

モジュールのインストールは npm install コマンドで行います。npm を sudo でインスコした場合は、npm install は root で実行してください。

$ npm install mysql
$ npm install express
$ npm install ejs

あと mysql モジュールをインストールする前に MySQL 本体をインスコしておいてください。本筋と関係無いので MySQL のインスコ方法は省略します。

node.js を試してみる

インストールが終わったら早速 node.js を動かしてみます。

最初は node.js 公式サイトのサンプルコードを動かしてみます。このサンプルはウェブサーバを起動し、HTTP 経由のアクセスに対して Hello World を返します。

// モジュールの読み込み
var http = require('http');

// サーバを起動する
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

↑のソースをコピペして適当なディレクトリに example.js として保存します。ターミナルから node コマンドを実行して node.js を起動します。

$ node example.js
Server running at http://127.0.0.1:8124

Server running … メッセージが出力されていれば起動に成功しています。ブラウザや wget / curl 等で http://127.0.0.1:8124 にアクセスすると HTTP レスポンスが返されます。

$ curl http://127.0.0.1:8124
Hello World

ファイルを読み込んで表示

上の Node.js のサンプルではプログラムから直接コンテンツを出力していましたが、メンテとかめんどそうなのでファイルからコンテンツを読み込んで出力するように改造します。

ファイル入出力には fs モジュールを使います。fs モジュールは Node.js 本体に含まれています。

fs.readFile 関数を使い index.html を読み込み出力するように改造した example.js です。

// fsモジュールも読み込む
var http = require('http'),
    fs = require('fs');

http.createServer(function(req, res) {
    // index.html を読み込んで表示
    fs.readFile('index.html', function(err, content) {
        if (err) {
            throw err;
        }
        res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
        res.end(content);
    });
}).listen(8192, '127.0.0.1');

index.html の中身はこんな感じで、JavaScript と同じディレクトリに置きます。

<!doctype HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>URL shortener by Node.js</title>
  </head>

  <body>
    <h1>URL shortener by Node.js</h1>
    <form method="POST" action="/">
      Enter URL: <input type="text" name="url" size="50" maxlength="256">
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

両方できたら先ほどと同じようにサーバを起動します。

$ node example.js

非同期 I/O

node.js でプログラムを書く場合、入出力は基本的に非同期 I/O を使います。上の例では fs.readFile を使用していますが、readFile はファイルの読み込みを完了するとエラーとファイルの中身を引数にコールバック関数を呼び出します。

fs.readFile('index.html', function(err, content) {
    // 読み込み完了時に呼び出される
});

コールバック関数の引数には、読み込み成功時は null と読み込んだコンテンツが、失敗時はそのまま例外送出可能なエラーオブジェクトが渡されます。

非同期 I/O とは I/O 関数呼び出し時にブロッキングしないことを意味します。上と似たようなコードを PHP で書くと以下のようになりますが、file_get_contents はコンテンツの読み込みが完了するまでプロセスの実行をブロッキングします。

$content = file_get_contents('index.html');

Apache などのマルチプロセス（マルチスレッド）サーバでは、複数のプロセスでリクエスト応答を行います。サーバプロセス上で実行されるスクリプトでブロッキングが発生すると、そのプロセスの実行は単純に中断されます。中断中は他のサーバプロセスが他のリクエストの応答を行います。

一方 node.js はシングルプロセスウェブサーバですので、I/O 要求等によるブロッキングが発生するとサーバ全体の動作が中断してしまいます。もちろんそれではサーバとして用を成さないので、非同期 I/O を使って I/O 要求を発生時に別の実行可能な処理へサーバの処理を切り替えます。

Apache 上で普通の（同期 I/O を使った）スクリプトを書く方が簡単そうですが（実際に簡単ですけど）、node.js が注目された背景には C10k 問題 があり、10000 (10k) を超えるクライアント接続に従来の（マルチプロセス／マルチスレッド型）ウェブサーバでは耐えられなくなってきたので、単一プロセス非同期 I/O ウェブサーバが必要とされている現状があります。

node.js というとサーバサイド JavaScript により学習コストの低下を期待する向きもあると思いますが、（非同期 I/O を使ってる関係で）ちょっとしたコーディングミスがサーバ全体の性能に影響を与える場合もありますのでプログラミングには注意が必要です。

express フレームワークを使う

小難しい話はこの辺にして、node.js 本体に含まれるモジュールだけでコーディングしているとソースが長ったらしくなるので、express フレームワークを使うようにソースを書き換えます。

先ほどまで全然説明していませんでしたが、モジュールの読み込みには require 関数を使います。require はモジュールオブジェクトを返します。モジュールオブジェクトは変数に代入して使用するのが一般的です。

express フレームワークでは、express.createServer でサーバオブジェクトを作成し、サーバオブジェクトの get メソッド等で URL マッパを設定します。以下の例ではサーバルート (/) へのリクエストに対し、sendfile でファイルの中身をレスポンスします。（上の例と同じ処理です。）

以下が修正したソースです。ついでにファイル名も変えます。server.js として保存してください。

// モジュールの読み込み
var express = require('express');

// サーバを作成
var app = express.createServer();

// '/' のリクエストハンドラ
app.get('/', function(req, res) {
    res.sendfile('index.html');
});

// サーバを起動
app.listen(8124, '127.0.0.1');

POST パラメータの処理と ejs テンプレート

index.html からは HTTP POST でフォームデータを送信しますので、そのリクエストハンドラを記述していきます。

express で POST メソッドのリクエストハンドラを記述する場合、サーバオブジェクトの post メソッドで URL マッパを設定します。

HTTP 経由で受け取ったパラメータは、POST の場合は req.body にオブジェクトとして渡されます。あらかじめ app.use(express.bodyDecoder()) を呼び出しておかないと POST パラメータは処理してくれないので注意してください。

あとこのチュートリアルでは使ってませんが、URL の QueryString （PHP の $_GET） は req.query に渡されます。

また HTML コンテンツにデータを埋め込むため、ejs テンプレートエンジンを使用するように変更します。ejs の 他に Jade、Haml、CoffeeKup、jQuery Templates などのテンプレートエンジンも express と連動可能です。

// ejs モジュールも読み込む
var express = require('express'),
    ejs = require('ejs');

var app = express.createServer();

// bodyDecoder を指定しないと express が POST パラメータを処理してくれない
app.use(express.bodyDecoder());

// app.render('*.ejs') は ejs テンプレートエンジンで処理させる
app.register('.ejs', ejs);

app.get('/', function(req, res) {
    // ejs テンプレートエンジンでレンダリング
    res.render('index.ejs');
});

app.post('/', function(req, res) {
    // req.body に POST パラメータがセットされるので
    // そのままテンプレートに渡す
    res.render('result.ejs', {
        locals: { message: req.body.url }
    });
});

app.listen(8124, '127.0.0.1');

テンプレートファイルは views サブディレクトリに配置します。views サブディレクトリにはページレイアウトを定義する layout.ejs が必要です。

<!doctype HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>URL shortener by Node.js</title>
  </head>

  <body>
    <h1>URL shortener by Node.js</h1>
    <%- body %>
  </body>
</html>

views/index.ejs には先ほどの index.html の form 部分を記述します。

<form method="POST" action="/">
  Enter URL: <input type="text" name="url" size="50" maxlength="256">
  <input type="submit" value="Submit">
</form>

views/result.ejs には message 置換変数を配置します。

<p><%= message %></p>

ejs では <%= varname %> が html エスケープ付きのテンプレート変数出力、<%- varname %> がエスケープなしの変数出力です。<% code %> で JavaScript コードを直接記述することもできます。詳しくは https://github.com/visionmedia/ejs をご覧ください。

MySQL との連動

今回のウェブアプリではテーブル短縮 URL 変換用テーブルをデータベースに保持します。テーブル定義はこんな感じです。

mysql コマンド等で予めデータベースに作成します。

CREATE TABLE shorten_urls
(id             BIGINT PRIMARY KEY AUTO_INCREMENT,
 long_url       VARCHAR(256) UNIQUE NOT NULL COLLATE utf8_bin);

node.js から MySQL データベースへ問い合わせを行うには、mysql モジュールの Client ライブラリを使用します。データベース問い合わせも I/O ですので非同期です。

以下が最終的に完成した短縮 URL ウェブアプリケーションプログラムです。base62 モジュールについては後述します。

// サーバのアドレスとポート
var HOSTNAME = 'localhost';
var PORT = 8124;

// MySQL データベース名、ユーザー名、パスワード
var DBNAME = 'nodejs_url_shortener';
var DBUSER = 'root';
var DBPASSWD = null;

var sys = require('sys'),
    express = require('express'),
    ejs = require('ejs'),
    Client = require('mysql').Client,
    base62 = require('./base62');

// MySQLデータベースに接続しcallbackを呼び出す
function mysql(callback) {
    var client = new Client();
    client.database = DBNAME;
    client.user = DBUSER;
    client.password = DBPASSWD;

    client.connect(function(err) {
        if (err) {
            throw err;
        }
        callback(client);
    });
}

var app = express.createServer();
app.use(express.bodyDecoder());
app.register('.ejs', ejs);

// ルート GET
app.get('/', function(req, res) {
    res.render('index.ejs');
});

// ルート POST
app.post('/', function(req, res) {
    // テンプレート変数
    var locals = {
        error: null,
        short_url: null
    };

    // パラメータをチェック
    if (!req.body.url) {
        locals.error = 'Missing url parameter';
    }  else if (req.body.url > 256) {
        locals.error = 'url parameter too long';
    }
    if (locals.error) {
        res.render('result.ejs', {
            locals: locals
        });
        return;
    }

    // idを短縮URLに変換して出力
    function render_short_url(id) {
        locals.short_url = 'http://' + HOSTNAME;
        if (PORT != 80) {
            locals.short_url += ':' + PORT;
        }
        locals.short_url += '/' + base62.int_to_base62_string(id);
        res.render('result.ejs', {
            locals: locals
        });
    }

    // データベースに短縮URLを登録して表示
    mysql(function(client) {
        client.query(
            'INSERT INTO shorten_urls (long_url) VALUES (?)',
            [req.body.url],
            function(err, results) {
                // キー重複は無視
                if (err && err.number != Client.ERROR_DUP_ENTRY) {
                    client.end();
                    throw err;
                }

                // インサート成功
                if (!err) {
                    render_short_url(results.insertId);
                    return;
                }

                // インサート失敗時はlong_urlをキーで検索する
                client.query(
                    'SELECT id FROM shorten_urls WHERE long_url = ?',
                    [req.body.url],
                    function(err, results, fields) {
                        if (err) {
                            client.end();
                            throw err;
                        }
                        if (results.length == 0) {
                            client.end();
                            throw new Error('Something wrong');
                        }
                        client.end();
                        render_short_url(results[0].id);
                    }
                );
            }
        );
    });
});

// 短縮URLをリダイレクト
app.get(/^\/([0-9A-Z]{5,})$/, function(req, res) {
    mysql(function(client) {
        // idからurlを検索してリダイレクト
        client.query(
            'SELECT long_url FROM shorten_urls WHERE id = ?',
            [base62.base62_string_to_int(req.params[0])],
            function(err, results, fields) {
                if (err) {
                    client.end();
                    throw err;
                }
                client.end();

                if (results.length == 0) {
                    // データが無い
                    res.send('Not Found', 404);
                } else {
                    res.redirect(results[0].long_url);
                }
            }
        );
    });
});

app.listen(PORT, HOSTNAME);

短縮 URL を展開する際、URL に埋め込まれた ID を正規表現でパースして req.params 経由で受け取ります。この辺は express の機能を使ってますので、詳しくは express のマニュアルの Routing の項をご覧ください。

コードの修正が終わったら、result.ejs はエラーメッセージも埋め込めるように少し修正します。

<% if (error) { %>
  <p><%= error %></p>
<% } else { %>
  <p>Short url is <a href="<%= short_url %>"><%= short_url %></a></p>
<% } %>

ejs テンプレートエンジンでは、<% %> 内に JavaScript のコードをそのまま記述できます。

mysql モジュールの使い方

MySQL データベースへの問い合わせは、mysql モジュールの Client クラスを使用して行います。

データベース問い合わせも I/O ですので非同期で実行します。データベース接続やクエリが完了した際に実行される処理をコールバック関数で指定します。

var Client = require('mysql').Client;
var client = new Client();

// 接続先データベースを指定
client.database = 'DB';
client.user = 'USER';
client.password = 'PASSWORD';

// データベースへ接続する
client.connect(function(err) {
    if (err) throw err;

    // クエリを実行する
    client.query("SELECT * FROM T WHERE var = ?", [var], function(err, results, fields) {
        if (err) throw err;
    });
});

connect メソッドのコールバック関数には、接続成功時は null が、失敗時は例外送出可能なエラーオブジェクトが渡されます。

query メソッドの引数は SQL、バインド変数、コールバック関数です。バインド変数とコールバック関数はそれぞれ省略可能ですので、以下のコードはすべて有効です。

client.query("SQL");
client.query("SQL", [var]);
client.query("SQL", function(err, results, fields) { });

query メソッドのコールバック関数の引数は、SQL が SELECT の場合は function(err, results, fields) となります。SELECT 以外の場合は function(err, fields) です。

SELECT の場合も SELECT 以外の場合も、err には SQL 実行成功時 は null が、失敗時は例外送出可能なエラーオブジェクトが渡されます。

results は SELECT された列の配列です。配列の要素は列名をキーに持つオブジェクトです。SELECT 時の fields には SELECT された列定義が返されます。

SELECT 以外の場合、fields には affectedRows や insertId など SQL の実行結果を表す情報が渡されます。

MySQL モジュールの API の詳細については、https://github.com/felixge/node-mysql をご覧ください。

非同期コードでの例外処理

非同期で実行される箇所で例外を送出する場合は注意が必要です。このように単純に例外を送出するとサーバが終了します。

client.query("sql...", function(err, results, fields) {
    if (err) throw err;
    // ...
});

サーバを終了させずにユーザーにエラーを表示する場合は、例外ではなく普通にコンテンツを表示します。

client.query("sql...", function(err, results, fields) {
    if (err) {
        res.send('Not Found', 404);
        return;
    }
    // ...
});

express には例外送出によりエラー出力をフックするための仕組みが app.error() として用意されていますが、非同期部分から例外を送出してもこの仕組みで補足されませんので例外によらず直接エラー出力を行う必要があるようです。

自作モジュール

完成したウェブアプリケーションでは、短縮 URL の id 部分に、base62 の数値を 0-9a-zA-Z で文字列表現するモジュールを使用していますが、このモジュールは自作したものです。（機能的に分けただけで npm からインスコできる形のモジュールではありません。）

自作モジュールのロードも require で行いますが、モジュール名に ./ を付けて require(‘./base62′) とすることでモジュール検索パスを無効にしています。

モジュールは普通の JavaScript ファイルとして作成します。require では拡張子を省略していますので、base62 モジュールのファイル名は base62.js です。

モジュールから外部へエクスポートするシンボルは、exports の要素にします。base62 モジュールでは int_to_base62_string と base62_string_to_int 関数をエクスポートします。

var base62_map = [],
    int_map = {};

var x = 0;

for (var i = 0; i < 10; ++i) {
    var s = String(i);
    base62_map.push(s);
    int_map[s] = x++;
}

var a = 'a'.charCodeAt(0);
for (var i = 0; i < 26; ++i) {
    var s = String.fromCharCode(a + i);
    base62_map.push(s);
    int_map[s] = x++;
}

var A = 'A'.charCodeAt(0);
for (var i = 0; i < 26; ++i) {
    var s = String.fromCharCode(A + i);
    base62_map.push(s);
    int_map[s] = x++;
}

exports.int_to_base62_string = function(num) {
    var ret = '';
    while (num > 0) {
        ret = base62_map[num % 62] + ret;
        num = parseInt(num / 62);
    }
    var head = '';
    for (var n = 5 - ret.length; n > 0; --n) {
        head += '0';
    }
    if (head) {
        ret = head + ret;
    }
    return ret;
}

exports.base62_string_to_int = function(str) {
    var ret = 0;
    for (var i = 0; i < str.length; ++i) {
        var s = str.substr(i, 1);
        ret *= 62;
        ret += int_map[s];
    }
    return ret;
}

アプリを動かしてみる

完成したので短縮URLウェブアプリを動かしてみます。

$ node server.js

サーバが起動したらブラウザで http://localhost:8124 にアクセスします。

URL Shortener

短縮したい URL を入力して submit を押すと URL が短縮されます。

URL Shortener

そのまま短縮された URL をクリックすると元の URL にリダイレクトします。

google

チュートリアルは以上です。

最近の流行りは XMLHttpRequest や jsonp とか使った Facebook の BigPipe みたいな感じのウェブアプリだと思いますので、上で作ったようなちょいと古めのウェブアプリを node.js で作りたいかと聞かれたら答えは明らかに NO ですが、node.js の仕組みを覚えるにはこんな感じの簡単なものから入るのがよろしいんじゃないかと思います。

個人的には今のところ node.js を使う予定はありませんが、どうせ覚えるなら早めの方がよろしいんじゃないでしょうか。

んでわ

P.S. ずっと Node.js だと思い込んでたもんで最初先頭大文字で表記してたんですが、よく見りゃ node.js だったので後から直しました。キャプチャとかソース中の表記は直すのめんどいんで Node.js のままにしてます。サーセン

]]> http://sakuratan.biz/archives/3101/feed 1033