Jestyをただの静的HTTPサーバーして動かす＋muslでシングルバイナリにもしてみる

概要

Jestyの無駄遣い。

きっかけはVue.js

Webpackに依存しないVue.jsを使ったフロントアプリって作れないのかを調べていたところ、以下の記事を発見。

Vue.jsのコンポーネントを*.vueではなくJavaScriptで記述して、type="module" や import を利用して、Vueコンポーネントを動的にロードできますよという記事でした。

<script type="module" src="xxx.js"></script>

記事内においては、npmのbrowser-syncパッケージを用いて、nodeでサーバーを立てて説明をしています。
ここで思ったのが、Webpack使わないっていう記事なのに、Node.jsは使うの？という疑問。
Node.jsは嫌いってわけでもないのですが、「Httpサーバー立てるだけだろ。Pythonのワンライナーでいんじゃね？」
と思い、以下のような感じでHTTPサーバー立ててみたところ、

# for python 2.x
python -m SimpleHTTPServer 9000

# for python 3.x
python -m http.server 9000

type="module" のファイル読み込みがブロッキングされる現象が発生。
ただし、Chromeのシークレットモードだとブロッキングされないという謎現象も発生。
Python側のシングルスレッドとかの動作？でうまく行かないんだろうなーと原因追求は特にせず、なんかちゃんとした軽いHTTPサーバー無いかなと探したところ、あるじゃんNimに。Jesterが。

Jesterを見てみると

Jesterを見てみるとpublicフォルダというのを用意すれば、その配下のファイルを静的ファイルとして提供できると。
またstaticDir()関数で設定をオーバライドできるよともあったので、アプリケーション実行時のフォルダをstaticDirで設定してしまえば、Pythonでのワンライナーと同じ動作させられそう。

# publicフォルダの中を公開
$ ls public
hogehoge.html

$ curl http://localhost:xxxx/hogehoge.html

という感じで、作ってみたのはこちら。

# インストール
$ git clone https://github.com/6in/simple-http.git
$ cd simple-http
$ nimble install

# httpコマンドが~/.nimble/binに作成
$ http --help
Usage:
  http --port=<port> [--root=<root>]
  http (-h | --help)
  http --version

結局のところ、jester起動時のオプションに、静的フォルダのパスを渡せば良いみたいだったので、こんな感じに。

  let settings = newSettings(
    Port(port), root
  )
  var myJester = initJester(settings)

httpコマンドは、ポートとルートディレクトリ(デフォルトはカレント)を指定して実行します。

最初の記事に戻って、サンプルをcloneし作成したhttpコマンド(笑)で動かしてみる

$ git clone https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack.git nowebpack
$ cd nowebpack
$ http --port=8181 --root=src

出た！

Muslでシングルバイナリにもしてみる

linux限定ですが、nimbleにmuslタスクを追加しています。Muslの記事で構築済みの前提です。
simple-httpをcloneしたフォルダで、muslタスクを実行するとbinフォルダにhttpコマンドが作成されます。

$ nimble musl
...
Created binary: bin/http

# lddコマンドで確認
ldd bin/http                                                                                                                                                            [master]
        動的実行ファイルではありません

$ bin/http --port=8182 --root=src

# nowebpackフォルダに移動
$ cd ../nowebpack

# 作成したシングルバイナリを指定して、別ポートで実行
$ simple-http/bin/http --port=8182 --root=src 

出た！！

まとめ

まったく俺得でしかないhttpコマンドをjesterを利用して作ることができました。
どのLinuxディストリビューションでも動きそう？なシングルバイナリも作ることができました。
Webpackを使わないVue.jsのアプリの作りを調べていたら、なぜかhttpサーバーを作っていたという『ヤクの毛刈り』のような話でした。

Vue.jsはどうしたかっていうと、WebPackで開発することにしました。