2014年5月21日水曜日

URLRewriteでほとんどすべてCDNに向ける

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/
  1. ターゲットPATHが"/"で始まってない
      <img src="images/logo.gif" />
      <img src="./images/logo.gif" />
      <img src="../rewrite/images/logo.gif" />
  2. ターゲットPATHが"/"で始まってる
      <img src="/rewrite/images/logo.gif" />
  3. 例外的に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)にリダイレクトするようにすればうまくいくぜ!たぶん。きっと。

dotnetConf2015 Japan

https://github.com/takepara/MvcVpl ↑こちらにいろいろ置いときました。 参加してくださった方々の温かい対応に感謝感謝です。