Amazon S3のコンテンツをAmazon CloudFrontで配信させる方法

TOP
コラム
Amazon S3のコンテンツをAm

はじめに

自作のアニメや映画、画像などを配信したいと思っている方はいらっしゃるかと思います。今回はAWSのサービスであるAmazon S3とAmzon CloudFrontを使ったコンテンツ配信の方法を紹介します。 Amazon CloudFrontはオリジンサーバとエッジサーバを設置して全世界のユーザーにスピーディーにコンテンツを配信することを可能にするCDN（コンテンツデリバリーネットワーク）です。Amazon S3はSimple Storage Serviceの略で、簡単に言ってしまえばクラウド上のストレージになります。ただこのAmazon S3ですが、HTMLファイルを配置することでWebページを立てることが可能です。そこで今回は、このAmazon CloudFrontとAmazon S3を使って、コンテンツを配信させる仕組みを作成してみたいと思います。なお今回は画像コンテンツを配信します。※以下Amazon S3は「S3」と呼び、Amazon CloudFrontは「CloudFront」と呼びます。

S3の設定

ではさっそく始めていきたいと思います。S3に配信元となるバケットを用意し、その中にコンテンツをアップロードします。
バケットの名前は任意に決めてください。
その他、バージョニングやパブリックアクセスに関しては、デフォルトで問題ないです。

ClouFrontの設定

では次にClondFrontを始めていきます。

「Create Distribution」を押下し、ディストリビューションを作成していきます。
色々と設定する箇所がありますが、以下赤枠のみ設定し、後はデフォルトで問題ないです。

・Origin Domain Name：作成したバケットを選びます。
・Restrict Bucket Access：有効にします。これはCloudFrontのURLを使ったアクセスのみしか許可しないようにしています。バケットへの直接のアクセスをブロックします。
・Origin Access Identity：CloudFrontがS3にアクセスするのを許可するためのIDになります。
後ほどS3にCloudFrontからのアクセスを許可するように設定します。

作成が完了したら、左側のDistributionを見てみましょう。
ステータスが「Deployed」になればCloudFrontが起動した状態になります。
※Deployedされるのに数分かかります。
対象のディストリビューションを選択して、上部の「Origins and Origin Groups」を押下します。
「Origin Access Identity」に記さている後ろのID番号が後程必要になるので控えておきます。

origin-access-identity/cloudfront/xxxxxxxxxxx（このxのところです。）

S3のバケットにCloudFrontからのアクセスを許可する

では、先ほど作成したS3のバケットを開きます。バケットポリシーを開きます。
以下、コピペしてください。

{
　"Version": "2012-10-17",
　"Statement": [
　　{
　　"Effect": "Allow",
　　"Principal": {
　　　"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxxxxxxxxx（xに先程のIDを入れてください））"
　　　},
　　"Action": "s3:GetObject",
　　"Resource": "arn:aws:s3:::xxxxxxxxxxx（xに対象のバケット名を入れてください）/*"
　　}
　]
}

これでCloudFrontからS3の対象バケットへのアクセス権限が付与されました。
バケットポリシーを保存してください。

S3上にWebページを立てる

では次にS3上にWebページを立てます。以下HTMLファイルをローカルに作成しましょう。
以下コピペして頂いて、対象任意にカスタマイズしてください。

index.html

<!DOCTYPE html>
<html>
　<head>
　　<meta charset = "UTF-8">
　　<title>xxxxx（タイトルを入れます）</title>
</head>
　<body>
　　<p>xxxxx（本文を入れます）</p>
　　<img src="https://xxxxxxxx（Amazon CloudFrontのドメイン名を入れます）/xxxxxコンテンツ名を入れます">
　</body>
</html>

CloudFrontのドメイン名は以下写真を参考にしてください。

次にindex.htmlを配置させ、Webページを表示させるためのバケットを作成します。
名前を任意に決めて、バージョニング等の設定をデフォルトで設定します。
パブリックアクセスブロックの個所は今回はオフにします。

では、そのバケットにindex.htmlをアップロードしてください。
プロパティから「Static website hosting」を選びます。
インデックスドキュメントにアップロードしたindex.htmlを入れて、保存してください。
※URLが表示されていますが、これを使ってWebサイトにアクセスできるようになります。

ここまででアクセスできそうなところですが、バケットポリシーを設定しないとURLにアクセスできません。パブリックアクセスのブロックを無効にしているはずなのにと、疑問に思うかもしれません。パブリックアクセスブロックは、「アカウントレベル」（ユーザー）のアクセスを制御するものだと推測しています。バケットへのアクセスに関しては、バケットポリシーで別に設定するものだと推測しています。

以下をバケットポリシーに記載してください。

{
　"Version": "2012-10-17",
　"Statement": [
　　{
　　"Sid": "PublicReadGetObject",
　　"Effect": "Allow",
　　"Principal": "*",
　　"Action": "s3:GetObject",
　　"Resource": "arn:aws:s3:::xxxxxx（index.htmlのバケット名を指定）/*"
　　}
　]
}

これで準備は完了です。
Static website hostingに行き、URLにアクセスしてみましょう。
自分の写真が表示されれば成功です。

最後に

いかがでしたでしょうか？ S3のコンテンツをCloudFrontを使って配信する仕組みを作成しました。 CloudFront経由にすることで、コンテンツのバケットに直接アクセスされることも無いですし、海外のユーザーがいる場合、キャッシュサーバーから配信できるので、素早いレスポンスが可能になります。またS3からコンテンツを直接配信するよりも、CloudFrontから配信させる方がコストもやすくなるようです。是非自分のコンテンツをAmazon S3とAmazon CloudFrontを使って配信してください。