Macのプロキシ設定でスマホからバーチャルホストなローカルサイトを確認

現在進行中のWebシステム案件は、MacでMAMPを使ってローカルで開発している。
※ちなみにPHP(フレームワークはFuelPHP1.6)+MySQL

Apacheのバーチャルホストを使っているが、他の端末から接続するのにその端末で名前解決できないとアクセスできない。

http:://192.168.0.1/hogehoge
のようなサブディレクトリなら良いけれど
http://hogehoge
のようにルートだとホストの名前解決ができない。

MacやWindowsならhostsに定義すれば良いけれど、AndroidやiOSはどうするのか?と思ってググった。

いくつか方法はあるようだけれど、ApacheのProxyを利用するという手軽な方法を発見。

▼root不要!Androidのhostsを書き換える : Excite Smartphone Engineer’s Blog

この記事を参考にまずはMacの設定。

MAMPのhttpd.confにProxyの設定を追加し、MAMP再起動。
※開発に必要なので、MacでApacheのバーチャルホストとhostsへのホスト名設定は完了している。

MackBook AirにUSBタイプのEthernetを接続。
インターネット共有を「入」する。
共有する接続経路は、USB Ethernetで、
相手のコンピュータが使用するポートを「Wi-Fi」に。

これでMacの設定は完了。
次は、接続するスマホやタブレット。

Wi-Fiの接続先をMacで共有したアクセスポイントに。

・Androidの場合
 接続したアクセスポイントのネットワーク設定を変更で拡張オプションを表示。
 プロキシ設定を手動で選択
 プロキシホスト名をMacのIPに、
 ポートを8080に設定。

・iOSの場合
 接続したアクセスポイントの>をタップして詳細設定へ。
 HTTPプロキシを手動にし、
 サーバーをMacのIPに、
 ポートを8080に設定。

なお、自分の環境では、プロキシのホストをDHCPをオンにしているので、ルーターとなるMacのWi-Fiに割り当てられたIPアドレスを入力した。
最初Ethernetに割り当てられていたIPを入力していて繋がらず、Wi-Fiの割り当てでないとダメなことに気づいた。

これでスマホやタブレットからは、バーチャルホストに設定しているアドレスを入力するだけで表示することが可能に。

これで開発中の確認がスムーズに行える!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*