2016/07/06更新

[フロントエンド] ローカルプロキシを用いて、本番サイトで開発/デバッグを行う

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日はCharlesというローカルプロキシツールを用いて、本番サイトで一部ファイルを書き換えて開発やデバッグを行う方法を紹介したいと思います。

画像

目次




ローカルプロキシとは

プロキシとはサーバーとの通信内容を見たり変更したりすることができる機能で、ローカルプロキシはそのプロキシを自分のパソコンにインストールしたものを言います。ローカルプロキシを使用することで、(サーバーから取得して)ブラウザに表示する内容を確認したり、改ざんしたりすることができるようになります。
ローカルプロキシを提供するツールは幾つかありますが、今回は僕が業務で使っているCharlesを使いたいと思います(無料版でもかなり使えますが、ヘビーに使う場合には有料版がオススメです)。



Charlesのインストール

Charlesのインストールは、以下のCharlesのサイトを参照しながら進めて下さい。

https://www.charlesproxy.com/download/



ローカルプロキシを使って、本番サイトをデバッグする

それでは本題に入りたいと思います。Charlesを用いて本番サイトのコードを一部ローカルで変更して、それを表示に使って見たいと思います。


説明に使う簡単なサイト

今回はサンプルで、以下のサイトを使います。
http://yoheimune.github.io/charles_sample
このサイトは、以下2ファイルで構成されています。
  • index.html
  • main.css
内容としても、非常に簡単な内容です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
<h1>hello Charles Sample</h1>    
</body>
</html>
/* main.css */
@charset "utf-8";

body {
    background-color: #fff;
}
これのmain.cssをローカルプロキシで書き換えて、bodyの背景色を変更してみます。


差し替えるCSSファイルの作成

上記のmain.cssを差し替えるためのファイルを作成します。今回はmain2.cssという名前にしました。
/* main2.css */
@charset "utf-8";

body {
    background-color: skyblue;
}
このmain2.cssを、現在利用されているmain.cssと差し替えます。


Charlesを用いてファイルを差し替える

それではCharlesを用いて表示物を差し替えたいと思います。Charlesを起動すると最初こんな感じのUIが表示されます(v3.11.5の場合)。
画像 そして、テストページのhttp://yoheimune.github.io/charles_sampleにアクセスすると、以下のようにリクエストが捕捉されます(おそらく他のHTTP通信も捕捉されると思います)。
画像 そして、ここで表示されているmain.cssを右クリックしてMap Local...を選択します。すると、以下のような画面が表示されるので、Local Pathに差し替えたいmain2.cssのパスを指定します。
画像 そして、再度テストページを表示すると、なんと、背景色が変わって表示されます。
画像
と、こんな感じに手軽に本番サイト上で開発/デバッグができて、とても便利です!



ローカルプロキシの使いどころ

仕事では、フロントエンド開発でローカルプロキシを用いて開発しています。ローカルプロキシを用いるメリットとして、以下のようなことがあるなと感じています。

  • ローカル環境にサーバー環境(WebサーバーやDBなど)を構築する必要がなくて便利。環境構築も時間が短いし、環境の変化(例:DBのスキーマ変更)への対応も要らない
  • 本番サイトなどのデータが豊富な環境で開発ができ、非常に開発しやすい
  • APIのレスポンスにバリエーションがある場合に、それぞれのレスポンスをローカルファイルと差し替えることで、バリエーションテストを簡単に行うことができる
  • (例えば本番サイトでバグが発生した場合に)ミニファイされたJSを圧縮前のJSに差し替えることで、バグを見つけやすくすることができる
  • iOSシミュレーターやAndroidシミュレーターのリクエスト内容も見ることができる

こんな感じで色々と便利に使っています。また、デフォルト設定ではHTTPsのリクエストは改ざんできませんが、設定すればそれもできるようになります(今後、ブログに書きたいと思います)。


2016/07/06追記

HTTPSで用いる方法をブログに書きました。そちらもご参考になれば幸いです。
[フロントエンド] ローカルプロキシのCharlesを使って、HTTPSサイトもデバッグする



最後に

本日はCharlesを用いたローカルプロキシによるフロントエンド開発をブログに書きました。上述の通り、ローカルプロキシを用いた開発はメリットがいっぱいあるので、是非是非使える手段の1つにしたいところです。

最後になりますが本ブログでは、フロントエンド・Swift・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。