localhostをスマホからアクセスする方法(同じWiFi環境の場合)

ローカルで Web の開発中にスマホで確認したい場合やローカル画面を多数の人に簡単に見てもらいたい場合どうすればいいのって時に便利な方法を紹介します。

同じWiFi環境内であればおそらくこの方法が一番簡単だと思います。

localhostについて

localhostはPCのIPアドレス「xxx.xxx.x.xx」に対応のホスト名です。

接続する手順

1. PCと接続したいスマホを同じWiFi環境に設定する
2. PCのIPアドレスを確認する(Macの場合:システム環境設定=>ネットワーク)
3. localhostを起動
4. スマホ・PCで「 http://xxx.xxx.x.xx:8080/ 」にアクセス(「8080」はポート番号)

これで見ることができます。

IPアドレスを確認する方法

ターミナル上で「ifconfig」を実行することでネットワーク環境を確認することができ、「inet」もしくは「192.」と文字列を検索してIPアドレスを確認できます。
※Macの場合：システム環境設定=>ネットワークで確認できます。(画像の赤い四角部分)