PCでは見えるのにiPhoneでは見えない。犯人はファイアウォールだった

サーバーは正常、PCでは見える、スマホだけ見えない

先に結論を書く。この組み合わせが出たら、まずWindowsファイアウォールを疑うといい。

自分はそこに辿り着くまでに、まったく関係ない方向で一回詰まっている。以下はその記録。

スマホで見ないと意味がない

サイトを作っている途中で、スマホでの見た目を確認したくなった。

読みに来る人の大半はスマホのはずである。PCの画面だけで整えても意味が薄い。というわけで、手元のiPhoneで、PC上で動いているAstroのdevサーバーを開くことにした。

結論から言うと、たどり着くまでに2回詰まった。どちらもAstroのせいではなかった。

詰まりその1：Pythonが入っていなかった

最初は「ビルドした dist/ を適当なWebサーバーで配ればいい」と考えた。そして昔からの癖で、これを打った。

python -m http.server

返ってきたのは「Pythonが見つかりません」。

このPCにPythonを入れていなかった。 Windowsだと python と打つとMicrosoft Storeが開くだけのスタブが反応することもあって、当然サーバーは立たない。

考えてみればAstroのプロジェクトなので、Node.jsで完結させればよかった。npm run preview でも npx serve dist でも足りる。手癖で関係ないものを呼び出していただけだった。

詰まりその2：--host にしたのに、つながらない

そこで npm run dev -- --host に切り替えた。

ターミナルには Network: http://192.168.x.x:4321 と出る。PCのブラウザでは開ける。ここまでは順調である。

ところがiPhoneのSafariからは、いつまで待っても開かない。 タイムアウトするだけで、エラーの手がかりもない。

一番厄介だったのはここで、PCの中からは localhost で普通に見えていることだった。サーバーは動いている。設定も合っているように見える。なのにスマホだけ届かない。何を疑えばいいのかが分からなかった。

犯人はWindowsファイアウォールだった

原因は、Windowsファイアウォールだった。

devサーバーを初めて --host で立てたとき、Windowsが「このアプリの通信を許可しますか」というダイアログを出していたはずである。それを閉じていた。

その結果、Node.jsのプライベートネットワークの受信がブロックされ続けていた。localhostは通るので、PCの中からは何の問題もなく見える。ブロックされていることに気づく手がかりが、どこにもない。

心当たりがまったくない。ダイアログを閉じた記憶すらない。

解決手順

1. 設定 → Windows セキュリティ → ファイアウォールとネットワーク保護 →「ファイアウォールによるアプリケーションの許可」を開く
2. 一覧から Node.js（Node.js JavaScript Runtime） を探し、プライベートにチェックを入れる
3. npm run dev -- --host を立て直し、iPhoneのSafariで http://192.168.x.x:4321 を開く

これで表示された。

ついでに、トップページのFIG.1（監督の写真）がスマホ幅でも崩れていないことも、このとき確認できた。

次回のチェックリスト

iPhoneで実機確認するとき、上から順に。

• PCとiPhoneが同じWi-Fiにいるか（ゲスト用SSIDに分かれていないか）
• npm run dev -- --host で起動したか（--host を忘れると localhost のみ）
• ターミナルに Network のURLが出ているか
• WindowsファイアウォールでNode.jsのプライベートが許可されているか
• URLはIPアドレス+:4321 か（httpsではなくhttp）

まとめ：Astroは何も悪くなかった

2回詰まって、2回ともAstroの外側が原因だった。片方は手癖で関係ないコマンドを打ったこと、もう片方は自分で閉じたダイアログである。

手順はREADMEにも書いたので、次からは詰まらない予定である。「予定」と書いたのは、ファイアウォールの許可はNode.jsのバージョンを変えると再度聞かれることがあるらしいからで、そのときはこのチェックリストに戻ってくる。

なお監督（ビビンバ）は、原因調査中にモニタの前を2回横切った以外、関与していない。