S3をWebサーバーにして静的コンテンツを公開する方法を紹介します。

  1. S3パブリック編
  2. S3署名付きURL編
  3. CloudFrontパブリック編　←コレ！
  4. CloudFront署名付きURL編　
  5. CloudFront署名付きCookie編

手順

バケットの作成

まずはバケットを作成しましょう。

マネジメントコンソールでS3のページを開きます。 バケットを作成をクリックします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png

バケットの名前を入れて、リージョンを選択します。 バケット名は世界中のS3で一意である必要があります。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png

「バケットのブロックパブリックアクセス設定」はデフォルトのすべてブロックで問題ありません。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-3(iPad).png

これでバケット作成は完了です。

HTMLの格納

作成したバケットを選択します。 そして、HTMLファイルをドラッグアンドドロップします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png

設定が色々ありますが、画面最下部のアップロードを実行します。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png

複数ファイルやフォルダーまるごとアップロードすることも可能です。

CloudFrontの設定

まず、マネジメントコンソールでCloudFrontの画面を開きます。 そして、「Create Distoribution」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad).png

「Get Started」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (1).png

「Origin Domain Name」のところに、S3のバケット名を入れると、候補が表示されるので、「--- Amazon S3 Buckets ---」のセクション内にある、バケットを選択します。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (2).png

設定項目は、以下のように設定しました。

項目設定内容説明
Restrict Bucket AccessYesユーザーが常にAmazonS3URLではなくCloudFrontURLを使用してAmazonS3コンテンツにアクセスすることを要求する場合は、[はい]をクリックします。これは、署名付きURLまたは署名付きCookieを使用してコンテンツへのアクセスを制限する場合に役立ちます。ヘルプで、「CloudFrontを介したプライベートコンテンツの提供」を参照してください。
Origin Access IdentifyCreate a New Identityユーザーが常にCloudFrontURLを使用してAmazonS3コンテンツにアクセスすることを要求するには、特別なCloudFrontユーザー（オリジンアクセスID）をオリジンに割り当てます。新しいオリジンアクセスIDを作成するか、既存のIDを再利用できます（一般的な使用例では、既存のIDを再利用することをお勧めします）。追加の構成が必要です。ヘルプで、「CloudFrontを介したプライベートコンテンツの提供」を参照してください。
Grant Read Permissions on BucketYes, Update Bucket Policyディストリビューションの作成時にCloudFrontがオリジンアクセスIDに読み取りアクセス許可を自動的に付与して、CloudFrontがAmazon S3バケット内のオブジェクトにアクセスできるようにする場合は、[はい、マイバケットアクセス許可を更新します]をクリックします。どちらのオプションを選択する場合でも、バケットの権限を確認する必要があります。

設定したら画面最下部の「Create Distribution」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (3).png

5分ほど待つと、ステータスが「In Progress」から「Deployed」に変わります。 ディストリビューションの一覧から、作成したものを選ぶと、CloudFrontが発行したドメイン名がわかります。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (4).png

今回の例では、 http://d168j73yp42rht.cloudfront.net/index.html にアクセスすると、S3に配置したコンテンツが確認できます。

CloudFront経由でS3にアクセスさせることで、HTTPS接続を強制させたり、独自ドメインを適用したりできるようになります。