どれだけスマホが便利になっても、Webアプリケーションの開発はPCで行う人がほとんどでしょう。
そして多くのアプリは開発時には localhost で動作させて挙動を確認すると思います。
スマホでの挙動は、ブラウザの開発者ツールで擬似的に確認することはできますが、実機でなければ生じない問題に気づきにくいです。
この記事は、スマホの実機で localhost で動作する Webアプリにアクセスする方法を備忘録として記載します。
(一発ネタなので短文の記事です)
結論
早速結論ですが、以下の順序で確認できます。
- localhost でアプリを動作させている PC と スマホを同じWi-Fiに繋ぐ
- Wi-Fi の IPを確認する
- スマホで
http://{ip}:{port}
にアクセスする
詳細
まず、同じ Wi-Fi に繋ぐことはそう難しくないでしょう。 自宅でのリモートワークなら自然に繋いでいるケースもあると思います。
「Wi-Fi の IPを確認する」 は、ローカル IP を確認します。 「IP 確認」などで検索してヒットするサイトでは、グローバル IP が表示されるので、それではありません。 PC のネットワーク等の画面で確認できます。
例えば、macOS なら 環境設定 > ネットワーク から、Windows なら ipconfig 等のコマンドから確認可能です。
あとは、スマホでアクセスすれば表示できます。 port は開発しているアプリや技術、設定に依存するので自身のものに合わせてください。
以上、備忘録でした。
参考になれば幸いです。
コメント