BrowsersyncのExternalURLで、他のPCやスマホで動作確認するときの設定[ ESET Cyber Security Pro]

ローカルで動作確認するときに他のPCやスマホでも動作確認したいときに思うように表示されない場合はセキュリティソフトが原因かも。

CSSやPHPを編集したら自動でブラウザをリロードしてくれるBrowsersyncが便利です。

Browsersyncを起動すると以下のようなアクセスURLが表示されます。

[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.101:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------

Browsersyncを起動しているPCではLocalのURL、同じLANで繋いでいるその他の端末ではExternalURLにアクセスすると同じ画面が表示され、ファイルを編集すると同じようにリロードされます。

スマホなどの動作確認にはとても便利

でも他の端末からこのExternalURLにアクセスできない場合は、セキュリティソフトが原因の場合があります。（私はそうでした）

セキュリティソフト（私の場合はESET）でポートを解放する必要があります。

ESETでBrowsersyncのポートを解放する手順

メニューバーにあるESETのアイコンをクリックし、

「詳細設定」

を選択

詳細設定のメニューから「ネットワーク」を選択

ネットワークウィンドウが表示されます。

フィルタリングモードは「自動モード」で「ルール」になっていることを確認し、「追加」をクリックする

アプリケーション/サービスでは自分のわかりやすい名前を入力します。今回は「Browsersync」と入力し「次へ」

アクション/方向ウィンドウ。

アクション：許可
方向：両方

を選択し「次へ」

プロトコル/ポートウィンドウ。

プロトコル：TCP

ポート：ローカル
ローカルポート：3000

と選択、入力し「次へ」

宛先ウィンドウ

宛先：ローカルネットワーク

以上で終了です。