忘備録：ローカルで立ち上げてるページをスマホの実機で確認する方法

ブラウザの開発ツールやsimulatorじゃ事足りない！

実機じゃないとぶち当たらないバグに遭遇してしまった〜〜という時、
わざわざ検証環境に修正中のものあげて確認したり、
バグ確認用のメッセージを仕込んで検証環境に上げるのは良くないですよね？？🤔

そんな時！ローカルで立ち上げてるものを実機で確認できる方法、あります！！

環境は以下

• MacBook Pro (macOS Monterey 12.5)
• iPhone SE 2GE (IOS 15.6)

確認方法

※1 ~ 5まではPCで作業、6,7はスマホで作業です！

1. まず、ローカルのサーバ立ち上げます。
2. terminalを開いて、プライベートIPアドレスを取得します(以下コマンド実行で表示されます)
   (ifconfigで探すでも良いのですが、いっぱい出てきて探すの大変なので、以下で....えいや！)

   networksetup -getinfo Wi-Fi | grep "^IP address:"
   

   以下のように返ってきたら、それがプラインベートIPアドレスですmm

   IP address: 192.168.1.111
   

3. 先程取得したプライベートIPアドレスの最後に、今ローカルで立ち上げてるサーバーのポートをくっつけます
   (著者は3000で立ち上げてるので3000と入れてます)

   192.168.1.111:3000
   

4. これをブラウザに貼り付けて、Cannot GET /と帰ってきたらOK
   
5. そしたら以下のような感じで、手順の3で記載したアドレスの後ろに、表示したいページのパスをくっつける

   192.168.1.111:3000/hoge/hogefuga/index.html
   

6. 確認に使いたいスマホ端末をPCと同じWIFIにつなぎます
7. 手順5のURLをスマホのブラウザで貼り付ける

これで完了です！きっとこれで見れてるはず！
教えてくださった先輩に本当に感謝🙇‍♀️

参考

macOS で自分のプライベート IP アドレスを見つける方法