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

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

More than 5 years have passed since last update.

前回の記事のコメントでもっと簡単に HTTP サーバを立てる方法を教えていただいた(感謝!)ので紹介してみる。

http-server パッケージを使う

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

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.cmdhs.cmd は同じコマンドで名前が違うだけである)。

なので

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://localhost:3000 で Web ページが見れるはずである。
あるいは明示的にフォルダを指定して

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 の起動オプションは以下の通り

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 というのもある。

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

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 形式で設定ファイルを作って起動時に読み込ませることで細かい制御ができるらしい。まぁでもここまで来ると「簡単」じゃなくなるな(笑)

spiegel-im-spiegel
職業エンジニアは無期休業中。 Qiita はめっきり読み専になってます。
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