Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

準備

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

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

ちなみに 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!” と表示される。おめでとう。

さて仕事に戻らないと。

spiegel-im-spiegel
職業エンジニアは無期休業中。
https://baldanders.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした