S3をWebサーバーにしてコンテンツを公開する③（CloudFrontパブリック編）

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

1. [S3パブリック編](https://qiita.com/morikaz/items/8d196844aed38d0d8d0b)
2. [S3署名付きURL編](https://qiita.com/morikaz/items/0d9d69e21e0863204b8e)
3. [CloudFrontパブリック編](https://qiita.com/morikaz/items/04c053ead497e2a7c86c)　←コレ！
4. [CloudFront署名付きURL編](https://qiita.com/morikaz/items/f3159562caa133916bce)　
5. [CloudFront署名付きCookie編](https://qiita.com/morikaz/items/741fc1073dff746f7089)

# 手順

## バケットの作成

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

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

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a0698048-1503-f126-7ed0-b5c3f5135d75.png)

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

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/0b2e95c3-c631-4d27-6367-c1314ee01352.png)

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

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-3(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/0bc1268b-62a5-2343-d956-87ee614406b3.png)

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

## HTMLの格納

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

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/c8507633-f0b0-c65c-26e1-361416f4d065.png)

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

![s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/393f9aa4-4e81-415d-bb6c-41c37ec87f2c.png)

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

## CloudFrontの設定

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

![console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/323e2289-4483-3102-92af-abb80008a6f3.png)

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

![console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/2b3149a4-fae7-91c1-e2d3-6b7130665f3a.png)

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

![console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/fbf5da73-ccb1-04dd-b58a-04288f47f316.png)

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

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

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

![console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/a487891a-9a30-996c-6b82-59083730209b.png)

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

![console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180441/229d975b-0bf4-c382-c2b0-c2dfdf00ac6a.png)

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

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