webpack-dev-serverで立ち上げたMacのローカルサーバーにiPhoneからアクセスを可能にする

2094 ワード
MacBook webpack webpack-dev-server iPhone iPhone テキストリンク

はじめに

趣味でWEBアプリを開発中している時、
今までローカルではMacBookのブラウザのみでのチェックをしていて、
iPhoneからの確認はグローバルサーバーにアップしてから確認をしていました。

でも、iPhoneで確認しながら微調整をしたい場合、
いちいちアップして修正してみたいの繰り返すのは大変なので、
ローカルからiPhoneで確認できる方法を調べました。

ネットにて色々先人の方々が指南してくれていたのですが、
私が今回サーバーを立ち上げていたwebpack-dev-serverを考慮したやり方はパッと見つからなかったので、まとめておきます。

前提条件

MacBookとiPhoneは同一ネットワーク（Wi-Fi）内に接続してください。

MacBook側の操作

まず、MacBookのIPアドレスを確認します。
MacBookのIPアドレスは「システム環境設定」→「ネットワーク」で確認することができます。

上図の赤線が引いてあることに記載されています。

今回は仮にIPアドレスが「192.168.10.1」ということにして以下進めていきます。

確認したIPアドレスをpackage.jsonに追記します。

package.json
"scripts": {
    "start": "webpack && webpack-dev-server --mode development --host 192.168.10.1",

この状態でnpm startを叩くと、
デフォルトでは

Project is running at http://localhost:8080/

となっていたところが、

Project is running at http://192.168.10.1:8080/

という表記に変わります。

以上で、MacBook側の操作は終了です！

iPhone側の操作

safariやGoogle Chrome等のブラウザを開き、URLの部分に
http://192.168.10.1:8080
と入力します。

以上で、iPhone側の操作は終了です！

私はこれで接続することができました！
以上です！