はじめに

こんにちわ！エヌズクリエイツ開発チームの本田です。

突然ですが、開発中のWebアプリのiPhoneの挙動を確認したい時、毎回開発サーバに挙げて実機でアクセス、なんてやり方をするエンジニアが世の中にはたくさんいるのではないでしょうか。あるいは、シミュレータでlocalhostを確認して、検証完了、としてしまう方もいるのではないでしょうか。

両方間違いです。開発サーバにわざわざ挙げるなんて時間がもったいないです。シュミレータは実機と同じ挙動を再現しないことがあります。（特にCSS周り）
そこで、実機iPhoneからMacのlocalhostにアクセスする方法を今回は取り上げます。

ということで、早速手順を公開します。

前提条件

まず、

・MacとiPhoneが同じWifiに接続していること

・MacとiPhoneを有線接続していること

この2つが今回紹介する手法の前提になります。

手順1 ビルド時のHOSTの指定

HOST=0.0.0.0 npm run build

または

HOST=0.0.0.0 yarn dev

のようにビルド時に、ホストはここだよ、と指定してあげます。

手順2 MacのIPアドレスを調べる

CUIで調べるのであれば

ifconfig

を打つか

GUIであれば

システム設定 > Wifi > 詳細

からMacのIPアドレスを特定します。

手順3 iPhoneからURLにアクセス

[手順2で調べたIPアドレス]:[アプリのポート番号]

にアクセスすることによって、Macのlocalhostと同じアプリにアクセスできます。

まとめ

今回は、開発効率を上げるための、iPhoneで開発途中のプログラムを開く方法をご紹介しました！紹介した方法以外にも、やり方はあります。（あまりセキュリティ的におすすめしない方法であれば）

何かの参考になっていれば幸いです！それでは