windows10でbrowser-syncのExternalアドレスに接続できないのはファイアウォール設定が原因
通常は browser-sync を起動させればローカルエリアネットワーク（LAN）上のPCやスマホ・タブレットからIPアドレス経由で指定のページを表示することができる。…はずが、windows10の場合はなぜか「このサイトにはアクセスできません」となってしまう… …なぜ？？
スマホで見る
ざっくり browser-sync を説明すると、指定したファイル（主にhtmlやcss）を監視して、実行PCのみならずファイルにアクセスしてる複数の端末のブラウザの動きを同期・自動リロードしてくれる Node.js で動くツールです。
さて、ここからが本題。
※以下、サンプルに「GitHub: Node.js_bs-demo」を使用しています（今回はエラーに焦点を当てるため、細かい記述等の解説は省きます）
目次
01. どういう風にダメなのか
こうなります（LAN内のスマホからbrowser-sync起動PCの [IPアドレス]:3000 へアクセス）
ちなみに、
browser-sync を起動してあげると
設定してるファイルにブラウザから localhost:3000 or [IPアドレス]:3000 でアクセスできるようになり
本来はこのような表示になります（browser-sync起動PCのブラウザ画面）
02. LAN上のスマホからアクセスできなかった時の実行環境
- Windows10 Pro
- Node.js v8.4.0
- browser-sync v2.18.13
調べてたら browser-sync の記事は2014～2015年頃が多かった。windows10のリリース日が 2015年7月9日 だからギリギリ今の自分と同じような状態の情報が見当たらないのも頷ける。だけど割と同じような現象で困ってる人居ると思うんだけどなぁ…
03. 原因究明
- 名前： Node.js: Server-side JavaScript
- プロファイル： パブリック
- 操作： ブロック
- プログラム： [プログラムがインストールされた場所]\nodejs\node.exe
- プロトコル： TCP
色々試したけど、結果これが原因だった。
ファイアウォールのNode.jsの設定。画像はすでに対処済みの状態のキャプチャなのでNode.jsインストール初期のものとは異なるとは思うけど、重要なのは上記の情報。いくつか同じ名前のものが存在するけど、よく見ると中の条件がそれぞれ異なる。
これを「ブロック」から「許可」にすれば繋がるようになるけど、元々ブロックされてたものを全開放するのも気が引ける… なので事項で必要最低限なポートのみ解放する手順をご紹介。
04. 解決方法
手順1. ファイアウォール / 受信の規則を開く
- winkey + R ＞ firewall.cpl
- 開いたウィンドウの左側項目 詳細設定 を選択
- 開いたウィンドウの左側項目 受信の規則 を選択
手順2. 以下のNode.js規則を見つけ、プロパティのポートを変更する
- 名前： Node.js: Server-side JavaScript
- プロファイル： パブリック
- 操作： ブロック
- プログラム： [プログラムがインストールされた場所]\nodejs\node.exe
- プロトコル： TCP
画像にあるように、対象の規則のプロパティを開き、「プロトコルおよびポート」タブのローカルポートを「特定のポート / 0-2999,3002-65535」と変更、OKする。
※browser-syncの使用ポート番号がデフォルトの「3000,3001」の場合の設定
手順3. 手順2のNode.js規則をコピペして、プロパティの操作とポートを変更する
- 規則のコピー（ドラッグ＆ドロップ or 「右クリック ＞ コピー ＞ 右クリック ＞ ペースト」）
- 全般タブ ＞ 「操作 / 接続を許可する」を選択
- プロトコルおよびポートタブ ＞ 「ローカルポート / 特定のポート / 3000-3001」と変更、OK
ちゃんと「ブロック / 許可」の規則でそれぞれのポートを指定してあげるのがポイントみたい。
05. 結果
規則の設定を修正した瞬間から無事開通！やった！！
上記の設定をしなくても強行手段で browser-sync のオプション「tunnel」を用いて外部公開という手もあるけど、どうしてもLAN上で完結したい場合もあると思うので今回の方法を取りました。同じ壁にぶつかっている方のお役に立てればうれしいですm(_ _)m
