ローカル Webサーバ の比較と選択

手元の HTML / CSS / JavaScript をサクッと確認するためには ローカルWebサーバ を建てる必要があります*1。思いついたローカルWebサーバの簡易比較をしてみます。

比較項目は以下のとおりです。それぞれの項目の内容は、最低限のオプションで起動した場合の内容です。

  • 起動方法
  • ディレクトリのファイル一覧を表示できるか
  • 文字コードを指定しなくても大丈夫か*2
  • ポート番号
  • 備考

比較対象のプロダクトリスト

  • PHP のビルトインサーバ
  • serve(Dart製のWebサーバ)
  • Ruby (PORO)
  • http-server (npm)
  • serve (npm)
  • light-server (npm)
  • webpack-dev-server

PHP のビルトインサーバ

起動方法

$ php -S localhost:12345

ディレクトリのファイル一覧の表示

表示できない。

文字コード無指定でOKか

NG。

ポート番号

コマンド実行時のポート番号。

serve(Dart製のWebサーバ)

起動方法

$ serve

ディレクトリのファイル一覧の表示

表示できない。

文字コード無指定でOKか

OK。

ポート番号

8080

備考

リポジトリのアドレスは下記。

github.com

Ruby (PORO)

起動方法

$ ruby -run -e httpd . -p 54321

ディレクトリのファイル一覧の表示

表示できる。

文字コード無指定でOKか

NG。

ポート番号

コマンド実行時のポート番号。

備考

MIME タイプ が考慮されないため、たとえば .md ファイルをクリックするとダウンロードが始まる。

http-server (npm)

起動方法

npm (yarn) install した上で、$ http-server

ディレクトリのファイル一覧の表示

表示できる。

文字コード無指定でOKか

OK。

ポート番号

8080

備考

もし public/ ディレクトリが存在していれば、そこをサーバのルートディレクトリとして見に行く。

serve (npm)

起動方法

npm (yarn) install した上で、$ serve

ディレクトリのファイル一覧の表示

表示できる。

文字コード無指定でOKか

OK。

ポート番号

5000

light-server (npm)

起動方法

npm (yarn) install した上で、$ light-server -s .

ディレクトリのファイル一覧の表示

表示できる。

文字コード無指定でOKか

OK。

ポート番号

4000

webpack-dev-server

起動方法

npm (yarn) install した上で*3$ webpack-dev-server

ディレクトリのファイル一覧の表示

表示できる。

文字コード無指定でOKか

OK。

ポート番号

8080

備考

webpack.config.js や エントリポイント が存在しないとエラーが出ます。しかし、単純な Webサーバ としては動作します*4

補足

  • npm で入れられるサーバのどれかを使えばほぼ問題ない*5
  • Apache や nginx がすでにあればそれでもいいと思う
  • IDE や VS Code に組み込むものもまた良いと思う*6
  • 実行コマンドが複雑になったとしても、シェルのエイリアスや package.jsonscripts で指定すればいいだけの話なので、実行コマンドの複雑性はあまり問題にならない
  • 汎用性や発展性を考え、個人的には webpack-dev-server に統一でいきたい

*1:ファイルを直接開くことは制約が多すぎるので、現在では無いと思います

*2:生の UTF-8 の .md ファイルを開いたときに日本語が正しく表示されるか

*3:webpack、webpack-cli、webpack-dev-server の 3つ を入れる必要あり

*4:ここが webpack --watch とは異なる点

*5:内部的に同一のものもある

*6:エディタ内で Webブラウズ もできる

Powered by はてなブログ