【備忘録】スマホ実機での localhost の動作確認方法

どれだけスマホが便利になっても、Webアプリケーションの開発はPCで行う人がほとんどでしょう。

そして多くのアプリは開発時には localhost で動作させて挙動を確認すると思います。

スマホでの挙動は、ブラウザの開発者ツールで擬似的に確認することはできますが、実機でなければ生じない問題に気づきにくいです。

この記事は、スマホの実機で localhost で動作する Webアプリにアクセスする方法を備忘録として記載します。

（一発ネタなので短文の記事です）

結論

早速結論ですが、以下の順序で確認できます。

1. localhost でアプリを動作させている PC と スマホを同じWi-Fiに繋ぐ
2. Wi-Fi の IPを確認する
3. スマホで http://{ip}:{port} にアクセスする

詳細

まず、同じ Wi-Fi に繋ぐことはそう難しくないでしょう。 自宅でのリモートワークなら自然に繋いでいるケースもあると思います。

「Wi-Fi の IPを確認する」 は、ローカル IP を確認します。 「IP 確認」などで検索してヒットするサイトでは、グローバル IP が表示されるので、それではありません。 PC のネットワーク等の画面で確認できます。

例えば、macOS なら 環境設定 > ネットワーク から、Windows なら ipconfig 等のコマンドから確認可能です。

あとは、スマホでアクセスすれば表示できます。 port は開発しているアプリや技術、設定に依存するので自身のものに合わせてください。

以上、備忘録でした。

参考になれば幸いです。