search
LoginSignup
12

More than 1 year has passed since last update.

posted at

updated at

iPhoneからlocalhostで開発中のサイトを確認する方法

はじめに

本記事は Mac + iPhone という環境を想定しています。
Win + Android も基本的なところは共通しています。

確認事項

PCとスマホが同じネットワーク化にいることを確認する

WiFiの場合、 基本的には 同じSSIDで接続していれば同じネットワークです。

ファイアウォールの設定をOFFにする

[システム環境設定]>[セキュリティとプライバシー]>[ファイアウォール]
スクリーンショット 2019-12-04 11.06.18.png

localhostを立ち上げる

コマンドラインから開発中のディレクトリでhttpサーバーを立ち上げます。

Python2の場合

$ python -m SimpleHTTPServer

python3の場合

$ python3 -m http.server

実行例

$ python3 -m http.server                                                                                                      
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

オプションでポート番号を指定しない場合は上のように8000番を使用します。
PCからの確認はブラウザで localhost:8000 にアクセスするだけです。

参照: 開発用ローカルサーバを立ち上げる方法

スマホからアクセスする

方法①:ngrokでホスティングする(こっちの方が簡単)

brewでngrokをインストールします。

$ brew install ngrok

インストールできたら、上の手順でローカルホストを立ち上げます。
そこで使用しているポート番号を指定してngrokでのホスティングを開始します。

$ ngrok http 8000

こんな感じで立ち上がります。

ngrok by @inconshreveable                                                                             (Ctrl+C to quit)

Session Status                online
Session Expires               1 hour, 59 minutes
Update                        update available (version 2.3.38, Ctrl-U to update)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://b885d499a91a.ngrok.io -> http://localhost:3000
Forwarding                    https://b885d499a91a.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

https://b885d499a91a.ngrok.io このように発行されたURLにアクセスするとページが開けます。
スマホの場合キャッシュのクリアが面倒なので、ブラウザをプライベートモードにすることを強くお勧めします。

方法②:ローカルネットワークのIPアドレスで接続する

MacのIPアドレスを表示する

[システム環境設定]>[ネットワーク]>[詳細]>[TCP/IP]
IPv4アドレス: 192.168.11.43 がローカルネットワークにおけるこの端末のアドレスになります。
通常ローカルのIPv4アドレスは 192.168.XX.XX のような形をしています。
このアドレスは固定ではないため、ネットワークに繋ぐたびにその時のアドレスを確認するようにしてください。

スクリーンショット 2019-12-04 11.10.49.png

または ifconfig で確認する場合は

$ ifconfig en0 inet                                                                                                            
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    inet ⭐️192.168.11.43⭐️ netmask 0xffffff00 broadcast 192.168.11.255

iPhoneのブラウザからアクセス

[ローカルIPアドレス] : [ポート番号] で表示することができます。

IMG_15B724277D94-1.jpeg

スマホの場合キャッシュのクリアが面倒なので、ブラウザーのプライベートモードで確認すると捗ります。

アクセスできない場合の確認事項

  • httpサーバーを立ち上げるディレクトリは正しいですか?
  • ファイアウォールはOFFになっていますか?
  • PCとスマホは同じネットワーク下にいますか?
  • MacのIPアドレスやポート番号は最新ですか?

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
What you can do with signing up
12