S3 + Cloud Front で 静的サイトを配信

※自分用のメモです。間違っている箇所がありましたら、教えて頂けると幸いです。

<a href="https://qiita.com/kohatang/items/26d9df4a348d44bbb7d4">S3+CloudFrontで静的サイトを配信する</a>

# Route53でドメイン購入
- `登録済みドメイン` > `ドメインの登録`
- ドメイン名： `sample-mypage.com` で購入&登録

# Certificate Manager(ACM) でSSL証明書発行
httpsにする場合、SSL証明書が必要なので、今回はACMで発行します。

<a href="https://aws.amazon.com/jp/premiumsupport/knowledge-center/custom-ssl-certificate-cloudfront/"><font color="red">※CloudFrontでACMで取得した証明書を利用する場合、
<b>米国東部 (バージニア北部) us-east-1 </b>で取得しないといけません。</font></a>

<a href="https://iryond.hatenablog.com/entry/2016/10/08/130918">CloudFrontとACM連携でハマった話。</a>


- `証明書のリクエスト` > `パブリック証明書のリクエスト` を選択
- `ドメイン名の追加`で`*.sample-mypage.com`と入力
- `検証方法の選択`で`DNSの検証`を選択
- CNAME レコードを作成を要求されますが、ここでは`続行`をクリック
- 以下の画面が表示されるので、`Route53でのレコードの作成`
![スクリーンショット 2019-10-02 17.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66719/9f9205fe-8009-c318-31db-331a495cc92a.png)
発行済み、になれば成功です。

# S3バケットの作成

バケット名：`sample.mypage.com`

各項目を以下のように設定します。

|項目|内容|
| ---- | ---- |
|ブロックパブリックアクセス|全てのチェックボックスを外す|
|CROS設定|以下のように設定|


```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
```


# Cloud Frontの作成

- `Create Distribution` > Webの`Get Started` をクリック
- 以下のように設定して作成

|項目|内容|
| ---- | ---- |
|Origin Domain Name|sample.mypage.com <br>(先ほど作成したS3バケットを選択)|
|Restrict Bucket Access|Yes|
|Origin Access Identity|Create a New Identity|
|Grant Read Permissions on Bucket|Yes, Update Bucket Policy|
|Viewer Protocol Policy|Redirect HTTP to HTTPS|
|Compress Objects Automatically|Yes|
|Alternate Domain Names|sample-mypage.com|
|SSL Certificate|Custom SSL Certificate を選択し、<br> *.sample-mypage.com(先ほど作成したSSL証明書)を選択|
|Default Root Object|/index.html|

作成したDistributionをクリックすると、詳細が確認できます。
![スクリーンショット 2019-10-03 13.08.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66719/d35b933a-7bce-9dce-05de-db2d35abd454.png)

- `General`タブを選択し、`Edit`をクリック
- `Alternate Domain Names (CNAMEs)` に `www.sample-mypage.com` と設定

また、SPAサイトを作成する場合、以下の設定をします。

- `Error Page`タブを選択し、`Create Custom Error Response`をクリック
- HTTP Error Code の 403, 404で、それぞれ以下のように設定して作成

|項目|内容|
| ---- | ---- |
|Customize Error Response|Yes|
|Response Page Path|/index.html|
|HTTP Response Code|200:OK|

![スクリーンショット 2019-10-03 13.04.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66719/921fa8d0-fe00-ebcb-8307-e21f724e6897.png)

# Route53でエイリアスを作成

- `ホストゾーン` > `sample-mypage.com(購入したドメイン名)`　> `レコードセットの登録`
- 以下のように設定して作成

|項目|内容|
| ---- | ---- |
|名前|www.sample-mypage.com|
|タイプ|A-IPv4アドレス|
|エイリアス|はい|
|エイリアス先|xxx.cloudfront.net|

※エイリアス先はCloud Frontで確認
![スクリーンショット 2019-10-03 14.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66719/c581a133-64b3-0379-a0da-7dc420087020.png)


ドメインの反映にはしばらく時間がかかります。

S3バケットに`index.html`をアップロードし、`https://www.sample-mypage.com`にアクセスすると、静的サイトが表示されるのが確認できます。
![スクリーンショット 2019-10-03 14.27.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66719/74b29009-a5f0-b47c-816b-a5a5c85953b5.png)