LiveReload を Windows7 + FireFox + プロキシ環境 で使用する

なにかの勉強会で LiveReload というディレクトリを監視してファイルに変更があるとブラウザを自動的にリロードするというステキアプリの話を知り、Mac 専用とのことで ksg と思ってたのですが・・・

Windows でも大丈夫そうじゃあないですか! というわけで早速使ってみたのですが・・・プロキシ環境だったせいで少しハマりました。

LiveReload の インストールと実行

まずは Downloads - LiveReload からダウンロード、インストールします。

次に LiveReload を起動させて、監視したいディレクトリをアプリの左ペインにドラッグ&ドロップします。 すると、左ペインにディレクトリ名が追加されるので、それを選択します。

選択した後の画面はこんな感じです。

f:id:ngyuki:20121106222452p:plain

(1) の Site URL は・・・何も入力しなくても動きました。多分複数のディレクトリを監視するときに FireFox のどのタブをリロードするのかの判断に使うのではないでしょうか。

(2) は・・リンクをクリックして FireFox のアドオンをインストールしてください、枠内のスクリプトタグはスルーで。

(3) は・・多分自動的に CaffeeScript や LESS をコンパイルするのだと思いますが、どれも使っていないのでわかりません!

アドオンをインストールするとツールバーにこんな感じの f:id:ngyuki:20121106222524p:plain アイコンができるのでクリックします。こんな感じに f:id:ngyuki:20121106222523p:plain すこし赤くなれば成功です。監視対処ディレクトリの適当なファイルを編集すると自動的にブラウザがリロードされます。

と言いたいところですが・・・私の環境では上手く行きませんでした。

プロキシ環境下での設定 with FoxyProxy

結論からいうと FireFox のプロキシ設定用のアドオン FoxyProxy の設定で、localhost127.0.0.1 への通信がプロキシ経由になっていたことが原因でした。

FoxyProxy はワイルドカード正規表現でプロキシを使用するURLのパターンを指定できたり、さらに、複数のプロキシサーバをURLのパターンによって使い分けられたりと、とっても便利なので愛用しています。localhost127.0.0.1 は次のような正規表現で除外設定をしていました。

^https?://[-a-z0-9]+(:\d+)?/
^https?://127\.0\.0\.1(:\d+)?/

が、この設定の状態で LiveReload のアイコンをクリックすると次のようなエラーメッセージが表示されました。 いかにも接続に失敗したって感じのメッセージです。

Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is running. (We recommand guard-livereload, until LiveReload 2 comes to your platform.)

FireFox のエラーコンソールを見てみると、次のメッセージが出ていました。

エラー: ws://127.0.0.1:35729/livereload のサーバへの接続を確立できませんでした。
ソースファイル: chrome://livereload/content/global.js

どうやら ws: というのは WebSocket のURIスキームのようですね・・・知りませんでした。 FoxyProxy の正規表現^https?:~ などとしていたため、WebSocket のURIスキームが漏れてプロキシ経由になってしまっていたようです。

FoxyProxy の正規表現パターンを次のように変更すると解決しました。

^[a-z]+://[-a-z0-9]+(:\d+)?/
^[a-z]+://127\.0\.0\.1(:\d+)?/