Webサイトをコーディングしている際に必要な実機確認。
実機確認を楽に行えるツールとしてBrowserSyncがあります。
BrowserSyncを起動して、同じWifiに接続しているスマートフォンでWebサイトに接続すると、実機でWebサイトを確認できます。
しかし、同じWifiに接続しているのにスマートフォンでサイトが見えないときがある
そんな時に確認するべきポイントについてまとめました。
①本当に同じWifiに接続している？
凡ミスですが、よくあることです。
PCやスマホで同じWifiにつないでいるつもりになっていても、なっていないことがあります。
②localhostでWebサイトを表示していない？
BrowserSyncを起動すると以下のログが出ます。
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3001/
External: http://10.0.1.22:3001/
---------------------------------------
スマートフォンで閲覧するにはExternal: http://10.0.1.22:3001/でWebサイトを表示する必要があります。
③ネットワークインターフェイスの優先順位設定がどうなっているか？
Wifiが複数繋がる環境や、有線とWifiを使い分けている環境にいると、BrowserSyncが違うhostに接続してしまうことがあります。（理由はわかりませんが…）
そうなると、スマートフォンでWebサイトを確認することが出来ません。
ネットワークインターフェイスが複数あるかの確認方法
①コントロールパネルで確認する方法
コントロールパネルのネットワーク接続を開きます。
ショートカットキー：「Windows」キー + 「R」を押してファイル名を指定して実行に「ncpa.cpl」と入力すると、簡単に開けます。
上記で以下の画像のように赤い×がついていない機器が、有効になっているネットワークインターフェイスです。
②コマンドで確認する方法
ターミナルでipconfigをたたくと接続しているネットワークインターフェイスが確認できます。
以下、抜粋内容です。
Wireless LAN adapter Wi-Fi:
IPv4 アドレス . . . . . . . . . . . .: ★★★.●●.××.41
イーサネット アダプター イーサネット 4:
IPv4 アドレス . . . . . . . . . . . .: ★★★.●●.××.12
イーサネット アダプター VirtualBox Host-Only Network:
IPv4 アドレス . . . . . . . . . . . .: ★★★.●●.××.33
イーサネット アダプター イーサネット:
IPv4 アドレス . . . . . . . . . . . .: ★★★.●●.××.5
優先順位変更方法
コントロールパネルのネットワーク接続を開きます。
接続したいネットワークインターフェイスを右クリック→「プロパティ」を選択
インターネットプロトコルバージョン4(TCP/IPv4)を選択した状態で、プロパティをクリック
詳細設定をクリック
自動メトリックのチェックボックスを外し、インターフェースメトリックの値を「1」にする。
上記の作業後、再びBrowserSyncを起動すると意図通りのhostで起動することが出来ます