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

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

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

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

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

ESETでポート開放

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

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

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

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

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

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

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

これで完了。

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

おわりに

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

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