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

5276 ワード
SimpleHTTPServer localhost HTML Mac iPhone HTML テキストリンク

はじめに

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

確認事項

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

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

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

[システム環境設定]>[セキュリティとプライバシー]>[ファイアウォール]

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 のような形をしています。
このアドレスは固定ではないため、ネットワークに繋ぐたびにその時のアドレスを確認するようにしてください。

または 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アドレス] : [ポート番号] で表示することができます。

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

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

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