24
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-07

どうも、三町哲平です。

ローカル環境で開発している時に開発したアプリをブラウザで確認したい。
そういう時にlocalhostにアクセスするじゃないですか!

その時、__自分のスマホで見るとどういう風なデザインになるのだろう__という疑問が生まれますよね。
でも、パソコンから開いたlocalhostに別の機器でアクセスってどうやるんでしょう?
難しく思う方もいるかも知れませんが、実はすごい簡単です!

なので今回は、MacBookで起動したlocalhostにAndroidスマホとiPad、WindowsPCの3点からアクセスしてみます。

それでは、順を追っていきましょう!!

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番__です。
スクリーンショット 2020-09-07 2.42.24.png

4. MacBookでlocalhost:3000にアクセス

スクリーンショット 2020-09-07 2.47.54.png

無事、ページが表示されました。

5. その他の機器で試す

※MacBookからは今回の場合、__localhost:3000__とブラウザのURLに入力することで、表示されますが、その他機器では、__192.168.43.160:3000__と入力します。

Androidスマホ

iPad

WindowsPC

キャプチャ.PNG

このように、同じWi-Fiに接続することにより、Macで起動したloclhostにAndroidスマホとiPad、WindowsPCからもアクセスすることが出来ました。

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

24
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?