29
27

More than 5 years have passed since last update.

iPhone,Androidの実機から開発用localhost等にProxy経由でアクセスさせてテストする方法

Last updated at Posted at 2016-06-08

今回はMac環境でiPhoneやAndroid向けの開発をするのに便利なProxyの設定の方法を紹介します。

アプリ開発やスマホ向けWebサイトの開発において、実機からテスト環境にアクセスさせたい時に、特定のドメインへのリクエストをProxy経由で開発用の任意のサーバへリダイレクトして使うことを想定しています。

ProxyサーバのSquidManをインストールする

SquidManはSquidというProxyサーバのGUIとして動作するソフトウェアで、Squidが入っていない場合はインストール時にSquidも一緒にインストールしてくれます。

Cursor_と_SquidMan_と_新規投稿_-_Qiita.png

Downloadsから最新版をダウンロードしてインストールしてください。

SquidManの設定をする

Preferencesから設定を行います。基本的にはClientsとTemplateを更新します。

Clients

Clientsでは接続を許可するIPを設定します。192.168.1.4のように特定のIPのみを指定することもできますし、画像のように特定のネットワークに所属する端末を許可することも可能です。

Cursor_と_Preferences_と_Tools_と_新規投稿_-_Qiita.png

Template

Configを更新します。ポイントはhostsファイルの指定です。

# protect web apps running on the proxy host from external users
# http_access deny to_localhost

localhost上で動作するwebサービスへのアクセスを許可する必要があるので上記の制限をコメントアウトします。

Proxy経由のリクエストの一部を別のIPに振り分けたいのでhostsファイルを用意します。今回はlocalhostにアクセスさせたいので

127.0.0.1 hogehoge.com
127.0.0.1 api.hogehoge.com

として任意のファイル名で保存します。そして上記のconfigに

# hosts file
hosts_file /Users/hogehoge/hosts

と自分が新しく保存したhostsファイルへの参照を記載します。

あとはSaveしてProxyをリスタートさせておきましょう。

実機にProxyを設定する

次にiPhoneやAndroidから起動しているProxyサーバに接続させて、アプリやブラウザから開発用のアプリケーションにアクセスできるようにします。

Proxyサーバの設定は次のようになっているとします。

IPアドレス ポート
192.168.1.4 8080

iPhoneでのProxy設定

iPhoneではいつもの設定画面から接続しているWifiを選択してProxy設定を追加します。

写真_2016-06-08_0_56_22.png

ネットワークの設定画面の下部にある「HTTPプロキシ」に設定を追記します。

写真_2016-06-08_0_56_13.png

これで、このネットワークを使用する際には指定したProxyサーバを経由してくれるので、hostsで設定したドメインへのリクエストを開発サーバに割り振ってくれます。

AndroidでのProxy設定

AndroidではProxy設定を管理できるアプリをインストールして使うのが便利です。私はProxySettingsというアプリをインストールしています。
(注:どうやらAndroid6系だと使えないようです)

Screenshot_2016-06-08-01-01-02.png

インストールしたら接続しているネットワークに対してProxyの設定を作成してSelectしましょう。

Screenshot_2016-06-08-00-55-18.png

以上

これで実機上のでアプリ開発やスマホ向けウェブサイトの実機確認がとっても簡単になります。

29
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
27