【環境】 OS X 10.11.4 Charles 3.11.4 iOS 9.3

✨ この記事では、Mac で起動している Vagrant サーバの Web サイトに iPhone からアクセスするための方法を紹介します。Vagrant を使用せずに、Mac のローカルホストにスマホから接続することもできます。

前提

Mac と iPhone が同一 Wi-Fi 上でネットワーク接続されていること

準備

Charles をダウンロードします。以下のサイトにアクセスしてDOWNLOADボタンを押して、お使いの環境に合わせてダウンロードしてください。 Charles

ダウンロードが完了したら Charles を起動します。初回に何回かダイアログが出ますが、すべて肯定するボタンを押していけばOKです。

Mac 側の設定

Wi-Fi に接続します。
Charles の画面上部のメニューバーから Proxy -> Proxy Settings... を選び、HTTP Proxy 欄の Port を確認します。デフォルトでは8888になっていますが、変更したい場合は他と競合しないようなポート (1024〜65535) を各自で設定してください。
Mac の IP アドレスを確認します。システム環境設定 アプリを起動し、ネットワークをクリックします。Wi-Fi タブに Mac の IP アドレスが書かれているのでそれをメモします。

iPhone 側の設定

Mac と同じく Wi-Fi に接続します。接続する Wi-Fi は、Mac と同じでなければいけません 。
Wi-Fi の接続ができていれば設定アプリの Wi-Fiタブに接続済みの Wi-Fi のネットワーク名が表示されているはずです。その欄の右端にある i の丸いマークをタップするとネットワークの詳細画面が表示されます。詳細画面の一番下に HTTPプロキシ という項目があり、デフォルトでは「オフ」になっているので「手動」に変更します。すると入力項目が出てくるので、「サーバ」に先ほど確認した Mac の IP アドレスを入力し、「ポート」に Charles で設定したポート番号 (デフォルト: 8888) を入力します。

⚠️ 画像ではポートが8888になっていますが、Charles でポートを変更した場合はそのポート番号を入力してください。

これで設定は完了です。

実際に接続してみる

iPhone で Safari を起動してください。適当に何かのサイトを開きます。すると Mac 側の Charles の画面で警告のようなダイアログが表示されるはずです。Deny と Allow というボタンが表示されているので、Allow をクリックします。これで iPhone のプロキシサーバとして Mac が設定されました。あとは Mac (Vagrant) で設定しているローカルサーバの IP アドレス (192.168.33.10 のような形式) を iPhone の Safari で入力すれば接続できます！

問題と解決

Q. iPhone でサイトにアクセスしても Charles で確認ダイアログが表示されない A. IP アドレスとポートの設定が正しいかもう一度確認してみてください。Mac の IP アドレスを確認する方法は色々ありますが、上記の説明通り システム環境設定 -> ネットワーク から確認するのが一番確実です。Charles のメニューバーにある Help -> Local IP Address...から確認する方法もありますが、ここに表示されているのはプライベートネットワークアドレスの可能性があるので、正しく設定できないことがあります。

Q. iOS の Chrome から接続できない、Safari ではできる A. Chrome ではセキュリティ上、ローカルサーバのサイトにアクセスできないようになっているようです。Safari を使用してください。

Q. Charles が突然止まってしまう、しばらく放置すると警告が出る A. Charles は有料 ($50, 2016/05/23 現在) です。無料ライセンスでも使用することはできますが、30分以上経過すると警告が出て止まってしまいます。警告が出た場合は一旦 Charles を終了してもう一度起動すれば再び使えるようになります。それが面倒な方は購入ページから有料ライセンスを取得してください。また、さっきまで接続できていたのに急に接続できなくなったという場合はこれが原因かもしれません。Charles の画面を確認してみてください。

Q. 前は接続できたのに、Wi-Fi に再接続したらできなくなった A. これはぼくも悩まされています。設定は間違っていないはずなのに接続できないことがあります。iPhone で設定した HTTP プロキシを一旦オフにして (念のため Wi-Fi も再接続して) 通常のサイトに接続してみてOKであればもう一度プロキシの設定をして接続するとうまくいくことがあります。Charles の再起動で治ることもあります。

参考

バーチャルホストで設定したローカル環境をスマホの実機から確認する方法

通信系のデバッグには Charles が便利

俺的フロントエンドエンジニア三種の神器に認定したCharlesについて〜その2〜インストールと設定