Amazon CloudFront でちょっぱやを実装してみた｜横浜のホームページ制作スタジオFIXの社長ブログ

Amazon CloudFront でちょっぱやを実装してみた

2009/04/13

どうもこんにちは!!
Amazon EBSで Apache2とmysqlを動かしてみた
自称EC2マニアのWebデザイナーです。

↑こちらが実際にAmazon EC2上で動いているサービスです。
無料ホームページ素材ダウンロード [ Web-Stylish!! ] / テストサイト

いかがです？　お気づきになられましたか？
そうなんです…。お世辞にも速いとは言えませんよね…？
（これでもいちお「Gzip」というパフォーマンス処理をしてある）

いくら高性能のサーバといえど、置かれているのは遙か海の彼方アメリカ。
物理的な距離の壁は越えられず、結局この程度の通信速度になってしまうんですね。

別にそこまで重くないからいいんぢゃない？
そう思えるならばここでゴールなのですが、
ビジネスの成功にとってWebサイトのパフォーマンスが非常に重要であることを
体験してきた私にとっては、イマイチ乗り気になれぬレベル。

ここまでか、あたしの Amazon EC2の旅…。(´･ω･)　

ところが、そんな悩みを解決し、
いわゆる「ちょっぱや」を実現できるオプションサービスがあるらしい！
その名も Amazon CloudFront 。

ちょっぱやの仕組みは、日本国内に置かれた Amazonの
キャッシュサーバを利用する、いわゆるCDN。

詳しくは参考サイトをご参照くださいね。
[ 参考サイト ]
AmazonS3上のファイルを国内でも高速配信可能なAmazon CloudFrontリリース
Amazon CloudFrontの使用上の注意とTipsまとめ

どうせここまで来てしまったんだもの。
持ち前の好奇心と探求心の残り汁を搾り出し Amazon CloudFront に挑戦だ！

横浜のホームページ制作スタジオFIXの社長ブログ

Amazon CloudFront へアクセスして、
「Sign Up For Amazon CloudFront」をクリック。

一番上の 「Complete Sin Up」 をクリックするだけで申込み完了。

Firefoxのアドオン「s3fox」を起動して、Amazon S3にアクセス。
「s3fox」は、以下から無料で入手できます。
Amazon S3 Firefox Organizer(S3Fox) 0.4.6

右側のウィンドウ上部にある「バケット作成ボタン」をクリック。
バケットとは、いわゆるフォルダのこと。

Folder Name :
このフォルダ名を、CNAMEとしてイメージのパスに使用することになるので慎重に決める。
私は「data.web-stylish.com」としました。

作成したバケット名の上で右クリックして「Manage Distributions」を選択。

CNAME： ステップ5で決めたもの。
私の場合「data.web-stylish.com」と入力して
「Create Distribution」 をクリック。

しばらく待つと Status が「Deployed」に変わります。
Resource Url : に表示されたURLをメモします。

バケット名の上で右クリックして「Edit ACL」を選択。

右端 FullControl の蘭の赤い×をクリックして、緑のチェックマークに変更します。
Apply to subfolders にチェックをして、OKをクリック。
これで、Amazon S3での作業は一度終了。

「お名前.com」にアクセスして「ドメインNavi」へログイン。

ドメイン設定＞ネームサーバーの設定＞DNS設定 をクリック。

CNAMEを設定するドメインを選択して 「入力画面へ進む」 をクリック。

[ ホスト名 ] … data
[ タイプ ] …　CNAME
[ VALUE ] …　ステップ8でメモした Amazon ClounFront のURL
入力し終わったら「追加」をクリックして確認画面へ進み、設定を保存。
1時間くらい経ってからブラウザで
「data.web-stylish.com」へアクセスできるようになりました。

再度、Firefoxのアドオン「s3fox」を起動して、Amazon S3にアクセス。
バケットの中に「001」という新規フォルダを作成して、
ホームページ用の画像や、CSSファイルをアップロードします。

なぜ「001」みたいなフォルダを作成する理由は
Amazon CloudFront のキャッシュは、24時間以下に設定できないから。

画像をS3上に上書きアップした場合、物理的にファイルは更新されていても、
CDNのキャッシュが最大24時間残ってしまうので、
ブラウザで確認すると古い画像が見えてしまうのです。

それを回避するために、「001」のようなフォルダを作成し、
htmlファイル内のイメージのパスを以下のように設定します。
<img src="http://data.web-stylish.com/001/images/sample.gif"/>

画像を修正する時は、S3上に新たに「002」のようなフォルダを作成し、
その中に新しい画像をアップロードした上でイメージのパスを
<img src="http://data.web-stylish.com/002/images/sample.gif"/>
のように書き換えます。

このように、めんどっちぃ作業が必要ですが
こうすることで、ちょっぱや＆リアル更新を実現させたのが、こちら。↓↓

無料ホームページ素材ダウンロード [ Web-Stylish!! ] / 本番サイト

横浜のホームページ制作スタジオFIXの社長ブログ