HTMLの書き換えルールをURLRewriteでセットすれば、環境設定だけでCDN向けたりできるよー、っていうのを書いたのはいつの話だろう．．．。
URLRewrite＋CloudFrontでパフォーマンスを取り戻す http://takepara.blogspot.jp/2011/12/urlrewritecloudfront.html
いまや、猫も杓子もCDN使うじゃないですか。
CloudFront/KeyCDNもHTTP Methodうまいこと処理できるようになってるから、オリジンにガッツリかぶせて(サイトの公開URLをCDNに向けてすべてのリクエストをCF経由オリジン行き)しまうっていうアプローチもありですし。
とはいえ、トラフィックあれだしー、証明書もなんだしー、お金かかるっしーなっしー、だとやっぱりURLRewriteですよね。
でもね、前のエントリの方法だと、SRC属性がちゃんと"/"で始まってることを条件にしてたんです。そうは問屋が卸さない書き方をすることもあるですよね。ルール厳しいと比較的低コストで最適化できるからいいのにー、という理屈は通りませんよ。
なので、こうなったらIMG/SCRIPT/LINKガッツリ全部書き換えてやる！でも、絶対参照やスキーム相対でホスト名込のものはそのまま残す。
前回の方法はSRC属性(ターゲットPATH)のみのパターンマッチでやってたけど、今回はリクエストURLも参照することでより広範囲に適用。もちろんパターンマッチはするんだけど、それはホスト名指定を救いたいから、という意味で、特定パスのマッチとはちょっとアプローチが違います。
考えられる組み合わせとして、リクエストURLが"/"で終わってるか、終わってないか。ターゲットPATHが"/"で始まってるか、始まってないか。の、組み合わせで4パターン。だけどターゲットPATHが"/"で始まってる絶対パス指定はリクエストURLにかかわらず、絶対パスなので実質3パターン。
- リクエストURLが"/"で終わってない
http://localhost/rewrite - リクエストURLが"/"で終わってる
http://localhost/rewrite/
- ターゲットPATHが"/"で始まってない
<img src="images/logo.gif" />
<img src="./images/logo.gif" />
<img src="../rewrite/images/logo.gif" /> - ターゲットPATHが"/"で始まってる
<img src="/rewrite/images/logo.gif" /> - 例外的にhttp/httpsで始まってるものと、"//"のスキーム相対で始まってるもの
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
なので、3パターンの組み合わせに対して、Rewriteするルールを作成すれば、ターゲットPATHそのものに対するパターンマッチを行う必要がなくなる(特定のパスを指してるものだけをCDNに向けるようなRewriteをしない)ので、コーダーの書き方に依存したRewriteにならないはず。
これらのコンテンツがRewriteで正しく表示されるように考えたルールが↓これ(CDNのホスト名はlocalhost扱い)。
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="HttpCdnPathAbsolute" preCondition="html" enabled="true">
<match filterByTags="Img, Link, Script" pattern="^/[^/]+(.*)$" />
<action type="Rewrite" value="//localhost{R:0}" />
<conditions>
<add input="{HTTPS}" pattern="off" />
</conditions>
</rule>
<rule name="HttpCdnPathRelativeSlashEnd" preCondition="html" enabled="true">
<match filterByTags="Img, Link, Script" pattern="^((?!/.*)(?!//.*)(?!http.*)(?!https.*))(.*)$" />
<action type="Rewrite" value="//localhost{PATH_INFO}{R:0}" />
<conditions>
<add input="{HTTPS}" pattern="off" />
<add input="{REQUEST_URI}" pattern="/$" />
</conditions>
</rule>
<rule name="HttpCdnPathRelativeUnslashEnd" preCondition="html" enabled="true">
<match filterByTags="Img, Link, Script" pattern="^((?!/.*)(?!//.*)(?!http.*)(?!https.*))(.*)$" />
<action type="Rewrite" value="//localhost{PATH_INFO}/../{R:0}" />
<conditions>
<add input="{HTTPS}" pattern="off" />
<add input="{REQUEST_URI}" pattern="[^/]$" />
</conditions>
</rule>
<preConditions>
<preCondition name="html">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="text/html" />
<add input="{RESPONSE_STATUS}" pattern="^[45].*$" negate="true" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
↑これはHTTPの時だけCDNにっていう設定なのでconditionsにHTTPSが”off”って入ってる。HTTPSも同じホストに書き換えていいなら、そこ削除で。HTTPSの時は違うホスト名にしたい場合、同じ組み合わせをもういっちょHTTPS用に登録してね。
何もしなかった時のレンダリング結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rewrite Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../rewrite/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="/rewrite/images/logo.gif" /><br />
<img src="images/logo.gif" /><br />
<img src="./images/logo.gif" /><br />
<img src="../rewrite/images/logo.gif" /><br />
</body>
</html>
フォルダ構成としては
/rewrite
/rewrite/index.cshtml
/rewrite/images
/rewrite/images/logo.gif
これをイメージ。
リクエストURLが"/"で終わってない時のレンダリング結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rewrite Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/../jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/.././jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/../../rewrite/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="//localhost/rewrite/images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/../images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/.././images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/../../rewrite/images/logo.gif" /><br />
</body>
</html>
リクエストURLが"/"で終わった時のレンダリング結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rewrite Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/./jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/../rewrite/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="//localhost/rewrite/images/logo.gif" /><br />
<img src="//localhost/rewrite/images/logo.gif" /><br />
<img src="//localhost/rewrite/./images/logo.gif" /><br />
<img src="//localhost/rewrite/../rewrite/images/logo.gif" /><br />
</body>
</html>
リクエストURLが"http://localhost/rewrite/index.cshtml/"となってる時のレンダリング結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rewrite Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/./jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//localhost/rewrite/index.cshtml/../rewrite/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="//localhost/rewrite/images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/./images/logo.gif" /><br />
<img src="//localhost/rewrite/index.cshtml/../rewrite/images/logo.gif" /><br />
</body>
</html>
明らかに参照パスがおかしい(階層が一個浅い)んだけど、この場合も救いたいとなるとかなりヘビー。なんでかというと、階層構造を無視してる指定になってるから。 現状ではこういうリクエスト時に末尾の"/"を削除したURL(canonical url)にリダイレクトするようにすればうまくいくぜ！たぶん。きっと。
