みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Charlesを使ってhttpsのサイトのリソースをローカルファイルに差し替える 🫖

昔はよく使っていたのですが、5年ぶりぐらいにCharlesを起動してみたところ、すっかり使い方を忘れていたので、ドキュメントを読みなおしました。

www.charlesproxy.com


Charlesとは

通信のモニタリングなどを行うソフトです。
いろんな使い道があるのですが、今回はリソースファイルをローカルのものと差し替えるために使用します。


リソースファイルの差し替えとは

例を挙げるのが一番わかりやすいと思うので具体例を挙げます。
Charlesを使えば、本番サイトをブラウザで確認する際に、サーバに上がっているCSSファイルを、ローカルで開発中のCSSファイルに差し替えることができたりするのです。
これは時と場合によってはとんでもなく役に立ちます。


差し替えの準備

証明書の作成

httpsのサイトで使う場合は、証明書を作成する必要があります。

Charlesの Help > SSL Proxying > Install Charles Root Certificate を選択してキーチェーンに証明書を登録します。



証明書を信頼する

キーチェーンに登録した証明書をダブルクリックして、信頼を「常に信頼」にします。



macOS proxyを有効にする

Charlesの Proxy > Proxy Setting... の macOSタブから Enable macOS proxy と Charlesの Proxy > macOS proxy にチェックを付けます。




SSL Proxying を有効にする

Charlesの Proxy SSL Proxying Setting... から Enable SSL Proxying にチェックを入れ、IncludeのLocationを、

Host → *
Port → 433

と設定します。


当然特定のサイトだけを許可しても良いのですが、ワイルドカードを使ってすべてのサイトを許可しておきました。

これで基本的な準備は完了です。
あとは差し替えを行うサイトを個別に登録していきます。


差し替えの設定

Charlesの Tools > Map Local... から設定していきます。

Locationにサーバ上のファイルのパス、Local Pathにローカルファイルのパスを入力して、Enable Map Localにチェックを入れれば設定が有効になります。
デプロイ不要で開発中のファイルをプレビューできるのはありがたいですね。