やりたいこと

ネイティブアプリケーションで叩いているAPIをCharlesで覗きたい

こんな人向け

・開発中のアプリがVPNを経由しないとAPIを叩けない
・ネイティブアプリでAPIの中を覗きたい
・ Charlesを使ってみたけど、VPNを経由して覗く方法が知りたい

では、やっていきます！

事前準備

Charlesが使用できる様に、初期設定を終わらせましょう！

【参考文献】

必要なもの

・ CharlesがインストールされているPC
・そのPCがVPNに接続できる状態であること
・ iPhone
・ Wi-Fi

作業手順

① PCとiPhone端末を同じWi-Fiに接続します

とても大事です。ここが原因で接続できないミスもありますので、しっかり確認していきましょう
また、「自動的にVPNに接続されてしまうWi-Fi」にも注意しましょう
VPNに接続しない状態で、同じWi-Fiに接続します

② Charlesを起動します

何度も言いますが、VPNに接続していない状態で起動します

③ プロキシとなるIPアドレスをメモします

Charlesを開いている状態で、
メニューバーにある Help > Local IP Addresses を押下し、IPアドレスをメモします
後ほど使用します。

④ iPhone側の設定をしていきます

iPhoneの 設定 > Wi-Fi > 「PCと同じWi-Fi」のℹ️マーク　をクリックします
画面一番下までいき、　HTTPプロキシ > プロキシを構成 をクリックします

この辺の遷移については、以下の記事をご参考に辿り着きましょう...！！

【参考資料】

⑤ 「手動」をクリックします

手動をクリックして、下記の情報を入力し、「保存」をクリックして画面を閉じてください

サーバー：手順③で控えていたIPアドレスを入力します
ポート：初期設定でCharlesに登録してあるポート番号を入力します。多分8888になっているでしょう

一旦休憩

今やったことは、「PCをHTTPプロキシとして登録」しました。
本来であれば、iPhoneがSafariを開く、Youtubeを開くなど、iPhoneが直接通信しますが
その通信をPCが代理で行うということです。

つまり、iPhoneでAPIを叩いても、その通信はPCが行なっている様なイメージです
（イメージです）

ここまで言えばわかりますよね...？
APIを叩く際にVPNが必要であれば、
PCがVPNに繋がっていれば、iPhoneはVPNに接続しなくてもAPIが叩けます

では続きをやっていきましょう

⑥ PCをVPNに接続します

注意：Charlesを起動している状態で、VPNに接続しましょう。
VPNに繋いでいる状態でCharlesを起動すると、うまくいかないことがあります。

⑦ iPhoneでネイティブアプリを起動し、動作確認をします

これで設定は終わりです。
正しくAPIが覗けるかCharlesで確認してみましょう。
きっとうまくいっているハズです

やりがちなミス

・ iPhoneからVPNに接続する必要はありません。何度も言います
・ Charlesを起動してから、VPNに接続してください。
・初めてCharlesと接続する際、「このデバイスと接続しますか？」　=> 「allow or deny」
　と警告モーダルが出ますが、必ずallowにしてください。
・証明書のインストールや信頼にする設定は飛ばさずに必ず実行してください

だいたいこの辺のミスを潰していけば接続できると思います...

以上で、今回の説明は終わりです！
最後に、Charlesでハマりやすいポイントの参考資料を残しておきます。
業務上載せられない情報が多く、文字ばかりですみません。
みなさまもうまくいくことを祈っております