Charlesを使って本番ドメインを向いたアプリのリクエストをlocalhost:3000に飛ばす

別にportは3000じゃなくてもいいのですが、とにかく手元のマシンで開発しているAPIなどのテストが便利になります。

Download Versionは4.0.1です。

4系のキャプチャあり説明がこの世に全然ないので、画像つきで説明してみます。

最終イメージ

本来

アプリ→Wi-Fi→本番APIサーバー(https://example.com)

今回

アプリ→Wi-Fi→手元のMacのプロキシ→手元のAPI(http://localhost:3000)

localhostのやつが悪い顔しているように見えますが気のせいです。

手順

もし途中で詰まったらこの辺も見るといいかもです。

1. Charlesダウンロードしてインストール

TOPよりよしなにやってください。

2. 起動

3. SSL Proxy に"*"設定

Mac上部の方のMenuより選択してウィンドウ表示。

"*"を追加してください。

4. Map Remoteの設定

ここが最大のキモです。

MenuよりMap Remoteを選択

Enable Map Remoteにチェック。

「add」を押してEdit Mappingウィンドウを開く。例えば今回はこのようにした。https→httpが設定可能であることがわかる。

OKを押して閉じる。

5. iOSでプロキシ設定

設定>Wi-Fiより、すでに設定してあるSSIDの横にあるinfomationマークをタップして詳細設定画面へ。
同じWi-Fiに接続しているMacに振られているIPとポート8888(Charlesのデフォ)を入力する。

6. スマホでプロファイル設定

ここまで設定してどこかにアクセスしようとすると、Charles上に許可を促す画面が出るのでAllowする。
またここまで来たら、 http://www.charlesproxy.com/getssl にアクセスすることで、プロファイル設定へ進める。

7. 【最後】APIにアクセス！！

録画ボタンは押しても押さなくてもredirectされました。

ストアから落とした目的のアプリを起動して何らかのAPIが叩かれたときに、ローカルで用意しているlocalhost:3000にログが流れ始めたら成功！

APIを開発しているエンジニアが、アプリエンジニアにわざわざ自分のローカルマシンのIPを教えて再ビルドとかしなくても、自由にデバッグができて便利。

もちろん本番アプリじゃなくて、ステージングやDEVサーバーを向いているものでも同様。

最初Macの/etc/hostsでlocalhost設定するだけでいいんじゃね？って思ったけど、https前提のAPIではそれだけではだめだった。この方法ならhttps→httpできて便利。

まとめという名の小並感

Charles超便利。プロファイルさえ入れればSSLでも気にしなくていいの楽。他にも便利機能たくさんありそうなのでもっといじり倒したい（ネットワークの帯域制限とか）。