ブログの高速化に。AWSのCloudFrontの設定手順まとめ

今日は自分用メモをかねてブログの高速化に役立つAWS(Amazon Web Service)のCDNであるCloudFrontの設定について書きます。
CDNについてご存じない方の為に引用。

CDN【Contents Delivery Network】（コンテンツデリバリネットワーク）
ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと。CDNを構築・運用し、企業などに有料で利用させるサービスをコンテンツデリバリサービス(CDS)という。
狭義にはデジタルコンテンツの大量配信に対応したネットワークを指し、広義にはファイルの配布ポイント管理から課金・認証システムまで、デジタルコンテンツの配布や販売に必要な機能をひととおり揃えたシステムを指す。

簡単にいうとAWSのサーバーを使って画像とか動画とかの重いデータを高速に表示させようっていうのが目的です。
サイトを高速化する方法は色々ありますが、一番手っ取り早くかつ高速化できるのはCDNっていうのが一般的になりつつあります。
ブログを運用する上でも高速化には興味があると思いますので、まだAWS使ってないっていう人に役に立てばいいかなと思います。
さて、設定の前にメリットを考えてやってみるかどうかを決めましょう。

AWSのCloudFrontを使うメリット

・画像を高速に表示できる
・サーバーが落ちにくくなる
（画像が外部のサーバーに置いてあるのでメインのサーバーではテキストとかの軽いデータとかだけの転送。なのでサーバー負荷少なくなるから落ちにくくなるよねっていう話）
・結果ブログの表示速度が高速化する
・初年度は無料で使える
というのが大きな所です。
他にもこういうサービスを使うことでサーバーの知識が増えたりなんかもあるんですがそれは個人差あるので置いときます。
ただ、使うときは一点だけ注意が必要です。
それはAWSが従量課金制っていう部分です。従量課金なので使った分だけ支払うので、ちょっとしか使ってない人はすごくコストが安く抑えることができるんですが、逆にいっぱい使ってるか分からないっていうような運用してる場合はちょっと怖いかもしれないです。
なので最初は全部本気で突っ込むのではなくて、徐々に増やしていってどのくらいの費用感かを体感してみるっていうのが安全ではないでしょうか。
メリットも分かったところで、実際の設定編です。
ここからは画像も織り交ぜて分かりやすく説明します。
今回の前提としては独自ドメインのサブドメインを使ってCloudFrontを利用するという流れです。
CloudFrontが実際に見るサーバーはAWSのS3を使います。

設定の手順

・AWSにサインアップ(要クレジットカード)
・Route53でドメインを設定
・S3の設定
・CloudFrontの設定
・番外編：S3へのデータアップロードはFTPクライアントでもできる
では説明していきます。

AWSにサインアップ(要クレジットカード)

まずはアカウントがないと始まらないっていう話ですね。
http://aws.amazon.com/jp/
にある無料で使用開始ってボタンをクリックしてアカウントを登録していきましょう。

無料で使用開始ってボタンをクリック
アカウントの登録はあとは順番に必要情報を入力していくだけでうまくいくと思いますので省略します。

Route53でドメインを設定

こっからが本番です。まずはドメインをAWSで管理するところから始めます。
AWSでドメインを管理する場合はRoute53というサービスを使います。
Route53にアクセスしてCreateHostedZoneをクリックします。

CreateHostedZoneをクリック
ドメイン名を入力する画面になるのでドメイン名を入力してCreateHostedZoneをクリックしたら登録完了です。

ドメイン名を入力してCreateHostedZoneをクリック
Delegation Set で出て来たIPをレジストラ側で設定することでドメインの向かい先がAWSになります。
ここに記載されたアドレスをレジストラに設定しましょう。

この情報を使います。
例えばムームードメインだとこんな感じになります。

ネームサーバーの設定に先ほどの情報を入力する。
次にRoute53のメニューにあるGo to Record Setをクリックしてサブドメインの設定にいきます。

Go to Record Setをクリック
次にCreate Record Setで設定を追加します。
CNAMEにサブドメインを設定して、valueの所は適当に何かを打ってCreate Record Setをクリック。
ここで適当に打ったvalueの所は後ほど設定するCloudFrontで表示されたS3のDomainNameを使用します。

ドメインとサブドメインの初期設定は以上です。次は実際にデータを置く場所にするS3の設定を行います。

S3の設定

S3の設定の前にまずs3って何って部分を引用。
S3は普通の静的サイトのホスティングとしても使えるサーバーというイメージで問題ないかと思います。

Amazon S3 はインターネット用のストレージサービスです。開発者がより楽にウェブスケールでのコンピュータ作業をできるように設計されています。
Amazon S3 ならシンプルなウェブサービス・インターフェイスをご提供できます。いつでも、ウェブ上のどこからでも容量に関係なくデータを格納・取得できるのです。これによって、開発者は拡張可能で信頼性が高く、安全で、高速でありながら安価なインフラストラクチャを利用することが可能になります。このシステムは、Amazon が使用しているウェブサイトのグローバルネットワークと同じものです。このサービスの目的は規模のメリットを最大化で開発者に提供することです。
http://aws.amazon.com/jp/s3/

まずはバケットを作ります。
Create Bucketをクリックしてバケットを作りましょう。

Create Bucketをクリック
bucketnameには適切な名前付けをします。ドメインで設定しない場合はこの文字列がそのまま使われることになるのでその辺を意識するといいかと思います。
バケット作成後はバケットポリシーを設定します。
これを設定しないと公開していない状態になるのでS3として公開できるようにポリシーを設定しましょう。

Add Bucket Policyをクリック
クリックするとポップアップの画面が出て来ます。
そこに以下のような感じで設定します。
コピペして使ってもらってもいいですが、設定したbucketnameの部分だけ変更してください。
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::設定したbucketname/*"
}
]
}
この設定が完了すると、S3をホスティングとして公開した状態になります。
これでも一応大丈夫なはずですが、念のためもう一個設定をしておきます。
Static Website Hostingのタブを選んで、Enable website hostingにチェックを入れて、Index Document:にindex.htmlとか入力してください。

これでS3の設定は完了です。次はいよいよCloudFrontの設定です。

CloudFrontの設定

また基礎編の引用です。基本大事なので読みましょう。

Amazon CloudFront はコンテンツ配信用のウェブサービスです。これは他の Amazon Web Services を統合し、開発者や事業主に、短い待ち時間と高速なデータ転送速度、および契約なしに、エンドユーザーにコンテンツを配信する簡単な方法を提供します。
http://aws.amazon.com/jp/cloudfront/

管理画面からCloudFrontに移動してCreateDistributionsをクリックします。

CreateDistributionsをクリック
Downloadを選択します。

Downloadを選択
Origin Domain Nameの設定は先ほど設定したS3にしましょう。
Alternate Domain Names(CNAMEs)にはRoute53で設定したサブドメインを入力します。

設定ができたらCreateDistribution。
設定内容はあとで変更できるので気にせずGO!
これでCloudFrontの設定完了。あとはRoute53で設定した適当に書いた部分にCloudFrontのDomainnameの値を埋めてやればドメインの向かい先がCloudFrontになります。
で、実際にデータが置かれているのがS3になるわけです。
何となく難しいかなと思ってましたが、やってみると意外に簡単に設定できます。

番外編：S3へのデータアップロードはFTPクライアントでもできる

S3へのデータ転送はFTPクライアントでも行えます。
オススメはCodaの開発元としても有名なPanicJapanさんの提供しているTransmit。
きれいな画面でモチベーションが上がるクライアントソフトです。
デフォルトでS3に対応しているので以下の情報を入れたらすぐにS3にアクセスできます。

アイコンもかわいくていい感じ。もちろん機能面もばっちり。
FTPでアクセスする為の情報は以下の手順で取得できます。
アカウント/コンソールからSecurityCredentialsを選択

SecurityCredentialsを選択
すると画面にアクセスキー ID、シークレットアクセスキーが表示されます。
この2つをクライアントに設定するだけでOKです。

使用するのはこの2つ
あとはこの情報をTransmitに入れて接続するだけです。

FTPソフト経由でのアップロードならデザイナーさんでもたいてい慣れてるので使いやすいかと思います。

最後に確認

CloudFrontの対象DistributionをみてCNAMEのドメインにアクセスして、アップロードしたファイル名に直接アクセスして表示されればOKです。
DNSの切り替わりのタイミングとかもあるので即時反映ではありませんので注意。
反映されなかったら1時間くらい待つくらいのゆるい感じで待ちましょう。
おいしいコーヒーでも飲んで待てばきっとすぐ時間はたちます。
あとはこの画像を使ってブログの記事を書けば、画像はAWSのCloudFrontから画像を引っ張ってきているので表示が結構早いはずです。
気になる人はスピードテストしてみてもいいと思います。
この記事でもCloudFront使って画像読んでるので結構画像数が多い割に表示は速くできていたと思います。
とっかかりはそこまで難しくないのでまずはここからやってみるというのがよいと思います。
最後に、まだやり始めた初心者なので「もっとこうする方がいい」っていうご意見あるかと思います。ありましたら教えてください。
あと、これだけやっとけばOKっていうことではもちろんなくて、フロントエンドやバックエンドの他の高速化ノウハウも駆使してブログ全体を見て設計することが一番重要だと思います。
高速化を実感する為の第一歩として、一番効果の高そうで導入が比較的容易なAWSのCloudFrontがいいんじゃないのかなという事で書いてみました。
あ、ちなみにこの画面キャプチャですが結構がんばって作りましたがAWSの管理画面は結構よく変わるらしいので実際にやってみたら違うっていう事もあるかと思います。
ただ、画面の見た目は違っても実際にしないといけない内容はそこまで変わるものでもないはずですので、あくまで参考程度にとどめておいていただければ幸いです。
参考資料
Amazon S3 and CloudFront, Route 53