Proxyman で React Native アプリの HTTPS 通信をキャプチャ
API 呼び出しを扱っていると、コンソールにはエラーが表示されないのに、アプリにデータが表示されないという問題に遭遇したことはありませんか？ アプリのネットワーク通信を調べてデバッグしたいと思ったことはありませんか？ このチュートリアルでは、Proxyman を MITM（man-in-the-middle）プロキシとして使い、React Native アプリの HTTPS 通信をキャプチャして確認する方法を紹介します。
1. 前提条件
- 最新版の Proxyman をダウンロードしてインストールします
- Mac で Xcode 11.4 以降を使用します
- このチュートリアルでは、デバッグ用のオープンソースの React Native アプリ「Trackie」を使用します。ソースコードは こちら から確認できます。
2. はじめに
Proxyman のダウンロードとインストールが完了すると、React Native アプリとの間で送受信されるすべてのリクエスト/レスポンスをキャプチャできるようになります。
ご覧のとおり、アプリの通信はキャプチャできていても、レスポンスの内容はまだ表示されていません。
では、SSL Proxying を有効にして、シミュレータに Proxyman 証明書をインストールしましょう！
3. SSL Proxying を有効にする
「Enable only this domain」または「Enable all domains from Trackie」をクリックします。
4. iOS シミュレータに Proxyman 証明書をインストールして信頼する
メニューバーで Certificate -> Install Certificate for iOS -> Simulators → Install Certificate を選択します。
Proxyman にはセットアップガイドが用意されており、手作業をできるだけ減らせます。セットアップウィンドウで Install and Trust をクリックすると、証明書が自動的に設定されます。
5. ネットワーク通信を確認する
証明書をインストールしてシミュレータを再起動したら、アプリを再実行して API 呼び出しを行います。Proxyman がリクエスト/レスポンスの内容をキャプチャして表示するので、デバッグに利用できます。
6. アプリの通信が表示されない場合は？
iOS シミュレータで SSL エラーが発生したり、HTTP/HTTPS リクエストが表示されなかったりする場合は、Proxyman ドキュメントの トラブルシューティングのセクション を確認してください。それでも解決しない場合は、できるだけ詳しい情報を添えてメールでご連絡ください。喜んでサポートします。
7. まとめ
ネットワーク通信の扱いは難しく、もどかしく感じることもありますが、Proxyman を使えばデバッグがずっと楽になるはずです。Proxyman や他の MITM プロキシツールを使えば、iOS、Android、React Native アプリの HTTP/HTTPS 通信をキャプチャして確認できます。このチュートリアルを終えて、ネットワークの達人を目指したくなった方は、Map Local、Breakpoint、Scripting ツールなど、Proxyman の高度な機能を紹介するシリーズもぜひご覧ください。これらを使えば、HTTP/HTTPS のリクエストとレスポンスを書き換えることもできます。
このチュートリアルがお役に立てば幸いです。楽しいデバッグを！ 👨🏻🚀
プラットフォームに関する注意
React Native は端末の通常のネットワーク経路を使用します。そのため、iPhone または iOS シミュレータでは iOS の最新ガイドに、Android の実機またはエミュレータでは Android ガイドに従ってください。テスト用証明書がシステムストアにない場合、Android のデバッグビルドではネットワークセキュリティ設定が必要になることがあります。プロキシを設定した後に Metro が読み込めなくなった場合は、API ホストのキャプチャを止めるのではなく、ローカルの Metro ホストをプロキシのバイパスリストに追加してください。
Proxyman は、iOS デバイス、iOS シミュレータ、Android デバイス上のアプリやドメインの HTTP(s) 通信をキャプチャして確認できる、高性能な macOS アプリです。
ダウンロードはこちら：https://proxyman.com/
