Help us understand the problem. What is going on with this article?

iPhone から開発マシンの localhost にアクセスする(Windows)

More than 3 years have passed since last update.

スマホ用の Web 画面を作成する時、実機での画面確認が必要なケースがあります。

そんな時、開発マシンで起動している Web サーバーにスマホからアクセスする必要があるのですが、サーバーによっては localhost や 127.0.0.1 からしか接続を受け付けないようなものがあります(IIS Express とか)。

今までは IIS のリバースプロキシを使って強引にアクセスしていたんですけど、Fiddler プロキシが便利だったので、そのやり方を紹介したいと思います。今回は、以下のように流れになります。

  1. Fiddler を外部から接続できるようにする
  2. iPhone のプロキシ設定で Fiddler を指定する
  3. iPhone から localhost.fiddler や ipv4.fiddler にアクセスする

Fiddler のプロキシを設定する

Fiddler を起動し "Rules" メニューから "Fiddler Options" を開きます。ダイアログの "Connections" タブに "Allow remote computers to connect" というチェックボックスがあるので、チェックを入れて再起動すると設定は完了です。これで、外部のクライアントから開発マシンで起動した Fiddler のプロキシを通すことができるようになります。ただし、Fiddler を終了するとプロキシが無効になるので、テスト中は Fiddler を起動し続ける必要があります

2014-09-04_01h33_54.png

iPhone が Fiddler のプロキシを使うように設定する

まず iPhone を開発マシンにアクセスできる WiFi に繋いでください。その WiFi の設定画面の下の方に HTTPプロキシの設定があるので、"手動" を選択し、「サーバー」に開発マシンの IP アドレス、「ポート」に "8888" を設定します。認証は設定しなくて大丈夫です。これで、iPhone の通信が開発マシンの Fiddler を経由するようになりました。

IMG_1328-1.png

Safari から開発マシンの localhost にアクセスする

以上で設定は完了しているので、後は localhost や 127.0.0.1 にアクセスするやり方ですね。
Fiddler には以下のようなドメインの書き換え機能があるので、これを利用します。

  • localhost.fiddler → localhost
  • ipv4.fiddler → 127.0.0.1

例えば、開発マシンで起動している Web サーバーが 127.0.0.1 の 8080 をリッスンしている場合は http://ipv4.fiddler:8080/ でアクセスすることが可能です。
https でも問題なく、サーバーが localhost の 8443 をリッスンしている場合は https://localhost.fiddler:8443/ にアクセスします。

ですので、Safari の画面を開いて、上の URL 欄に http〜 の打ち込めば、開発マシンの Web サーバーにアクセスすることが可能になります。

IMG_1329-1.png

もちろん、Fiddler を通しているので開発マシンで起動している Fiddler には iPhone の通信がキャプチャされるようになります。Fiddler はデフォトルで通信をバッファリングしているので、通信速度が気になるようであれば、ツールバーにある Stream ボタンを有効にすると少し快適になるかもしれません。

(追記) Fiddler のキャプチャは止めておいてもプロキシは有効になるようです。

2014-09-04_11h53_10.png

最後に

今回は iPhone で説明しましたが、開発マシンの localhost や 127.0.0.1 に外部からアクセスしたいケースはちょくちょくあると思うので、そういう場合は外部のクライアントのプロキシを Fiddler に設定することで同じようにアクセスすることが可能になります。

ちなみに、Fiddler の外部からのアクセスを受け付ける機能は、外部のクライアントの通信を追いたい時に使うのが正しい使い方ですので、こちらもご利用ください。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away