PPP's Blog

雑コード帳

Live Serverで立ち上げたサーバーにスマホからアクセスする

Shibajukuさんの以下記事を参考にしました。
しかしながら、肝心のスマホでアクセスしてもサーバーへの接続でタイムアウトしてしまいます。

Visual Studio Code のLive Serverを使って実機(iPhoneなど)でプレビューする方法。

ざっくり以下の手順で進めます。
手順4でつまづきました。

  1. Live Serverの設定を変更し、ローカルIPでサーバーを立ち上げるようにする
  2. Go Liveでサーバーを立ち上げる
  3. PCでつなげているネットワークと同じものにスマホをつなぐ
  4. スマホで2のアドレスにアクセス

記事内に、おそらくつながらない理由に関してのヒントが載っています。
自分はまさしくこの部分で引っかかり、スマホでアクセスできませんでした。

あ、もしWindowsなどでセキュリティーソフトを入れている場合、ファイアウォールでアクセスを拒否されて表示されないケースもあるかもしれません。その場合は、Live Serverのポート番号を開放してからお試し下さい。

Windowsのポート開放に関しては以下記事を参考に進めます。
参考、というよりこの記事のとおりに作業をしたら無事スマホからアクセスできました。

VSCode拡張:Live Server:Windows10でローカルネットワーク内からアクセスできるように設定