🍒

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

2021/09/14に公開

 たまたまできたので共有する⚠もしかしたら環境によってできないかも？

前提として同じネットワークにいること

他の端末のプライベートアドレスが同一のネットワークで公開されてればできる？
結論をいうと、

「プライベートアドレスにポート番号付けて携帯でアクセスすれば見れる。」 です。
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