「紙芝居」用の簡単 HTTP サーバを立てる #Node.js

Web で新規に作る画面のイメージが欲しいということで HTML でモックアップページを作ってるのですが、（ファイルを直接読み込むのはいろいろアレなので）簡単な HTTP サーバが欲しい。でも本番サーバを使うわけにはいかないので、なんか手頃なのないかなぁ、と思ったら node.js 使えばいいんじゃん、と気が付いた。

node.js で（HTML ファイルを表示するだけの）簡単な HTTP サーバを立てるのには connect パッケージを使えばいいのだが、その辺に転がってる情報はちょっと古いみたいでうまく動かなかったので、今後のためにメモしておく。

準備

node.js は 0.12 の stable が登場している。おめでとう！

そうそう。会社内とかだと firewall に阻まれてたりするので、 npm のプロキシ設定を忘れずに。

Node.js - proxy環境下でのnpm config設定 - Qiita

ちなみに registry の設定は http に変更しなくて大丈夫。

で、作業フォルダに必要なパッケージをインストールする。（言い忘れてたけど、今回は Windows 環境です。まぁどれでも関係ないけど）

C:\prototype\html>npm install connect
connect@3.3.4 node_modules\connect
├── utils-merge@1.0.0
├── parseurl@1.3.0
├── debug@2.1.1 (ms@0.6.2)
└── finalhandler@0.3.3 (escape-html@1.0.1, on-finished@2.2.0)

C:\prototype\html>npm install serve-static
serve-static@1.8.1 node_modules\serve-static
├── escape-html@1.0.1
├── utils-merge@1.0.0
├── parseurl@1.3.0
└── send@0.11.1 (destroy@1.0.3, fresh@0.2.4, ms@0.7.0, range-parser@1.0.2, depd@1.0.0, mime@1.2.11, debug@2.1.1, on-finished@2.2.0, etag@1.5.1)

アプリケーションの準備

パッケージをインストールしたフォルダにアプリケーション（今回は app.jsで。名前はご自由に）を用意する。アプリケーションの記述はこんな感じ。

app.js

var connect = require('connect');
var serveStatic = require('serve-static');
var port = 3000;
connect().use(serveStatic(__dirname)).listen(port);
console.log('Server has started at http://localhost:' + port);

同じフォルダに、動作確認用の HTML ファイルも用意しておく。

index.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

余談だが、connect および serve-static では内部で Content-Type の値を text/html; charset=utf-8 でハードコーディングしている。 node.js 標準の文字エンコーディングが UTF-8 なのでこれでいいのかもしれないが、他の文字エンコーディングの HTML ファイルでは確実に文字化けするので注意すること。きっとパッケージの中を弄れば他の文字エンコーディングにも対応できるだろうけど、ここでは踏み込まない。スマートじゃないし、どうしても他の文字エンコーディングじゃないとダメな場合は、ちゃんとしたサーバを用意したほうがいい。

アプリケーションの起動

C:\prototype\html>node app.js
Server has started at http://localhost:3000

これで簡単 HTTP サーバが起動した。これでブラウザで http://localhost:3000 にアクセスすれば “Hello World!” と表示される。おめでとう。

さて仕事に戻らないと。