Windows10のBrowserSyncでスマホなど外部から接続するようにする方法

Windows10でBrowseSyncをそのまま使うと、ファイヤーウォールが邪魔をしてスマホなど外部のデバイスから接続できません。

この記事では、Windows10デフォルトのファイヤーウォールで、BrowseSyncの外部接続を通す方法を紹介します。

ファイヤーウォールの設定

Windowsタスクバー左下の検索窓に「ファイヤーウォール」と検索してファイヤーウォールを開く。

詳細設定をクリック。

詳細設定画面が開きますが、狭いのでウィンドウの横幅を広くします。

「受信の規則」をクリックし、「Nodejs:Server-dide JavaScript」を探します。

「Nodejs:Server-dide JavaScript」という名前の設定は複数あるので、更に、

となっている「Nodejs:Server-dide JavaScript」を探す。(下記画像の「プロトコル」はかなり右側にあります。分かりやすいように移動させたためこの位置にあります。)

見つけた「Nodejs:Server-dide JavaScript」を右クリックし、「プロパティ」をクリック。

「全般」タブをクリックし、「有効」にチェックを入れ、「接続を許可する」を選択。

次に「プロトコルおよびポート」タブをクリックし、「ローカルポート」の「特定のポート」にBrowseSyncを実行後に表示されるポートの番号を入れて「OK」をクリック。

僕の場合は「3000」と「3001」なので「3000-3001」と設定しています。

これで上記画像に表示されているURLにスマホや他のPCからアクセスすると接続できるようになりました。

おわりに

BrowseSyncは便利なのですが、外部から接続するときに毎回ハマります。

ウィルス対策ソフトを使っている場合は、使っているウィルス対策ソフトのファイヤーウォールの設定を見直せば接続できるはずです。