本記事の概要につきましては大変お手数ですが 以下のブログをご参照ください

S3 に置いたコンテンツを CloudFront を利用 してインターネットに公開する方法まとめ

( A ) CloudFront のオリジンに Amazon S3 バケットを使用する方法

本記事で作成するのは以下の構成です

公式ドキュメントはお手数ですが以下をご参照ください

オリジンとしての Amazon S3 バケットの使用

手順

S3にバケットを作成しコンテンツを配置

[サービス]→[S3] の順にクリックします

 
[バケットを作成]をクリックします

 
[バケット名]に任意の文字列を入れて [バケットの作成]をクリックします
※ デフォルトで [パブリックアクセスをすべてブロック] のバケットになります

 
バケットが出来ました

 
トップページになる s3contents.html を作成しアップロードします
 

 
[次へ]を押します
 

 
[次へ]を押します

 
[次へ]を押します

 
[アップロード]を押します

 
 
アップロードできました

 
アップロードしたファイルの [オブジェクト URL] をブラウザで 確認してみます

 
アクセス不可となります

 
作成したバケットの[バケットポリシー]に何も入っていないことを確認します

CloudFront の作成

[サービス]→[CloudFront] の順にクリックします

 
[Create Distribution] をクリックします

 
[Web]セクションにある [Get Started] をクリックします

 
作成した S3 バケット をプルダウンから選択して入れます (bucket-name.s3.region.amazonaws.com)

 
 
[Restrict Bucket Access] を [Yes] に変更します　★重要
 

 
[Origin Access Identity] を [Create a New Identity] に変更します　★重要
また [Grant Read Permissions on Bucket] を [Yes, Update Bucket Policy] に変更します　★重要
 

 
他は変更せずに [Create Distribution] をクリックします

 
 
作成中になります

 
 
 
作成したディストリビューションを選択して [General] タブ にある [Edit] をクリックします

 
 
 
[Default Root Object] に アップロードしたファイルのファイル名を入れ [Yes, Edit] をクリックします
※ CloudFront のURL xxxx.cloudfront.net にアクセスした際にトップページになります

Origin Access Identity (確認のみ)

CloudFrontの左ペインにある [Origin Access Identity] を確認すると作成した [Origin Access Identity] があります
 

 
S3 バケット のバケットポリシーを確認してみると 上の [Origin Access Identity] のみからアクセスを許可する バケットポリシーに更新しています

確認

CloudFront のURL xxxx.cloudfront.net にアクセスしたところ無事開くことができました
( CloudFrontのステータスが "deployed" になってから 15分ほど待ちました ご注意ください )
 

HTTPS 化

通信の HTTPS 化 については以下に手順があります
お手数ですがご参照ください

CloudFront と Amazon S3 オリジンとの間の通信で HTTPS を必須にする

 
以上