ちょっと話題の記事

CloudFront + S3 によるCDN (Cache Distribution パターン) 構築手順

2016.04.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

渡辺です。 4月でも札幌は雪が降りますが、異常気象でもなんでもなく平常運転です。

今日は、いわゆるCache Distribution パターンでのCDN構築手順をまとめておきます。 CloudFrontの細かい設定は行いません。 S3を静的サイトホスティングで公開し、CloudFrontをキャッシュサーバとして設定し、独自ドメインで公開します。

cdp_cd1

構築手順

構築は以下の手順で行います。

  1. S3バケットを作成し、静的サイトホスティングで公開する
  2. CloudFrontを作成し、オリジンにS3バケットを設定し、代替ドメインを設定する
  3. Route53に代替ドメインのCNAMEレコードを追加する

S3バケットの設定

S3バケットを作成し、静的サイトホスティングで公開します。

s3web

S3バケット名は、最終的に公開するドメインとするのが無難でしょう(例: cdn.example.com)。 バケットを作成したならば、アクセス許可からバケットポリシーを編集します。

policy

公開するためのバケットポリシーは以下の通りです(cdn.example.comの部分は作成したバケット名に変更してください)。

{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"PublicReadForGetBucketObjects",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::cdn.example.com/*"
      ]
    }
  ]
}

詳細は、公式ドキュメントを参照しましょう。

S3バケットが作成できたならば、適当なファイルをアップロードして、S3の静的サイトホスティングが有効になっていることを確認してください。

CloudFrontの設定

CloudFrontを作成し、オリジンにS3バケットを設定し、代替ドメインを設定します。

CloudFrontのディストリビューションを作成するとき、オリジンとしてS3バケットを指定します。 「Origin Domain Name」をクリックすればS3バケットの一覧が表示されますので、先ほど作成したS3バケット(cdn.example.com)を選択します。

cloudfront

次に代替ドメインを設定します。 「Alternate Domain Names(CNAMEs)」に公開予定のドメインを指定してください(例: cdn.example.com)。

cloudfront2

ディストリビューションの作成には概ね15分ほどかかります。 ディストリビューションが作成できたならば、ドメイン(xxxxxx.cloudfront.net)を確認し、S3にアップロードしたファイルがCloudFront経由で取得できることを確認してください。

CloudFrontに関する基本的な情報は、AWS再入門 AmazonCloudFront編を参照しましょう。

Route53の設定

ここまででS3とCloudFrontによるCDNは構築できましたが、CDNのドメインがcloudfront.netです。 最後に、Route53を設定して、CloudFrontに独自ドメインでアクセスできるようにしましょう。

Route53で作成するレコードはCNAMEレコードです。 公開するドメインのCNAMEレコードを作成し、CloudFrontのドメイン(xxxxxx.cloudfront.net)をvalueとして設定してください。

route53

設定ができたならば、独自ドメインでCloudFront経由のファイルにアクセスができることを確認してください。 なお、Route53の設定は通常数分程度で反映されますが、DNSサーバ次第なので時間がかかる場合もあります。

まとめ

CloudFront + S3 によるCDNについて要点だけをまとめました。

マネジメントコンソールから設定するのが面倒であれば、Cache Distributionパターン(CloudFront+S3)を一撃で設定するに構築スクリプトを利用ください。 また、S3を静的ウェブホスティングで公開したくない場合は、特定バケットに特定ディストリビューションのみからアクセスできるよう設定するを参照ください。