Zenn
🍒

[Tips] localhostのサイトをスマホで見る

2021/09/14に公開
Web
tech

たまたまできたので共有する

⚠もしかしたら環境によってできないかも？
前提として同じネットワークにいること
他の端末のプライベートアドレスが同一のネットワークで公開されてればできる？

結論をいうと、
「プライベートアドレスにポート番号付けて携帯でアクセスすれば見れる。」 です。

Windowsだったらプライベートアドレスはipconfigで確認できます

> ipconfig
Windows IP 構成
/// 略
Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fxxx::fxx1:70x:xxx:xxf3xx2
   IPv4 アドレス . . . . . . . . . . . .: 192.168.0.3  <- これです！
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: 192.168.0.1
/// 略

WSL使っている人はhostname -Iで出てくるIPアドレスです。（多分）
(注：WSLのIPアドレスは起動するたびに代わるのでお気をつけて）
Linuxの人はip aやら、ifconfigやら、hostname -Iで手に入ると思います。
Macは知らん。

そのアドレスに、アプリで使ってるポート番号指定するとスマホでそのまま表示が見れます。
例えばnpm startして、localhost:3000で開発しているとすると。今回は自分の場合
192.168.0.3:3000をブラウザの検索バーに入力することでスマホでそのまま表示できます。

他の人ってどうやって確認しているんでしょうか？
コメントとかでよかったら教えてください！

あとがき

いままで、開発者ツールのみを信じてスマホ表示を確認していたのですが（勿論ここで確認できるのは表示の大きさとかだけでしょうけど）、最終的なsa〇〇riだとかの表示に悩まされていました。
今回のやり方だと、他のツールとか使わなくていいので楽でした！

スマホのSafariで試して、たまたま気づいたのですがコード編集して保存すると、PCと同じくスマホの表示もホットリロードされました。（React appで確認)

是非試してみてください

Discussion