経験知ロゴ

Browser-syncでExternalのアドレスにスマホからアクセスできない場合の対策

browser-symcでスマホからアクセスできない

Browser-syncを使うとiPhoneなどのスマホからもアクセスでき、しかもオートリロードまでしてくれて便利なのですが、アクセスできるはずの「External」のURLにアクセスしても表示されません。

原因は、ファイアーウォールでポートが閉じていて外部からのアクセスができないだけでした。

Browser-syncで使うポートを開けてあげれば普通にアクセスできるようになりました。

使っているファイアーウォールやセキュリティソフトによって手順は違いますが、僕が使っているESETのポート開放手順を紹介します。

ESETでポート開放

画面上部メニューのESETアイコンをクリックし、「詳細設定」をクリック。
詳細設定を開く

「ネットワーク」をクリック。
ネットワークをクリック

「フィルタリングモード」が「自動モード」担っているのを確認し、「ルール」→「追加」をクリック。
追加をクリック

ルールの名前を自分がわかりやすいようにつける。ここでは「browser-sync」とした。「次へ」をクリック。
追加をクリック

「アクション」を「許可」、「方向」を「両方」にして「次へ」をクリック。
アクションと方向

プロトコルを「TCP」、ポートを「ローカル」、ローカルポートをBrowser-Syncで使うポート番号を入れて「次へ」をクリック。
プロトコル等を設定

宛先を「ローカルネットワーク」にして「終了」をクリック。
ローカルネットワークを選択

これで完了。

ExternalのアドレスにiPhoneからアクセスできるようになりました。

おわりに

Browser-Syncを入れるとExternalアドレスにすぐにアクセスできるような記事ばかりで、解決策が見つからず困りました。

ファイアーウォールやセキュリティソフトによってポートが閉じられてアクセスできないって結構ハマると思うので、この記事が次にハマった人の助けになれば幸いです。

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから