外部ドメインを用いたS3静的サイト構築(HTTPS通信)

##はじめに
Route53でドメイン取得したものではS3静的サイト構築したことあったが、
外部ドメイン（お名前ドットコム）でやったことなかったので書いてみました。
ほとんど同じですが。。。

今回はあるコーポレートサイトをAWSへ移行した時の学びをアウトプットします。
NSレコード書き換えやMX、CNAMEレコード書き換えで混乱、失敗したのでこの点は注意が必要です（＾＾；）

## AWSリソース
・S3
・Cloudfront
・Route53
・Certificate Manager

以下のようなアーキテクチャー。


![AWS](https://user-images.githubusercontent.com/67918886/127732479-38397aa0-d2dd-4c80-bf24-18da54f928c8.png)

### S3設定

#### バケット作成

※今回はドメインを仮の`yamato.com`で表記してるので置き換えてください。

`S3`の`static hosting`機能を用いて構築します。
まずは指定ドメインでアクセスするには、
バケット名をドメインと同じ名前にする必要があります。

今回`https://www.yamato.com`(仮)でアクセスしたかったので、
バケット名を`www.yamato.com`で作成します。
※そうしないとRoute53からアクセスができない仕様のため

作成したらバケットにリソースを配置。


#### アクセス許可

配置したリソースを書くセス可能にするために設定します。

まずはアクセス許可のタブを選び以下のように設定します。

![S3access](https://user-images.githubusercontent.com/67918886/127732626-d49040de-234f-441a-90c0-9c8e320d1b35.png)

次にバケットポリシーを設定します。
編集ボタンを押し以下のように設定。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yamato.com/*"
        }
    ]
}
```
これでどこからでも該当バケットへの`GetObject`を許可していることになります。

#### 静的ウェブサイトホスティング

この機能を有効にする設定です。
プロパティタブから一番下にある静的ウェブサイトホスティングを有効にします。バケット作成時に有効にできます。

バケットウェブサイトエンドポイントとしてURLが表示されるのでここで正常に表示されるか確認できます。

### Route53設定

`Route53`の画面でまずは**ホストゾーン**を作成します。
よこのタブのホストゾーンを選択し、ホストゾーン作成ボタンを押します。

ドメイン名に**yamato.com**を指定します。
タイプはパブリックホストゾーンを選びます。

そしてホストゾーンの作成ボタンを押して作成。

作成すると一覧に表示され、ホストゾーンを選択すると**レコード**を作成できる画面が表示されます。

今回のドメインは**yamato.com**をお名前.comで取得していたため、お名前.com側でNSレコードを**Route53**のものを設定します。（Route53に記載のNSレコード４つ）

その場合はもともと設定してあった**TXT**、**MX**、**CNAME**レコードは忘れずに**Route53**側に設定してください。

**レコード作成**のボタンから作成できます。

※注意
TXTレコードが複数ある場合はダブルクオーテーションで囲い一つにまとめて登録する。
MXレコードについて、サブドメインに@は不要です。
もともと＠が設定していたので、Route53側で＠を設定するとメールが使用できなくなりテンパリました＾＾；
空白でよいです。

#### S3向けのレコード作成

以下のように設定します。

![Route53-a](https://user-images.githubusercontent.com/67918886/127732864-0a588348-5c84-4a93-8d3c-dd0ac585b16e.png)


レコード名に**www**
ルーティングポリシーはシングルルーティングのままで。
レコードタイプは**Aレコード**
ルーティング先に**エイリアス**を有効に
選択できるようになるので**S3ウェブサイトエンドポイント**を選択。
リージョンは**東京リージョン**を選択。
エンドポイントを入力に作成したバケットが選択肢にでてくるので選択。

**レコード作成**のボタンを押して作成完了します。

ここまでの設定でHTTP通信で指定ドメインを用いてアクセスが可能になります。
`http://www.yamato.com`で正常に表示されるか確認。

次にSSL化（HTTPS通信）します。

### Certificate Managerの設定

サービスから**Certificate Manager**を選択。
リージョンを**バージニア北部**を選択。（**Cloudfront**へ証明書を登録するため）

**証明書のプロビジョニング**を選択。

**パブリック証明書のリクエスト**を選択し、証明書のリクエストボタンを押す。

ドメイン名に**www.yamato.com**と入力し次へ。

**DNSの検証**を選択し次へ。

タグ追加は任意。
最後確認で**確定とリクエスト**ボタンを押して作成。

以下のようにレコードタブを押して画面にでてくる**Route53でのレコードの追加**のボタンを押します。
※画像は発行済のため状況が発行済になってるが、実際は検証中となる。

![Certificate-a](https://user-images.githubusercontent.com/67918886/127732976-fc75f2eb-3214-4566-bd41-4696cf45b6f7.png)


問題なければ30分程度で発行されます。

発行されたら**Cloudfront**の設定へ。

### Cloudfrontの設定

**create distribution**ボタンを押して作成開始。

**Origin domain**に選択してS3を選ぶのではなく、静的ホスティング機能に記載のアクセス先を直接ペーストする。

詳細は以下のように設定。

![cloudfront1-a](https://user-images.githubusercontent.com/67918886/127733017-4ca44968-b5a8-46fd-81e0-6a6d43ffe944.png)

HTTP only以外を選ぶとアクセスできないので注意。

**Origin path**は空白のまま。
**Origin name**は自動設定。

**Viewer protocol policy**は**Redirect HTTP to HTTPS**を選択。
（HTTP通信をHTTPS通信へリダイレクトする設定）

**Alternate domain name (CNAME)** でadd itemを選択し**www.yamato.com**と入力し、このアドレスでアクセスできるよう設定。

**Custom SSL certificate**で発行した証明書を選択。
該当ドメイン名で選択できる。

画面は以下のようになる。

![cloudfront2-a](https://user-images.githubusercontent.com/67918886/127733134-3442fe33-52a9-46cd-8576-d1b9090a2381.png)


**create distribution**ボタンを押して作成する。

cloudfrontのstatusがenabledになったら、
Route53からCloudfrontへトラフィックするために最後に設定する。

### Route53再設定

**yamato.com**のホストゾーンを選択し、
**www.yamato.com**のレコードにチェック入れると右側に編集画面がでるので編集ボタンを押す。

**エイリアス**の箇所で**Cloudfront**を選択。
リージョンは自動選択。
該当の**Cloudfront**を選択。IDを確認して間違えないように。

保存を押して編集を反映させます。

これで設定終了です。
`https://www.yamato.com`で問題なく表示されるか確認。
またHTTP通信でリダイレクトされるかも確認。

作業終了。

### 保守作業時の対応

S3のリソースを変える保守が発生した場合は、変更を反映させるために**Cloudfront**のキャッシュをクリアします。

AWSサービスで**Cloudfront**を選択。

該当のIDを選択。

**Invalidations**タブを選択。

**create invalidation**ボタンを押す。

![cloudfront3](https://user-images.githubusercontent.com/67918886/127733213-a6b0caeb-046c-4cfb-aecf-8d6b174b5ca7.png)


**Add object paths**にワイルドカードを使用してすべてのキャッシュを削除を指定。
**create invalidation**ボタンを押して完了。

アクセスして変更点が反映されているか確認。