localhostにスマホから繋げてみた!!(Mac編)

3142 ワード
localhost Mac Android docker-compose Wi-Fi Android テキストリンク

どうも、三町哲平です。

ローカル環境で開発している時に開発したアプリをブラウザで確認したい。
そういう時に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からもアクセスすることが出来ました。

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