URLを指定のファイルに書き換える方法
こんにちは。レスキューナウでシステム部の部長をしているadachi-koichiです。
背景
開発をしている最中や、本番で稼働中のシステムの不具合を確認するために、通信を書き換えたいことがたまにあります。
今回はプロキシーを使って通信内容を書き換える手順を書きたいと思います。
概要
JSやiOS, Androidアプリなど、実際に発生している通信を有効になっているファイルを、自分の好きなファイルに書き換えることができます。
.js, .html, json, png・・・など、通信している様々なファイルを書き換えできます。
どうしても本番でしか発生しない問題に遭遇した時にデバッグするための技術です。
事前準備
macOSで動くマシンを用意する（WindowsやLinux向けのアプリもあるようです）
Chromeをインストールしておく
Charles Proxyをインストールしておく
CharlesのRoot Certificateをインストールする
Key Chain Accessを開き、Charlesの certificateを Always Trust に変更する
Chromeの設定
inspectorのNetworkを開き、 Disable cache にチェックをつける
Charlesの設定
1.メニューから、macOS Proxyにチェックを入れる
2.No Caching…にチェックを入れる
3.特定のURLにアクセス時、URLのファイルの代わりにローカルマシンのファイルをブラウザに読み込ませたい時は Map Localを使用する
(index.htmlをローカルのファイルに書き換える場合は下記のように設定)
4.特定のHTTPヘッダを書き換えたい時は Rewrite を使う
5.SSL Proxyingをクリックする
（SSLなURLに対してもCharles Proxyが有効化されている時は、 Stop SSL Proxying に名称が変わっています）
デバッグ開始
Chromeを完全に終了しておく
Charles Proxyを先に立ち上げておく
Chromeを起動。指定のURLにアクセスする
Map Localで指定したファイルに書き変わっている
これで指定の通信の書き換えができ、不具合の調査などがやりやすくなりました。
特に.jsの場合は、map localで読み込ませるファイル先をdist/index.jsなどにすると、手元でコード変更した.jsを指定の環境などで動かすことができますね。
まとめ
今回はCharlesを使った通信の書き換えについてまとめてみました。
特定の環境でしか発生しない不具合に遭遇したら、ぜひCharlesを使ってみてください🕺
最後に
現在、レスキューナウでは、災害情報の提供、災害情報を活用した安否確認サービスなどのWebサービスの開発エンジニアを募集しています！
社員・フリーランスに関わらず、参画後に安心してご活躍できることを目指し、応募された方の特性・ご希望にマッチしたチームをご紹介します。
ちょっと話を聞いてみたい、ぜひ応募したい、など、当社にご興味を持っていただけましたら、お気軽にエントリーください！！