webpack-serveで立てたサーバに外部から接続する(deprecated)

追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。

開発環境として立てたローカルサーバに、PCのIPを指定して同じネットワークの他の端末から接続したいケースがたまにあります。例えば同じWiFi経由でスマホから接続したいとかそういう場合。

「webpack-serve で立てたサーバに外部から接続させる」ためには、待ち受けのIPアドレスとポートを localhost だけではなく外部から見えるIPアドレスにバインドする必要があるのと、どのIPアドレスを用いて接続しても立てた開発サーバのコンテンツを返すようにしたいです。特に何も設定せずに webpack-serve を起動した場合、接続できるのはそのローカルサーバを立ち上げたホストからのみです。

webpackとwebpack-serveで静的なWeb環境を作る 最低限の設定は左記を参照してください。

serve関数の引数で host を指定する

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
const argv = {}
const options = { host:'0.0.0.0', config }

// host: '0.0.0.0' を利用
serve(argv, options);

これでネットワーク的に外部からサーバに接続できるようになります。

ただし、この段階では以下のようにちょっと気持ち悪いことになります。10.0.1.7 はDHCPから付与された手元のローカルネットワークのIPアドレスです。

$ curl 10.0.1.7:8080
hello
$ curl 127.0.0.1:8080
Not Found
$ curl 0.0.0.0:8080
Not Found

webpack-serve の引数 --host を指定する

serve 関数で options.host を渡すだけだと、今度は localhost とか 127.0.0.1 で動作しなくなったので、合わせて webpack-serve のコマンドライン引数でも --host 0.0.0.0 を指定するようにします。

npx webpack-serve --host 0.0.0.0

まとめ

webpack-serve で立てたサーバに外部から接続する場合には、

• serve関数呼び出し時に options.host で 0.0.0.0
• コマンドライン引数の --host で 0.0.0.0

でいいんだけど統一感ない。