※本記事は以前書いた「Live Serverで立ち上げたサーバーにスマホからアクセスする」のLive Preview版です。
筆者の作業環境
- OS: Windows10 21H2
- エディタ: Visual Studio Code 1.68.1
- 今回利用する拡張機能: Live Preview 0.2.12
手順
- PCでつなげているネットワークと同じものにスマホをつなぐ
- プライベートIPアドレスを調べる
- Live Previewの設定「Host IP」を2で調べた値に変更する
- 「セキュリティが強化されたWindows Defenderファイアウォール」から設定を変更・ポートを開放する
- VSCodeを再起動
- Live Previewで任意のHTMLをプレビューする
- 2で調べたIPアドレス+ポート番号+ファイル名の組み合わせのURLに、スマホからアクセスする
詳細
実際にやってみて、わかりにくかった箇所を補足する。
プライベートIPアドレスを調べる
PowerShellにて下記コマンドを実行。出てきた値をコピーしておく。
(Get-NetIPAddress | ? {$_.InterfaceAlias -eq 'Wi-Fi'} | ? {$_.AddressFamily -eq 'IPv4'}).IPAddress
「セキュリティが強化されたWindows Defenderファイアウォール」から設定を変更・ポートを開放する
こちらの記事を見ながらポート開放を実施する。Live Previewのデフォルト設定ではポート番号は3000。
VSCode拡張：Live Server：Windows10でローカルネットワーク内からアクセスできるように設定
