S3 ＋ CloudFront でコンテンツを配信してみた

Amazon S3 バケットをオリジンとして設定し、
 ウェブブラウザを使用してディストリビューションをテストし、
  コンテンツが配信されていることを確認します。

作業前に[test-image.png]という名前でに適当なサンプル画像を用意しておいてください。

---
###1.Amazon S3 パケットを作成する

Amazon S3 を開き、「パケットを作成する」をクリックするとパケットの作成画面が表示されます。
バケット名 に「任意の名前」、リージョンに「アジアパシフィック（東京）」を選択し、「次へ」と進みます。
*既に存在しているパケット名は登録できません。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.51.36.png](https://qiita-image-store.s3.amazonaws.com/0/280929/1cac5d03-deb2-6f6b-51d4-2d4af57386e4.png)

[オプションの設定] は今回すべて無効にしておき、「次へ」と進みます。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.55.05.png](https://qiita-image-store.s3.amazonaws.com/0/280929/bb0c15fc-628e-86c1-ade8-09780c1ae3d6.png)

[アクセス許可の設定]を設定できますが、今回は何もせず、「次へ」と進みます。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.55.19.png](https://qiita-image-store.s3.amazonaws.com/0/280929/de8ccfed-187f-e9e2-947b-3b2507b9ce96.png)

「バケットの作成」をクリックし完了です。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.57.59.png](https://qiita-image-store.s3.amazonaws.com/0/280929/a629c0c6-ab12-bd72-f283-0b1c32d74732.png)

作成されたバケット名をクリックします。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102018.59.00.png](https://qiita-image-store.s3.amazonaws.com/0/280929/275984a0-0665-efa0-7d08-73f8b1330a3e.png)

「アップロード」をクリックし、「ファイルを追加」からダウンロードしておいた test-image.png を選択し、「次へ」と進みます。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.09.53.png](https://qiita-image-store.s3.amazonaws.com/0/280929/aa7eb3e4-b989-828f-81be-648608ecf7c9.png)

[アクセス許可を設定する] タブで画像をパブリック（外部との通信）で読み取れるようにします。
*S3 はデフォルトでプライベート（内部のみ）に設定されています。*
[パブリックアクセス許可を管理する] を「このオブジェクトにパブリック読み取りアクセス権限を付与する」 に変更し、「次へ」と進みます。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.15.31.png](https://qiita-image-store.s3.amazonaws.com/0/280929/84344e11-bd4f-b1fe-0999-be335f04c577.png)

[プロパティを設定する] オプションでは今回は何もせず「次へ」と進みます。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.15.42.png](https://qiita-image-store.s3.amazonaws.com/0/280929/de3f9351-cde4-cd67-cb94-6628519441e7.png)

「アップロード」します。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.16.35.png](https://qiita-image-store.s3.amazonaws.com/0/280929/7bc674c0-77b7-e764-9f43-fb49ce751b22.png)


###2.Amazon CloudFrontをを起動する

CloudFrontを開き、[Create Distribution (ディストリビューションを作成)]をクリックします。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.23.06.png](https://qiita-image-store.s3.amazonaws.com/0/280929/c54e44c2-11eb-10f5-1050-ada00775d07e.png)

[Origin Domain Name (オリジンのドメイン名)] で、test-image.png を保存したS3 バケットの名前を選択し、一番下の [Create Distribution (ディストリビューションを作成)] をクリックします。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.30.22.png](https://qiita-image-store.s3.amazonaws.com/0/280929/dc5245ee-2947-8100-ea3f-37649efdcafc.png)

ディストリビューションが作成されたらステータスが[In Progress (実行中)] から [Deployed (デプロイ済み)] に変わります。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.33.19.png](https://qiita-image-store.s3.amazonaws.com/0/280929/f14b4e7d-a900-9ea4-2566-4566fe97d462.png)

CloudFrontによってディストリビューションに割り当てられたドメイン名は、ディストリビューションの一覧に表示されます。 
[Distribution ID (ディストリビューションID)] をクリックすると、[Domain Name (ドメイン名) ] に CloudFront ドメインが表示されているページに移動します。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102019.45.36.png](https://qiita-image-store.s3.amazonaws.com/0/280929/3f03626e-7d52-ff11-b69e-06093dc225c7.png)


###3.リンクをテストする

コンピュータのテキストエディターを開き以下の HTML コードをコピーして貼り付けます。

```html:
<html>
<head>My CloudFront Test</head>
<body>
<p>My text content goes here.</p>
<p><img src="http://domain-name/object-name" alt="my test image"
</body>
</html>`
```

たとえば、ドメイン名が d111111abcdef8.cloudfront.net で、オブジェクトが image.jpg の場合、リンクの URL は次のようになります。
http://d111111abcdef8.cloudfront.net/image.jpg

参考：
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/distribution-web-testing.html

![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.29.00.png](https://qiita-image-store.s3.amazonaws.com/0/280929/feaf2377-6c7e-d327-c02a-73a4d74410a7.png)


###4.ディストリビューションを無効にする手順

作成したディストリビューションの隣にあるチェックボックスを選択して、「Disable (無効)」 をクリックするだけです。
![E382B9E382AFE383AAE383BCE383B3E382B7E383A7E38383E38388202018-08-102022.33.35.png](https://qiita-image-store.s3.amazonaws.com/0/280929/6ef009ed-0bb5-4635-bdfb-3ec31cc17033.png)

----
参考
[例: 静的ウェブサイトをセットアップする](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html)
[例: Amazon CloudFront でウェブサイトを高速化する](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-cloudfront-walkthrough.html)