やりたいこと
ネイティブアプリケーションで叩いている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でハマりやすいポイントの参考資料を残しておきます。
業務上載せられない情報が多く、文字ばかりですみません。
みなさまもうまくいくことを祈っております