2017/12/12更新

[フロントエンド] スマホ実機でのデバッグ手段を増やす！Macのプロキシを利用して、通信内容を確認する。

こんにちは、@yoheiMuneです。
今日は、プロキシを使ってスマホの通信内容を確認する方法について、ブログを書きたいと思います。

Special Thanks to http://flic.kr/p/7Sd7hc

この記事で伝えたいこと

スマホ向けWebアプリケーションのテストにおいて不具合が発生した場合に、スマホ実機にてデバッグする方法の1つを解説します。
今回は、MacのApacheをプロキシサーバーとしてセットアップし、スマホの通信をMac経由にすることで、スマホとサーバー間の通信内容を確認する、という内容です。

スマホ実機でのデバッグはなかなか大変ですが、そのデバッグの1手段として使ってもらえれば幸いです。

Macのプロキシを設定する

まずはMacBookにインストールされているApacheに、プロキシをインストールします。まずは、Apacheでプロキシが使えるかを確認します。

# $ cat /etc/apache2/httpd.conf

# ここらへんのモジュールロードが、コメントアウトされていないかを確認します。
# たぶん最初から大丈夫なはず。
LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_connect_module libexec/apache2/mod_proxy_connect.so
LoadModule proxy_ftp_module libexec/apache2/mod_proxy_ftp.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
LoadModule proxy_scgi_module libexec/apache2/mod_proxy_scgi.so
LoadModule proxy_ajp_module libexec/apache2/mod_proxy_ajp.so
LoadModule proxy_balancer_module libexec/apache2/mod_proxy_balancer.so

# 以下の記述がコメントアウトされていないかを確認します。
# たぶん最初から大丈夫なはず。
Include /private/etc/apache2/other/*.conf

続いて、Proxyの設定ファイルを作成します。

# 「/private/etc/apache2/other/proxy.conf」を新規作成
<IfModule mod_proxy.c>
    ProxyRequests On
    ProxyVia On
    <Proxy *>
        Order deny,allow
        Deny from all
        Allow from 192.168.1
    </Proxy>
</IfModule>

上記の設定の場合、「192.168.1.*」のIPアドレスからの処理を受け付けます。そしてApacheを再起動（起動していない場合には、起動）します。

# 再起動の場合
$ sudo apachectl restart

# 起動の場合
$ sudo apachectl start

これで、以下のURLを叩いて、Apacheの画面が表示されれば、起動成功です。

http://localhost

表示されない場合には、上記で記載した設定ファイル（または別の箇所）が壊れているので、頑張って修正します。

最後に、Mac本体のIPアドレスを確認します。

$ ifconfig | grep inet
inet6 ::1 prefixlen 128
inet 127.0.0.1 netmask 0xff000000
inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1
inet6 fe80::9afe:94ff:fe45:cd21%en1 prefixlen 64 scopeid 0x8
inet 192.168.1.2 netmask 0xfffffff0 broadcast 192.168.1.15

複数のネットワークに繋いでいるといっぱい出てきますが、今回は「192.168.1.2」がMac本体のIPアドレスとします。同じLAN上のiPhoneやAndroidから、（ネットワークが他機種との接続を禁止していない限り）、以下のURLでMacのApacheの画面を表示することができます。

http://192.168.1.2/

これでプロキシの設定は以上です。

iPhoneからMacのプロキシ経由で通信を行う

まずはiPhoneについて扱います。 iPhoneであればWebkit Webインスペクタとかで詳しく通信内容も確認できますが、一応説明します。

iPhoneでProxyを設定するためには、以下の手順で行います。

設定アプリを開く
Wi-Fi設定を選ぶ
Macと同じネットワークと同じWifiに接続する
ネットワーク名右側に出る「(i)」というマークをタップする
HTTP PROXYの欄に、プロキシサーバーの情報を入力する

プロキシサーバーの情報は、以下を入力します。

Server：192.168.1.2
Port：80
Authentication：OFF

この設定でProxyの設定が完了です。 Safariで、ネットワークエラーとかなくブラウジングできれば、設定成功です。

Android4系でプロキシを設定する

Android4系では、プロキシの設定を行うことができます。以下の手順で設定します。

設定アプリを開く
Wifi設定を開く
Macと同じネットワークと同じWifiに接続する
接続したWifiを長押し（ロングタップ）する
詳細設定ダイアログが出るので、「ネットワーク設定変更」を選ぶ
「拡張オプションを表示」をONにして、プロキシ設定を入力する

iPhoneと同様に、プロキシサーバーの情報は、以下を入力します。

Server：192.168.1.2
Port：80
Authentication：OFF

この設定でProxyの設定が完了です。ブラウザで任意のページが見れれば、設定は成功です。

スマホ端末の通信内容を見る

それでは、通信内容の確認をしてみましょう。Apacheのアクセスログを見ることで、リクエストを把握することができます。

# 設定を変えていなければ、以下の場所に表示されます
$ tail -f /private/var/log/apache2/access_log
172.20.10.6 - - [05/Mar/2014:16:46:59 +0900] "CONNECT www.google.co.jp:443 HTTP/1.1" 200 -
172.20.10.6 - - [05/Mar/2014:16:46:58 +0900] "CONNECT www.google.co.jp:443 HTTP/1.1" 200 -

こんな感じでIPアドレスと、通信先やそのHTTPステータスを確認することができます。ログのフォーマットや出力内容を変える場合には、httpd.confなどの設定を変更します。詳細は、ログファイルの詳細 - Apache入門 | AdminWebなどを確認してみてください。

参考URL

このデバッグ手段を身に付けるために、以下の記事を参照しました。貴重で有用な記事、本当にありがとうございます。

Mac の Web 共有で Proxy « LANCARD.LAB｜ランカードコムのスタッフブログ
今回の記事では、主にこの記事を参考にさせて頂きました。

404 Blog Not Found:Apache - proxyを使って人様のアクセスをログする
この記事では、Apacheのプロキシ設定について、ポート番号の設定や、ログファイルの設定も書かれています。より実践的に使うなら、こちらも読むと良いと思います。

ログファイルの詳細 - Apache入門 | AdminWeb
Apacheのログフォーマットについて、初めて学んだのがこの記事でした。分かりやすくすごく良い記事です。

最後に

以上、Macを使ったスマホ実機の通信状況の把握を行う方法でした。今回私は、この方法を使って、なぜかロード出来ない音声ファイルについて通信状況を把握するようなデバッグをしてました。結果として、サーバーが特定の状況の時にのみ403を返却する事が分かり、なんとか解決しそうな次第です。

スマホ実機でのデバッグは大変ですが、少しずつ手数を増やしていきたいところです。
最後までご覧頂きましてありがとうございました。