webpack-dev-serverに他の端末からアクセスする

冬はプチッと鍋率が高くなってしまうフロントエンドエンジニアのザトです。

さて普段webpackを使っている方は開発用サーバーであるwebpack-dev-serverで画面を確認しながらコーディングしている方が多いのではないでしょうか。

時々、開発中に実機で確認したいというときがありますね。

わざわざサーバーにアップするのは大変なので、webpack-dev-serverに他の端末からアクセスしましょう。

ただ、webpack-dev-serverはデフォルトのホストがlocalhostになっています。

ループバックアドレスのため同一ホスト内でのアクセスしかできません。

webpack公式を見ると、ホストに0.0.0.0を指定できるようです。

webpack.config.jsに以下のように記載します。

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

0はワイルドカードのような役割をしているため、割り当てられている全てのIPアドレスを意味します。

上記のオプションでサーバーを立ち上げた後に、ホストPCに割り当てられているプライベートIPアドレス（macだとシステム環境設定>ネットワークから確認できます）を指定することで他の端末からもアクセスが可能となります。

http://0.0.0.0:8080 の0.0.0.0の部分をIPアドレスに変えてアクセスすればOKです。

プライベートIPアドレスなので、ホストPCと他の端末は同じWi-Fiに繋ぐようにしてください。

知らなかったという方はぜひ試してみてください。