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

[前回の記事](http://qiita.com/spiegel-im-spiegel/items/38b2e0b16ffc4f3548b3)のコメントでもっと簡単に HTTP サーバを立てる方法を教えていただいた（感謝！）ので紹介してみる。

## `http-server` パッケージを使う

node.js には `http-server` というそのものズバリなパッケージがあるそうな。

- [http-server]

```shell
C:>npm install -g http-server
C:\Users\username\AppData\Roaming\npm\http-server -> C:\Users\username\AppData\Roaming\npm\node_modules\http-server\bin\http-server
C:\Users\username\AppData\Roaming\npm\hs -> C:\Users\username\AppData\Roaming\npm\node_modules\http-server\bin\http-server
http-server@0.7.4 C:\Users\username\AppData\Roaming\npm\node_modules\http-server
├── opener@1.4.0
├── colors@1.0.3
├── portfinder@0.2.1 (mkdirp@0.0.7)
├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
├── union@0.4.4 (qs@2.3.3)
└── ecstatic@0.5.8 (mime@1.3.4, he@0.5.0, minimist@1.1.0)
```

インストールの際は `-g` オプションを付けるのをお忘れなく。このオプションがないと変な場所にインストールされる。（インストール先のフォルダに注意。そうそう、今回も Windows 環境でお送りしております）

インストールが完了すると C:\Users\username\AppData\Roaming\npm に `http-server.cmd` および `hs.cmd` が導入される（Windows 以外では `http-server` および `hs`）。 node.js が正しくインスールされていればこのフォルダにはあらかじめ PATH が通っているはず（ちなみに `http-server.cmd` と `hs.cmd` は同じコマンドで名前が違うだけである）。

なので

```shell
C:>cd C:\prototype\html
C:\prototype\html>http-server -a localhost -p 3000
Starting up http-server, serving ./ on: http://localhost:3000
Hit CTRL-C to stop the server

```

とすれば[前回](http://qiita.com/spiegel-im-spiegel/items/38b2e0b16ffc4f3548b3)と同じく `http://localhost:3000` で Web ページが見れるはずである。
あるいは明示的にフォルダを指定して

```shell
C:>http-server C:\prototype\html -a localhost -p 3000
Starting up http-server, serving C:\prototype\html on: http://localhost:3000
Hit CTRL-C to stop the server

```

としてもよい。

`http-server` の起動オプションは以下の通り

```shell
C:>http-server -h
usage: http-server [path] [options]

options:
  -p                 Port to use [8080]
  -a                 Address to use [0.0.0.0]
  -d                 Show directory listings [true]
  -i                 Display autoIndex [true]
  -e --ext           Default file extension if none supplied [none]
  -s --silent        Suppress log messages from output
  --cors             Enable CORS via the 'Access-Control-Allow-Origin' header
  -o                 Open browser window after staring the server
  -c                 Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.
                     To disable caching, use -c-1.

  -S --ssl           Enable https.
  -C --cert          Path to ssl cert file (default: cert.pem).
  -K --key           Path to ssl key file (default: key.pem).

  -h --help          Print this list and exit.
```

## `superstatic` パッケージを使う

`http-server` と似たようなパッケージで `superstatic` というのもある。

- [superstatic]

使い方は `http-server` とほぼ同じ。

```shell
C:>npm install -g http-server
C:\Users\username\AppData\Roaming\npm\superstatic -> C:\Users\username\AppData\Roaming\npm\node_modules\superstatic\bin\server
C:\Users\username\AppData\Roaming\npm\ss -> C:\Users\username\AppData\Roaming\npm\node_modules\superstatic\bin\server
superstatic@2.0.2 C:\Users\username\AppData\Roaming\npm\node_modules\superstatic
├── destroy@1.0.3
├── caseless@0.9.0
├── globject@1.0.1
├── on-headers@1.0.0
├── basic-auth-connect@1.0.0
├── firstkey@0.1.0
├── bundles@2.0.0
├── install@0.1.8
├── qs@2.3.3
├── async@0.9.0
├── on-finished@2.2.0 (ee-first@1.1.0)
├── lodash@2.4.1
├── mime-types@2.0.9 (mime-db@1.7.0)
├── clear-require@1.0.1 (resolve-from@1.0.0, caller-path@0.1.0)
├── fs-extra@0.15.0 (graceful-fs@3.0.5, jsonfile@2.0.0, rimraf@2.2.8)
├── connect-query@0.2.0 (qs@1.1.0)
├── connect@3.3.4 (parseurl@1.3.0, debug@2.1.1, utils-merge@1.0.0)
├── booly@1.0.2 (is-number@0.1.1)
├── fast-url-parser@1.1.3 (punycode@1.3.2)
├── string-length@1.0.0 (strip-ansi@2.0.1)
├── morgan@1.5.1 (basic-auth@1.0.0, depd@1.0.0, debug@2.1.1)
├── compare-semver@1.0.0 (semver@4.3.0)
├── cache-header@1.0.3 (lodash.isnumber@2.4.1, lodash.isstring@2.4.1, regular@0.1.6)
├── cache-control@1.0.3 (lodash.isnumber@2.4.1, regular@0.1.6)
├── router@1.0.0 (array-flatten@1.0.2, methods@1.1.1, utils-merge@1.0.0, parseurl@1.3.0, path-to-regexp@0.1.3, debug@2.1.1)
├── finalhandler@0.3.3 (debug@2.1.1, escape-html@1.0.1)
├── join-path@1.0.0 (is-url@1.2.0, url-join@0.0.1, as-array@0.1.2)
├── nash@1.3.1 (sorted-object@1.0.0, minimist@1.1.0, exclude@1.0.0, feedback@0.3.2, pretty-print@1.0.0, lodash@3.2.0, flat-arguments@1.0.1)
├── strip-extension@1.1.0 (zip-object@0.1.0)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
├── glob-slasher@1.0.1 (glob-slash@1.0.0, toxic@1.0.0, lodash.isobject@2.4.1)
├── as-array@1.0.0 (lodash.isarguments@2.4.1, lodash.isobject@2.4.1, lodash.values@2.4.1)
├── redirects@1.0.0 (toxic@1.0.0, lodash.isobject@2.4.1, pathematics@0.1.1)
├── serve-favicon@2.2.0 (fresh@0.2.4, ms@0.7.0, parseurl@1.3.0, etag@1.5.1)
├── send@0.11.1 (fresh@0.2.4, ms@0.7.0, range-parser@1.0.2, escape-html@1.0.1, mime@1.2.11, depd@1.0.0, debug@2.1.1, etag@1.5.1)
├── compression@1.4.1 (bytes@1.0.0, vary@1.0.0, debug@2.1.1, accepts@1.2.4, compressible@2.0.2)
├── set-headers@1.0.0 (lodash.foreach@2.4.1)
├── express@4.11.2 (utils-merge@1.0.0, methods@1.1.1, fresh@0.2.4, range-parser@1.0.2, merge-descriptors@0.0.2, escape-html@1.0.1, cookie@0.1.2, cookie-signature@1.0.5, parseurl@1.3.0, vary@1.0.0, type-is@1.5.7, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.0, media-typer@0.3.0, serve-static@1.8.1, debug@2.1.1, etag@1.5.1, accepts@1.2.4, proxy-addr@1.0.6)
├── minimatch@2.0.1 (brace-expansion@1.1.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── jfig@1.2.0 (amp-is-object@1.0.1, amp-is-string@1.0.1, lodash.find@2.4.1)
└── update-notifier@0.3.0 (is-npm@1.0.0, semver-diff@2.0.0, configstore@0.3.2, latest-version@1.0.0)

C:>cd C:\prototype\html
C:\prototype\html>superstatic --host localhost --port 3000

Superstatic started.
Visit http://localhost:3000 to view your app.
```

起動コマンドは `superstatic` または `ss` で。ドキュメント・フォルダを指定できるはずなんだけどうまくいかないなぁ...

`superstatic` は JSON 形式で設定ファイルを作って起動時に読み込ませることで細かい制御ができるらしい。まぁでもここまで来ると「簡単」じゃなくなるな（笑）

[http-server]: https://www.npmjs.com/package/http-server "http-server"
[superstatic]: https://www.npmjs.com/package/superstatic "superstatic"