VirtualBox 上で開発しているウェブシステムを実機のブラウザで確認する

TL;DR

• ホストマシンと検証機を同一ネットワークに接続する
• Fiddler をインストールする
• 外部アクセスを許可する
• (Host Remapping をする)
• スマホのプロキシをホストマシンに向ける

前提

Windows にインストールされた VirtualBox 上で Web システムを開発している。
ゲストはブリッジ接続ではなく、 NAT とホストオンリーを利用している。
ホストマシンと検証機は同一ネットワーク内の無線 LAN に接続している。
普段は Chrome のデバッグツール等でスマホ表示を確認しているが、詳しい検証や調整は実機でしたい。
実機から VirtualBox 上のゲストにアクセスする方法はググれば色々出てくるが、なんだかハードルが高そう。

Fiddler をインストールする

公式サイト からダウンロードしてくる。
表示されているプルダウンを選択していき、最後にメールアドレスを入力すればダウンロードが始まる。
他のツールは有料だが Fiddler は 無料 で使える。
ダウンロードが完了したら実行し、適当に進めていけばインストールが完了する。

Fiddler の起動と設定

起動すると何か聞かれた気がするが、とりあえずキャンセル。

外部アクセスを許可する

Tools > Options を選択するとダイアログが開く。
Connnections タブを開き、 Allow remote computers to connect にチェックを入れる。
Fiddler listens on port の数字をメモっておく。

hosts の設定

ゲスト上で VirtualHost の機能を利用している場合は、これを設定しておく必要がある。
しかし、そうでない場合は特に設定する必要はないので次に進む。

メニューバーから Tools > HOST を選択するとダイアログが開く。
人によっては Tools > Host Remapping とかになってるかも。

入力書式は hosts と同じ。
例えば ゲスト の IP が 192.168.1.101 で、これに仮の URL を vbox01.fiddler とした場合は次のように書く。

192.168.1.10 vbox01.fiddler

区切り文字は 半角スペース でも タブ でも良い。
Save を押すとすぐに反映される。

スマホのプロキシを設定する

ホストマシン の IP を 192.168.2.201 とし、先に確認した Fiddler listens on port の値を 8888 とする。

iOS

1. 設定 > Wi-Fi から接続済みのネットワークの i ボタンをタップする。
2. 下方向にスワイプすると HTTPプロキシ という項目があるので、 手動 を選択する。
   • サーバ の項目に 192.168.2.201 を入力する
   • ポート の項目に 8888 を入力する
   • 認証 はデフォルトの状態では OFF にしておく（緑にしない）
3. 確定ボタンなどはないので、ホームボタン等で適当に抜ける

Android

1. 設定 > Wi-Fi から接続済みのネットワークを長押しする。
2. ポップアップが出てくるので　ネットワークを変更 をタップする。
3. 詳細設定項目 をタップする
4. プロキシ をタップし 手動 を選択する
5. 入力フィールドが展開されるので、下記のように入力する。
   • プロキシのホスト名 の項目に 192.168.2.201 を入力する
   • プロキシポート の項目に 8888 を入力する
   • プロキシを不使用 はとりあえず空欄
6. 保存 をタップする。

ブラウザを起動する

ゲスト の IP または、 hosts を設定した場合はそれを、スマホのブラウザの URL 欄に入力する。
表示される。うまー。

備考

iOS の Safari をデバッグする際は、 Mac と接続しておけば Mac 上の Safari でインスペクタを起動することができるのでめっちゃ捗る。
この時、ホストマシンと Mac は別物で構わない。