localhostのローカル環境をスマホで確認する方法

PCのローカル環境で開発をしていると、表示をスマホで確認したくなると思います。サーバーにデータをアップロードするのは手間過ぎますよね。どうすれば簡単に表示を確認できるのでしょうか。

実現したいこと

• localhostのローカル環境をスマホで確認する

ReactやNext.jsをNode.jsサーバーで開発を進めている等の時にスマホで簡単に表示を確認したい。

方法

接続しているIPアドレスからスマホで表示を確認することができます。

1.PCに接続しているネットワークのIPアドレスを確認する

MacOSの場合、システム環境設定->ネットワークから接続済みのネットワーク情報を確認します。

2.スマホのブラウザのURL欄に先程のIPアドレスを入力する

必要に応じて192.xxx.xx.xx:3000等、末尾にポート情報を追記してください。

※PCとスマホは同じネットワークに接続されている必要があります。

まとめ

PCのスマホ用デバッガー上では正常に表示されていても、実際にスマホで見ると表示崩れが起きることがあったりと面倒ですよね。適宜確認していきたいと思います。。

参考：MacのlocalhostにiPhoneの実機で接続する