2012年5月13日日曜日

"mod_sed"でHTML上の画像などのURLをS3やCloudFrontに置換

スズキです。

CDPネタです。今回の対象は「URL Rewritingパターン」です。


このパターンの「実装」に
Apacheのフィルターモジュール(mod_ext_filter/mod_sed)や
プロキシーとして用意したNginxなどで動的に書き換えることも可能。
といった記載があります。

以前、本ブログでも"mod_ext_filter"に関しては下記のように紹介しているので
"mod_ext_filter"で画像などのURLをCloudFrontのものに
今回は同様のことを、"mod_sed"で実現してみました。

まずインストールですが、下記のように"atomic"リポジトリを登録して
"yum"で簡単にインストールできました。

# rpm -Uvh http://www6.atomicorp.com/channels/atomic/centos/6/x86_64/RPMS/atomic-release-1.0-14.el6.art.noarch.rpm
# yum -y install mod_sed

フィルタールールは下記のように"httpd.conf"に記述しています。

AddOutputFilter Sed html
OutputSed "s/\"\/\(.*\)\.js\"/\"http:\/\/s3\/\1.js\"/g"
OutputSed "s/\"\/\(.*\)\.css\"/\"http:\/\/s3\/\1.css\"/g"
OutputSed "s/\"\/\(.*\)\.gif\"/\"http:\/\/s3\/\1.gif\"/g"
OutputSed "s/\"\/\(.*\)\.jpg\"/\"http:\/\/s3\/\1.jpg\"/g"

そして、下記のHTMLをソースとして、上記のフィルタールールで
Apacheからコンテンツを確認すると、

<html>
  <head>
    <script type="text/javascript" src="/test.js"></script>
    <script type="text/javascript" src="/test/test.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript" src="test/test.js"></script>
    <link href="/test.css" rel="stylesheet" type="text/css">
    <link href="/test/test.css" rel="stylesheet" type="text/css">
    <link href="test.css" rel="stylesheet" type="text/css">
    <link href="test/test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <img src="/test.gif"/>
 <img src="/test/test.gif"/>
 <img src="test.gif"/>
 <img src="test/test.gif"/>
    <img src="/test.jpg"/>
 <img src="/test/test.jpg"/>
 <img src="test.gif"/>
 <img src="test/test.jpg"/>
    <a href="/test.html">test</a>
 <a href="/test/test.html">test</a>
    <a href="test.html">test</a>
    <a href="test/test.html">test</a>
  </body>
</html>

次のように。該当する部分が変換されていることがわかります。

<html>
  <head>
    <script type="text/javascript" src="http://s3/test.js"></script>
    <script type="text/javascript" src="http://s3/test/test.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript" src="test/test.js"></script>
    <link rel="stylesheet" type="text/css" href="http://s3/test.css"/>
    <link rel="stylesheet" type="text/css" href="http://s3/test/test.css"/>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <link rel="stylesheet" type="text/css" href="test/test.css"/>
  </head>
  <body>
    <img src="http://s3/test.gif"/>
    <img src="http://s3/test/test.gif"/>
    <img src="test.gif"/>
    <img src="test/test.gif"/>
    <img src="http://s3/test.jpg"/>
    <img src="http://s3/test/test.jpg"/>
    <img src="test.gif"/>
    <img src="test/test.jpg"/>
    <a href="/test.html">test</a>
    <a href="/test/test.html">test</a>
    <a href="test.html">test</a>
    <a href="test/test.html">test</a>
  </body>
</html>

"SUZ-LAB AMI"に"atomic"のリポジトリを追加しておこう。
--------
http://www.suz-lab.com

0 コメント: