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

Publish2013/02/28(木)

Update2016/01/02(土)

ブログの高速化に。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をクリックしたら登録完了です。
ドメイン名を入力してCreateHostedZoneをクリック
ドメイン名を入力してCreateHostedZoneをクリック

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

例えばムームードメインだとこんな感じになります。
ネームサーバーの設定に先ほどの情報を入力する
ネームサーバーの設定に先ほどの情報を入力する。

次にRoute53のメニューにあるGo to Record Setをクリックしてサブドメインの設定にいきます。
Go to Record Setをクリック
Go to Record Setをクリック

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

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

S3の設定

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

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

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

bucketnameには適切な名前付けをします。ドメインで設定しない場合はこの文字列がそのまま使われることになるのでその辺を意識するといいかと思います。

バケット作成後はバケットポリシーを設定します。
これを設定しないと公開していない状態になるのでS3として公開できるようにポリシーを設定しましょう。
Add Bucket Policyをクリック
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とか入力してください。
Enable website hostingにチェックを入れて、Index Document:にindex.htmlとか入力

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

CloudFrontの設定

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

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

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

Downloadを選択します。
Downloadを選択
Downloadを選択

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

設定ができたらCreateDistribution。
設定内容はあとで変更できるので気にせずGO!

これでCloudFrontの設定完了。あとはRoute53で設定した適当に書いた部分にCloudFrontのDomainnameの値を埋めてやればドメインの向かい先がCloudFrontになります。
で、実際にデータが置かれているのがS3になるわけです。

何となく難しいかなと思ってましたが、やってみると意外に簡単に設定できます。

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

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

FTPでアクセスする為の情報は以下の手順で取得できます。

アカウント/コンソールからSecurityCredentialsを選択
SecurityCredentialsを選択
SecurityCredentialsを選択

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

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

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

最後に確認

CloudFrontの対象DistributionをみてCNAMEのドメインにアクセスして、アップロードしたファイル名に直接アクセスして表示されればOKです。
DNSの切り替わりのタイミングとかもあるので即時反映ではありませんので注意。
反映されなかったら1時間くらい待つくらいのゆるい感じで待ちましょう。
おいしいコーヒーでも飲んで待てばきっとすぐ時間はたちます。

あとはこの画像を使ってブログの記事を書けば、画像はAWSのCloudFrontから画像を引っ張ってきているので表示が結構早いはずです。
気になる人はスピードテストしてみてもいいと思います。

この記事でもCloudFront使って画像読んでるので結構画像数が多い割に表示は速くできていたと思います。
とっかかりはそこまで難しくないのでまずはここからやってみるというのがよいと思います。

最後に、まだやり始めた初心者なので「もっとこうする方がいい」っていうご意見あるかと思います。ありましたら教えてください。
あと、これだけやっとけばOKっていうことではもちろんなくて、フロントエンドやバックエンドの他の高速化ノウハウも駆使してブログ全体を見て設計することが一番重要だと思います。
高速化を実感する為の第一歩として、一番効果の高そうで導入が比較的容易なAWSのCloudFrontがいいんじゃないのかなという事で書いてみました。

あ、ちなみにこの画面キャプチャですが結構がんばって作りましたがAWSの管理画面は結構よく変わるらしいので実際にやってみたら違うっていう事もあるかと思います。
ただ、画面の見た目は違っても実際にしないといけない内容はそこまで変わるものでもないはずですので、あくまで参考程度にとどめておいていただければ幸いです。

参考資料
Amazon S3 and CloudFront, Route 53

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • 複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS たまに使っているのですが、ブログでは書いてなかったのと、最近めっきりこういう系の記事書いてないのでちょこっと紹介します。 Facebookでは結構前にさらっとgistのURLをシェアしたりしているので知っている方も多いかもしれませんけど、改めて書いてみます。 サイトを作って確認するときに、僕はResponsive Design […]
  • はじめてのサーバサイド w/ AWS in 大阪はじめてのサーバサイド w/ AWS in 大阪 2/13の水曜日にふにすの事務所ではじめてのサーバサイド w/ AWS in […]
  • Bitcasaがサービス終了。Bitcasaがサービス終了。 今日とあるサービスが終了するということで、そのことについて。 その終了するサービスはクラウドストレージサービスの「Bitcasa」です。 先週の金曜の朝、こんなメールがきました。 This message is to inform you that the Bitcasa Drive service will no longer be supported. […]
  • ハロウィン用の無料素材(壁紙・フォント・アイコン)のまとめ2015年版ハロウィン用の無料素材(壁紙・フォント・アイコン)のまとめ2015年版 昨日の記事でも書いたように、ハロウィンに乗っかることにしたので、その時に無料で使える素材を調べてみたのでついでにまとめて公開することにしました。 なお、利用する際はそれぞれの配布元サイトで規約を確認してから使用してくださいね。 時間の経過とともにリンク切れなどが起こる可能性もあります。 こちらで気づいたらその分は変更しますが、漏れてたらご指摘いただけるとありがたいです。 […]
  • The Rockのinstagram活用例はすごく参考になる。The Rockのinstagram活用例はすごく参考になる。 今日は海外のソーシャル活用事例として、The Rockの活用方法がすごく面白いなと思っているのでそのことについて書こうと思います。 The Rockとは? そもそもWWEを見ていない人にはThe Rockって誰?ということになりかねないので、The Rockについて軽く説明します。 The […]
  • 無料で使えるベクターアイコンまとめ無料で使えるベクターアイコンまとめ 今回は釣りタイトル臭い感じになってプンプンしてますが、ちょっと調べる機会があったのでついでに紹介しましょう。 無料で使えるアイコン(使用範囲はもちろんサイトを確認してね)を配布しているサイト10個です。 Free Vector Icons Free Vector Icons シンプルなアイコン。 ダウンロード形式はai ARROW […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month