どうも、三町哲平です。
ローカル環境で開発している時に開発したアプリをブラウザで確認したい。
そういう時にlocalhostにアクセスするじゃないですか！
その時、自分のスマホで見るとどういう風なデザインになるのだろうという疑問が生まれますよね。
でも、パソコンから開いたlocalhostに別の機器でアクセスってどうやるんでしょう？
難しく思う方もいるかも知れませんが、実はすごい簡単です！
なので今回は、MacBookで起動したlocalhostにAndroidスマホとiPad、WindowsPCの３点からアクセスしてみます。
それでは、順を追っていきましょう！！
1. Wi-Fi環境を同じにする
まず最初にMacBook、Androidスマホ、iPad、WindowsPCを同じWi-Fi環境に接続してください。
今回は、Air-WiFi_0OXPYNに接続しています。
2. MacBookのIPアドレスを確認する。
MacBookの システム環境設定=>ネットワーク を開きます。
Air-WiFi_0OXPYN1に接続されていることを確認したら、
赤線部分のIPアドレスをメモやコピーしておきます。
今回の場合は、
192.168.43.160です。
3. localhostを起動する
今回は、ターミナルで、
$ docker-compose up
を使用して、docker-composeで、localhostを起動します。
ポート番号は、3000番です。
4. MacBookでlocalhost:3000にアクセス
無事、ページが表示されました。
5. その他の機器で試す
※MacBookからは今回の場合、localhost:3000とブラウザのURLに入力することで、表示されますが、その他機器では、192.168.43.160:3000と入力します。
Androidスマホ
iPad
WindowsPC
このように、同じWi-Fiに接続することにより、Macで起動したloclhostにAndroidスマホとiPad、WindowsPCからもアクセスすることが出来ました。