S3 + Route53 + CloudFront&ACMを使って独自ドメインの静的ページをhttpsで表示させる

**公式Doc通りにやっていたら意外な落とし穴にあったので、最初の設定から問題の所まで上手くいったやり方を書いときます。**

##**問題があった所：**
CloudFrontからhttpsのURLリンクにアクセスしたら以下の様な結果が返ってきた。

This XML file does not appear to have any style information associated with it. The document tree is shown below.

結論から言うと原因は、CloudFrontのOrigin Dmain Nameをリストからバケットを選択せずに、S3バケットの静的ホスティング名を記入しなければ行けなかった。

<font color="Red">問題の部分を見たい方は呼び飛ばして、手順の第６項にスキップして下さい</font>

#手順：
##1. ドメインの取得
お名前.com等を使ってドメインを取得して下さい
https://www.onamae.com/

##2. Route53への登録
https://qiita.com/sadayuki-matsuno/items/4c371ba984d9b22b3737
こちらの記事を参考に、Route 53でHosted Zoneを作成するとNSレコードが作成されるので、お名前.comの場合ドメイン設定でNSレコードを購入したdomainに追加して下さい。

##3. S3のバケットを作成し、HTMLファイルをアップロード
S3コンソールを開いて用意したhtmlファイルをアップロード
https://s3.console.aws.amazon.com/

こちらを参考に自分のドメイン名のbucketを作成しアップロード
https://qiita.com/TheONeru/items/e8aef19375befae6ee09

##4. Website hostingでendpointを取得
<img width="1295" alt="スクリーンショット 2019-12-11 16.55.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/f62d089a-5074-a9db-bf91-b67b1ef5e96a.png">

作成したbucketのPropertiesでStatic Website hositingを選択
<img width="541" alt="スクリーンショット 2019-12-11 16.55.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/e45c2bbd-8630-6cda-c7bf-0827d4c8b42f.png">
・Use this bucke to host a websiteを選択し
index documentにアップロードしたトップページのhtmlファイル名を書く。
自分の場合はindex.html

EndpointのURLがあるのでメモする http://⬛️⬛️⬛️-website-us-east-1.amazonaws.com
試しにURLのリンクにアクセスすると、アップロードしたhtmlが閲覧できる

##5. ACMでSSL証明書を発行
https://console.aws.amazon.com/acm/
からProvision CertificatesのGet Startedを選択
<img width="1679" alt="スクリーンショット 2019-12-11 17.11.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/d3983bb6-e280-3e5e-078c-6cd058a0b0e4.png">

Request a public certificateを選択しRequest a certificateボタンをクリック
<img width="1677" alt="スクリーンショット 2019-12-11 17.14.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/7df98eea-7e3c-dc1e-590e-f412b0c44c22.png">

取得済みのドメインを入力
Add another name to this certificationをクリックし
`*.⬛️⬛️⬛️.com`
(⬛️⬛️⬛️は取得したドメイン名)
を入力

<img width="1635" alt="スクリーンショット 2019-12-11 17.16.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/fcbc98dc-b32e-0c84-9962-99aac0881d87.png">

認証方法を選択
どちらでも問題ないがここではDNS validationで認証する
<img width="1626" alt="スクリーンショット 2019-12-11 17.18.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/8aed5ce8-bf3d-5d09-3048-24f15a9cda0d.png">

その後の項目は全てNext
ValidationのページでExport DNS configuration to fileをクリックし、csvファイルをダウンロードする。
<img width="1615" alt="スクリーンショット 2019-12-11 17.23.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/2f825360-823f-1f7c-bca5-175be1becaeb.png">

Route 53のコンソールを開き
・Create Record Setをクリックし、NameにダウンロードしたCSVのRecord Nameを記述する。
・TypeはCNAMEを選択
・AliasはNoを選択し、ValueにCSVのRecord Valueを記述する
Save Recort Setをクリック

**ACMのコンソールに戻り**
https://console.aws.amazon.com/acm/

Validation statusがSuccessになっているのを確認
<img width="710" alt="スクリーンショット 2019-12-11 17.46.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/0fda3baf-9cce-d218-d571-2865949749e1.png">


##6. CloudFrontでACMで認可されたcustom SSL証明書を登録(要注意事項あり)
cloudfrontのコンソールを開く
https://console.aws.amazon.com/cloudfront/

create distributionをクリック
WebでGet startedをクリック

###要注意事項発生！
**Origin Domain Nameを選択するとプルダウンにAmazon S3 Bucketで作成したbucketがでてくるが、
<font color="Red">選択してはいけない！</font>**

<img width="1642" alt="スクリーンショット 2019-12-11 18.06.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/03128765-9a59-84cc-0961-0c06a9bb493b.png">

Origin Domain Nameには
**<font color="Blue">Website hostingで書かれていたEndpointを記述する</font>**
<img width="541" alt="スクリーンショット 2019-12-11 16.55.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/5d13347c-aa76-0db5-bb18-4eb1d857c56e.png">
<img width="1643" alt="スクリーンショット 2019-12-11 18.13.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/e8b5baef-1223-dbee-2b3a-3d3f6190ba40.png">

Alternate Domain　Namesに
取得した
**domain** と　**www⬛️⬛️⬛️**
(⬛️⬛️⬛️はdomain名)
を追加し
Custom SSL Certificateを選択し
ACMで認証したSSLを選択
<img width="1643" alt="スクリーンショット 2019-12-11 18.15.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/cc3908bb-6a7f-cdea-d3b5-3f183b0ebf9d.png">



あとはCreate Distributionをクリック

StatusがIn progressからDeployedに変わるまで待つ！
（結構時間がかかる。15分くらい？）
<img width="1458" alt="スクリーンショット 2019-12-11 18.23.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/611ff88b-5859-2858-057a-e2cc42d06ce0.png">

DeployedになったらIDをクリックし以下のDomain nameの
〇〇.cloudfront.netをメモする
<img width="1027" alt="スクリーンショット 2019-12-11 19.09.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/bbb5be9b-8649-e5dc-48de-40e3f0682277.png">

〇〇.cloudfront.netのURLでアクセスして、
httpsで表示されれば、ここまでは順調です！

##7. Route53のドメインにtype AでCloudFrontのDmain Nameを登録
Route53でCreate Record Setをクリック
Nameは空で問題ない

AliasはYesで、Aliastargetに〇〇.cloudfront.netを記述

<img width="411" alt="スクリーンショット 2019-12-11 19.16.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359306/261b3e34-f0db-2584-eadc-863da70ee9f6.png">


**Save Record Setをクリック**

##8. httpsでの表示が可能になる
https://⬛️⬛️⬛️.comのURLをアクセス

表示されれば成功！