CloudFrontでS3のコンテンツを配信する

CloudFrontでS3のコンテンツを配信する

前回、CloudFrontを使ってELBをOriginとした配信を試しましたが、今日はS3バケットから静的コンテンツ(画像)を配信してみましょう。

f:id:TOSHIOSHIMO:20191207205303j:plain

S3にアップロードしている猫は、広島市内の黄金山で撮ったものです。

写真が趣味で、Flickrに9年分をアーカイブしています。今も継続していて更新中なので興味があればぜひ。

 構成図

S3のOriginとして、S3バケットを指定します。S3バケット内のコンテンツは直接公開されるのではなく、CloudFront経由で配信されます。

f:id:TOSHIOSHIMO:20191207205817p:plain

oshimo1108というS3バケットを作成してあり、画像のファイル名でコンテンツが保存されている状態です。パブリックアクセスは許可していません。

f:id:TOSHIOSHIMO:20191207195014p:plain

ディストリビューションを作成する

CloudFrontのダッシュボードを開き、Create Distributionをクリックします。

f:id:TOSHIOSHIMO:20191207200100p:plain

Origin Domain NameにS3のバケットを指定

Default Root Objectにindex.htmlを指定

してCreateをクリックします

f:id:TOSHIOSHIMO:20191207202830p:plain

 

f:id:TOSHIOSHIMO:20191207202831p:plain

Originの設定を行う

Originの設定で、以下のように設定します。

Restrict Bucket Access: Yes

Origin Access Idenrify: Create a New Identify

Grant Read Permissions on Bucket: Yes, Update Bucket Policy

f:id:TOSHIOSHIMO:20191207204341p:plain


ディストリビューションがDeployされるのを待つ

CloudFrontのディストリビューション一覧の画面に戻ったら、StatusがDeployedになるのを待ちましょう。10分程度かかりました。

f:id:TOSHIOSHIMO:20191207200606p:plain

以下のようなテキストファイルをindex.htmlという名前で作成し、画像と同じ場所にアップロードしておきます。

**********************

<html>

<body>

<img src=http://(ディストリビューションID).cloudfront.net/P9090473.jpg>

</body>

</html>

**********************

ブラウザで確認する

Default Root Objectにindex.htmlを指定しているので、以下の指定でindex.htmlが参照されて画像が表示されるはずです。

https://(CloudFrontDNS名)

f:id:TOSHIOSHIMO:20191207204958p:plain

 

最短突破 AWS認定ソリューションアーキテクト アソシエイト 合格教本

最短突破 AWS認定ソリューションアーキテクト アソシエイト 合格教本