localhostをiPhoneで確認する方法

こんにちは、スペースマーケットのWebエンジニアのShotaです。
今回はlocalhostをiPhoneなど別のデバイスで確認する方法をご紹介します。

方法

以下の手順で開発中のPCのローカルサーバー(今回はポート3000番)に別のデバイスからアクセスします。

1. ローカルサーバーが起動しているか確認する
   http://localhost:3000/を開発中のPCで開けることを確認します。
   開けない場合はローカルサーバーを起動しましょう。
   Next.jsを使用している場合のコマンド

next dev -H 0.0.0.0

2. Macのターミナルで以下を入力

ipconfig getifaddr en0

出力例

xxx.xxx.xxx.xxx

ここで表示されるIPアドレスは、同じWi-Fiに接続している他のデバイスから見たMacの住所のようなものです。

3. 以下のリンクを別のデバイスで開く

http://xxx.xxx.xxx.xxx:3000/ # http://<2の出力>:3000/

何をしているのか

ipconfig getifaddr en0について

このコマンドは、Macのネットワークインターフェースen0に割り当てられたローカルIPアドレスを取得するためのものです。

項目	説明
ipconfig	macOSのネットワーク設定情報を扱うコマンド
getifaddr	特定のネットワーク機器に割り当てられているIPアドレスを取得するサブコマンド
en0	macOSやUnix系OSで使われるネットワークインターフェース名の一つ。通常はWi-Fi接続に対応。 有線LAN接続の場合は en1 や en2 などになることがあります。

繋がらない場合

iPhoneとMacが同じWi-Fiネットワークに接続されていない

MacはWi-Fi接続だがiPhoneは4G回線になっていた

Macのファイアウォールが外部からの接続をブロックしていないか確認

ファイアウォールは一時的にOFFにしましょう

作業が終わったらONに戻しておきましょう

サーバーを0.0.0.0でバインドしているか確認

サーバーのバインドアドレスを確認するコマンド

lsof -iTCP -sTCP:LISTEN -n -P | grep 3000

出力例

...TCP *:3000 (LISTEN)

...*:3000 (LISTEN)と表示されていれば、0.0.0.0でバインドされている状態です。
全てのIPアドレスから接続を受け付けている状態です

VPN接続中の場合、ローカルネットワークが無効になることがある

VPNに接続していると、ローカルネットワークが分断されて別のネットワークとして扱われることがあります

まとめ

開発中のWebサイトを実機で確認することで、レスポンシブ対応やSafari特有の表示崩れをチェックできます。
シミュレーターでは気づきにくい問題にも対応でき、仮想環境へのデプロイも不要なため、効率よく検証できます。