【AWS】S3+CloudFront+Route53+ACMでSSL化(https)した静的Webサイトを公開する

#概要

本記事では、S3+CloudFront+Route53を利用して、静的サイトを公開する実装手順を紹介します。ACMを使ってSSL証明書を発行し、httpsで公開します。
LP（ランディングページ）、ポートフォリオサイト、シンプルなサイトなどをインターネット上に公開する際に役立ちます。

**構成図**
![スクリーンショット 2021-06-16 16.02.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/d2dedab2-0d79-0489-e45b-434d32bb8608.png)

##本記事のゴール

今回のゴールは、以下のhtml,ccs,画像だけのシンプルな静的Webサイトを、独自ドメインを使用してインターネット上に公開することです。
![スクリーンショット 2021-06-08 16.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/e32dc324-c5df-f4fa-0e3e-333118e1f6ae.png)

##事前準備

- AWSのアカウント
- 公開するファイル（html,css,imageなど）

#実装手順

1. S3で静的Webサイトホスティングをする
2. CloudFront経由でS3のファイルにアクセスする
3. CloudFrontのOAIを使用して、S3への直接アクセスを制限する
4. 独自ドメインを取得し、Route53へ設定する(freenomで無料ドメインを取得します)
5. ACMでSSL証明書を発行する
6. CloudFrontへSSL証明書を設定する
7. Route53にCloudFrontのドメインを紐付ける
8. 独自ドメインにアクセスしてブラウザで確認する

テスト目的の場合、今回の実装は**無料**でできます。（AWS無料利用枠の利用かつ条件を満たす場合のみ）

きちんと運用する場合だと料金はかかりますが、安価だと思います。
料金については、下記を参照のもと、自己責任でお願いします。
> AWS で静的ウェブサイトをホスティングするときの合計コストは、使用状況によって異なります。 一般的に、AWS 無料利用枠の制限を超えた場合の費用は 1 か月あたり 1～3 USD です。 AWS 無料利用枠の対象で、制限の範囲内にある場合、静的ウェブサイトをホスティングする費用は 1 か月あたり約 0.50 USD です。詳細なコストの分析と請求額の見積もりについては、料金計算ツールをご利用ください。
引用：[静的ウェブサイトをホスティングする](https://aws.amazon.com/jp/getting-started/hands-on/host-static-website/services-costs/)

##S3で静的Webサイトホスティングをする

S3は、ストレージサービスだけでなく、**静的Webサイトをホスティング**できます。
静的Webサイトとは、シンプルなhtml,css,画像,JavaScriptなどで作られたサイトのことです。
バケットにURLを指定すると、誰でもサイトにアクセスできます。

「サービス」から**「S3」**を起動しましょう。
![スクリーンショット_2021-06-08_19_36_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/ea4105b4-9e26-952b-7fa1-e5b0d453ebc1.png)

###バケットを作成する

**バケットを作成する**クリックしましょう。
![スクリーンショット_2021-06-08_19_43_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/a6572d49-7fe4-6925-39a4-981e3416d192.png)

「バケット名」に任意のバケット名を入力しましょう。
今回は`test.co.jp`というバケット名を作成します。
![スクリーンショット_2021-06-08_19_50_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/f1329a68-a1e8-2b29-5ee4-0f16bd5afafa.png)

###ブロックパブリックアクセスをOFFにする

- **パブリックアクセスをすべてブロック**のチェックを外しましょう。
- 「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」にチェックを入れましょう。
![スクリーンショット_2021-06-08_19_55_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/47379dbd-3f69-a430-841f-cfbf976aa5f5.png)

※最終的にS3バケットへの直接アクセスではなく、CloudFront経由の独自ドメインでアクセスするように設定するので、後ほどS3のブロックパブリックアクセスはONします。現段階では、S3で静的WebサイトをホスティングするのでOFFにします。

その他は、デフォルト設定のままでOKなので、**バケットを作成**をクリックしましょう。
![スクリーンショット_2021-06-08_20_07_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/f7b5f55f-f6c3-1a44-b600-76b13026b2bb.png)

以下のようにバケットが作成されたことを確認しましょう。
![スクリーンショット_2021-06-08_20_12_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/6be0393b-801f-ec8c-c9d0-7d41f3d3c04f.png)

###ファイルをアップロードする

作成したバケットをクリックしましょう。
![スクリーンショット_2021-06-08_20_12_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/44eca646-90fe-92e0-bd34-1f795b421c1a.png)

以下のような画面に遷移します。
![スクリーンショット 2021-06-09 7.28.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/02744a8f-b1f7-7328-d3f4-eb86f4cf9592.png)

**アップロード**をクリックしましょう。
![スクリーンショット_2021-06-09_7_28_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/e2eea997-d9ad-2660-4f85-10396ffff3ed.png)

**ファイルを追加**をクリックしましょう。
![スクリーンショット_2021-06-09_7_34_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/8f801ea1-27dd-b536-7b47-e6cfb88c99e7.png)

事前に作成したhtml,css,JavaScriptファイルなどを追加しましょう。
今回、画像は「images」フォルダに格納したので、**フォルダの追加**をクリックして追加しました。
![スクリーンショット_2021-06-09_9_40_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/a8774a16-8ba9-8b73-ed14-602619e00209.png)
html,css,画像などが追加されていることを確認しましょう。

確認ができたら、**アップロード**をクリックしましょう。
![スクリーンショット_2021-06-09_9_41_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/1ff4d252-7286-61fb-566b-58b6b0e3596b.png)
アップロードすると、追加したファイルがバケットに入ります。

アップロードが成功すると以下のような画面表示になります。
![スクリーンショット_2021-06-09_9_43_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/8f7b68b4-f847-f6b3-2444-348e50464f09.png)
成功したら、右上の**閉じる**をクリックしましょう。

以下のように、アップロードしたファイルがバケット内に入っていることを確認しましょう。
![スクリーンショット_2021-06-09_8_13_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/d0888588-21fa-46c4-61e7-e89b367583c3.png)

###静的ウェブサイトホスティングを「有効」にする

S3を使用して、静的ウェブサイトのホスティングを有効にします。

**プロパティ**をクリックしましょう。
![スクリーンショット_2021-06-09_9_45_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/a9703e42-083c-03d1-fafe-867faaea1d6b.png)

一番下にスクロールし、**静的ウェブサイトホスティング**の「編集」をクリックしましょう。
![スクリーンショット_2021-06-09_8_20_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/ff07201b-84d3-3f5e-1dcc-e5431f378e1f.png)

- **「有効にする」**にチェックを入れましょう。
- インデックスドキュメントに`index.html`と入力しましょう。
![スクリーンショット_2021-06-09_8_37_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/302f9304-c91b-42fa-cf8c-a25ff6e3a9b4.png)

※4XXエラーが発生すると表示されるエラードキュメントを指定する場合は、エラードキュメントにerror.htmlなどを入力しましょう。

**変更の保存**をクリックしましょう。
![スクリーンショット_2021-06-09_8_44_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/2f4a5e65-20b1-428c-f348-0fcf1018a675.png)

###バケットポリシーを追加する

**バケットポリシー**とは、S3のバケットにアクセスの制限を設定することです。
誰が、何に対して、どうできるのか、できないのかを設定できます。

今回は、**バケットへのパブリック読み取りアクセスを許可する**バケットポリシーを追加します。これを許可すると、インターネット上から誰でもS3バケットにアクセスできるようになります。

**アクセス許可**をクリックしましょう。
![スクリーンショット_2021-06-09_8_58_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/cbd7f201-05e1-a5f5-a9b3-55ff778ea5b2.png)

バケットポリシーから**編集**をクリックしましょう。
![スクリーンショット_2021-06-09_18_58_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/db476322-9337-e333-5ed5-483cdcfb5fea.png)

パブリック読み取りアクセスを許可するには、以下のバケットポリシーをコピーし、エディターに貼り付けます。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
```
Resourceの**Bucket-Name**は、自身で作成したバケット名を指定します。
今回は、`test.co.jp`がバケット名です。
<br>
エディタにバケットポリシーを設定し、バケット名も確認したら**変更の保存**をクリックしましょう。
![スクリーンショット_2021-06-09_19_07_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/2aaf9e23-1593-cd6a-5edb-ff9f2072d970.png)

###バケットウェブサイトエンドポイントからURLを確認する

ここまで完了するとエンドポイント（インターネット上に公開されたURL）が発行されます。
URLをクリックして、静的サイトが表示されているか確認します。

「プロパティ」に移動し、「静的ウェブサイトホスティング」にURLが発行されているので、クリックしましょう。

このURLの内容は、`http://【バケット名】.s3-website-【リージョン名】.amazonaws.com/`となっています。 
![スクリーンショット_2021-06-09_19_24_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/66e8dde1-ba32-ced2-745e-d53a782efa42.png)

静的サイトが表示されているか確認しましょう。
以下のように、今回公開するサイトが表示されたら成功です。
![スクリーンショット_2021-06-09_19_29_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/c700a3b3-94a0-0545-20ba-dc504a097202.png)
以上で、S3で静的Webサイトのホスティング作業が完了しました。

##CloudFront経由でS3のファイルにアクセスする

次に、S3バケットへ直接アクセスではなく、CloudFront経由でアクセスできるように設定します。

**CloudFront**とは、Webコンテンツの配信が高速化し、安全性の高いコンテンツデリバリーネットワークです。（略してCDNと呼ばれます）

通常、ユーザーはWebサーバーにアクセスして見たいページを取得しますが、CloudFrontdでは、Webサーバーの中身をキャッシュする**エッジサーバー**を利用します。
エッジサーバーを利用すると、Webサーバーの負担が軽減されるので、レスポンスが高速化されます。
S3でホスティングしたWebサイトと紐付けてよく使われます。

[Amazon CloudFrontとは](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)

[CloudFrontを利用するメリットとS3との違いについて](https://www.acrovision.jp/service/aws/?p=1441)	

「サービス」から**「CloudFront」**を起動しましょう。
![スクリーンショット_2021-06-10_8_29_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/bc3b659f-7127-09f4-592d-8d006d931134.png)

###Distributionを作成する

**Create Distribution**をクリックしましょう。
![スクリーンショット_2021-06-10_8_33_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/02fb13b9-bf52-cce7-7cc4-b4734424d67d.png)

**Get Started**をクリックしましょう。
![スクリーンショット_2021-06-10_8_35_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/0c002a7a-a59d-5515-9d41-c969949105e4.png)

###オリジンを設定する
以下を参考に設定しましょう。
![スクリーンショット_2021-06-10_8_39_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/76c2b055-4d72-125f-0756-35ab47c80044.png)

- `Origin Domain Name`→作成したS3バケットを選択

- `Restrict Bucket Access`→Yes
S3バケットへのアクセスを拒否し、CloudFront経由でのみアクセス可能にする

- `Origin Access Identity`→Create a New Identity
オリジンアクセスアイデンティティ(OAI)を作成する

- `Grant Read Permissions on Bucket`→Yes, Update Bucket Policy
作成したOAIをS3のバケットポリシーに自動で記載してくれる

http通信だった場合に、httpsにリダイレクトされるように設定しましょう。

- `Viewer Protocol Policy`→Redirect HTTP to HTTPS
![スクリーンショット_2021-06-10_13_45_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/659dfbe3-4ddb-723a-7622-9f99d6e89b6e.png)

デフォルトのルートオブジェクトを設定しましょう。

S3の静的Weｂサイトホスティングのデフォルト設定は、`index.html`を返しますが、CloudFrontのURLへアクセスする際のデフォルト設定では、`index.html`は省略できないので、オブジェクトの名前の指定が必要です。

よって、URLのアクセス時にCloudFrontが`index.html`をオブジェクトとして返す設定を行います。

- `Default Root Object`→`index.html`と入力しましょう。
![スクリーンショット_2021-06-10_13_55_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/55b7a81f-c2a2-18d9-dd26-0ff887111036.png)

他は全てデフォルト設定のままでOKです。
**Create Distribution**をクリックしましょう。
![スクリーンショット_2021-06-10_14_03_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/f0caf11e-d676-60dc-165e-099d2c2be50e.png)

Distributionが作成できたら、左のタブ１番上の**Distributions**をクリックしましょう。

Statusが**In Progress**から**Deployed**になるのを待ちます。
**Deployed**になるまでには数分かかります。

- In Progressの状態
![スクリーンショット_2021-06-10_14_14_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/4fd0797e-5ccc-2beb-da3b-01c17b04dbe1.png)

- Deployedの状態
![スクリーンショット_2021-06-10_14_11_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/0fdab027-2fbf-f32b-d225-0855bfbf6e55.png)

###CloudFront経由のURLを確認する

Statusが**Deployed**になったら、**Donation Name**タブにあるURL(`d3XXXXXX36XXXX.cloudfront.net`)をコピーし、ブラウザで確認しましょう。
![スクリーンショット_2021-06-11_15_42_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/a710b714-ee25-e34f-da23-1c6e1a519d83.png)

以下のように、今回公開するサイトが表示されたら成功です。
![スクリーンショット_2021-06-15_20_31_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/5859457e-6364-5a07-a4a5-3a235173a767.png)
以上でCloudFront経由でS3のファイルにアクセスする設定は完了となります。

##CloudFrontのOAIを使用して、S3への直接アクセスを制限する

CloudFrontのオリジン設定時に、S3からOAIを使用したCloudFront経由のアクセスを可能にしたので、**S3バケットから直接アクセスするのを無効にする**設定をします。

###ブロックパブリックアクセスをONにする

S3のバケットのブロックパブリックアクセスをONに設定することで安全な運用が行えます。

「S3」を起動し、**アクセス許可**のタブに移動しましょう。

ブロックパブリックアクセス(バケット設定)の**編集**をクリックしましょう。
![スクリーンショット_2021-06-10_15_31_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/c5896e07-a3e0-b128-bf67-a586f14e301c.png)

**パブリックアクセスをすべてブロック**にチェックを入れたら、**変更の保存**をクリックしましょう。
![スクリーンショット_2021-06-10_15_33_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/6b18196c-ef08-45b7-dda2-c1c759533e7e.png)
モーダルが開くので、**確認**と入力ししましょう。
![スクリーンショット_2021-06-10_15_36_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/2b0b2934-5b91-0230-ac34-0d42674bba61.png)

###S3バケットポリシーを編集する

現状のバケットポリシーを確認すると、以下のように先程のCloudFrontのオリジン設定時に、OAIを使用したS3へのバケットへのアクセスを許可する設定がすでに追加されています。

確認したら、**編集**をクリックしましょう。
![スクリーンショット_2021-06-10_20_16_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/b9ed8de2-dc67-7ce7-ddca-c8aab7456eb4.png)

バケットポリシーの編集画面に遷移されます。

現状のポリシーを確認すると、`"Sid": "PublicReadGetObject"`という静的WebサイトホスティングでS3バケットのリソースをパブリックへ公開するためのポリシーが設定されています。

このポリシーを削除することで、S3のバケットからの直接アクセスを無効にし、OAIを使用したCloudFront経由のアクセスが可能となります。

以下の範囲を**削除**しましょう。
![スクリーンショット_2021-06-10_20_02_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/60d51aff-9ad0-fb4e-ab1a-2a74c0f68b5c.png)
もし、`"Sid": "PublicReadGetObject"`が残った状態でブロックパブリックアクセスをONにすると、CloudFront経由でアクセスした場合、403エラー（閲覧権限なし）になります。

以下のように編集できたら、**変更の保存**をクリックしましょう。
![スクリーンショット_2021-06-10_19_59_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/da1350e1-8e6b-ce9b-fefa-2ee80eac872f.png)

編集が完了したら下記、3点を確認しましょう。

- **アクセス許可の概要**︰非公開のバケットとオブジェクト
- **ブロックパブリックアクセス(バケット設定)**︰パブリックアクセスをすべてブロックが「ON」
- **バケットポリシー**︰OAIを使用したCloudFront経由のアクセスが許可されたポリシー
![スクリーンショット_2021-06-10_20_12_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/82b1c39f-ec8d-dfa2-59c7-e4fc748f9627.png)

以上でOAIを使用したCloudFront経由のアクセスを可能にするバケットポリシーの編集は完了になります。

試しに、S3のエンドポイントから直接アクセスしようとすると、403エラーになります。（こうなるのが正常です）
![スクリーンショット 2021-06-10 20.33.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/77e1ef91-df86-0354-b055-efcfddda713c.png)

##独自ドメインを取得し、Route53へ設定する

###ドメインを取得する

ドメインはRoute53からも入手できますが、費用がかかります。
試験目的の場合は、[freenom](http://www.freenom.com/en/index.html)で無料ドメインを取得できます。

取得方法は割愛します。以下のサイトを参考にしてみましょう。

[freenomで無料ドメインを取得する
](https://note.com/dafujii/n/n406f385651e2)

今回は`testfile.tk`という無料ドメインを取得しました。

###ホストゾーンを作成する

**Route53**とは、DNS（ドメインネームサービス）です。
インターネット上でドメインを管理・運用するために開発されたシステムのことを指します。
DNSは、`https://example.com`みたいなURLをIPアドレス(123.456.789.123)に変換します。
ドメインの取得ができたり、Route53でアクセスしたいアドレスを使用したいS3のエンドポイントに紐付けます。

「サービス」から**Route53**を起動しましょう。
![スクリーンショット_2021-06-14_8_12_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/ab7ae12c-fe44-fc2a-3db9-e36199b69d65.png)

**ホストゾーンの作成**をクリックしましょう。
![スクリーンショット_2021-06-14_8_24_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/bf550c36-fd40-ea04-a77f-be08ea679eb7.png)

- **ドメイン名**に取得したドメイン名を入力しましょう。
- 入力したら**ホストゾーンの作成**をクリックしましょう。
![スクリーンショット_2021-06-14_14_01_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/202f8da5-da55-111e-d919-77b189c81951.png)

完了すると以下のように、NSレコードとSOAレコードが作成されます。
![スクリーンショット_2021-06-14_14_05_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/86739e85-1aa0-23bc-9371-568cc0f1b4d1.png)

NSレコードが4件作成されるので、freenomのDNS設定をします。

freenom→Sevices→MyDomainに移動しましょう。

**Manage Domain**をクリックしましょう。
![スクリーンショット_2021-06-14_19_39_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/9fed5597-5a11-4c50-0117-7d5cbb04eba0.png)
freenomの**Nameserver**として登録します。
Management Tools→Nameserverをクリックしましょう。
![スクリーンショット_2021-06-14_19_49_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/b90491e7-76ec-15c1-3e3c-707ed88ea7b9.png)

- Route53で作成されたNSレコード4件を設定しましょう。
Nameserver設定時、末尾の「.」は不要です。

- 設定したら、**Change Nameserver**をクリックしましょう。
![スクリーンショット_2021-06-14_19_52_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/5f78d288-c81a-9ff5-30f5-6bc81cca5fc9.png)

以上でドメインの設定とfreenomのDNS設定は完了です。

##ACMでSSL証明書を発行する

**ACM**(AWS Certificate Manager)とは、AWSウェブサイトとアプリケーションを保護するhttps通信に必要なSSL証明書の作成、更新などができます。
SSL証明書の作成は無料です。

[AWS Certificate Manager とは何ですか?](https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-overview.html)

**SSL証明書**とは、Secure Socket Layerの略です。
ウェブサイトの「運営者の実在性を証明」し、インターネット上でやりとりされるデータの「盗聴」「なりすまし」「改ざん」などを防止するために通信データの暗号化を行います。

**SSL化のメリット**
SSL化することで、悪質な不正アクセスの被害を防げます。
セキュリティ面を強化でき、アクセス権限をもたない人がサーバーや情報システムの内部に侵入しないように防止できます。

「サービス」から**「Certificate　Manager」**を起動しましょう。
![スクリーンショット_2021-06-14_8_42_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/0dbcf96f-7551-22d2-46b6-c6d53de32c5a.png)

CloudFrontにACMで作成したSSL証明書を紐付けるためには、
リージョンを「米国東部 (バージニア北部)　us-east-1」にする必要があります。

>ビューワーと CloudFront との間で HTTPS を必須にするには、証明書をリクエストまたはインポートする前に AWS Certificate Manager コンソールで AWS リージョンを**米国東部 (バージニア北部) **に変更する必要があります。
引用：[CloudFront で SSL/TLS 証明書を使用するための要件](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html#https-requirements-aws-region)

リージョンを**「米国東部 (バージニア北部) (us-east-1)」**に変更し、**今すぐ始める**をクリックしましょう。
![スクリーンショット_2021-06-15_7_32_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/da7096f6-7c50-fc70-a647-05c3908ef1ed.png)

###証明書を発行する

**パブリック証明書のリクエスト**にチェック→**証明書のリクエスト**をクリックしましょう。
![スクリーンショット_2021-06-14_8_43_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/1441dfa2-3eb8-fc21-8b54-07a69cdc96ae.png)
取得したいSSL証明書のドメイン名を入力しましょう。

今回は、`*.example.com`のようにワイルドカード証明書を発行する設定とします。ただし、`*.example.com`で証明書を発行した場合、`example.com`といったドメインは保護されません。また、複数のドメインを追加することも可能です。
![スクリーンショット_2021-06-14_14_10_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/c5176415-0160-dca9-dfc8-83096cf1dcf7.png)
入力したら、**「次へ」**をクリックしましょう。

**DNSの検証**にチェック→**「次へ」**をクリックしましょう。
![スクリーンショット_2021-06-14_14_10_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/3441a0be-20a4-2b5c-f4d2-19dc61b0f375.png)

タグ名は任意です。空欄でも問題ないです。
とくになければ、**「確認」**をクリックしましょう。
![スクリーンショット_2021-06-14_14_10_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/fec3fb0a-3572-7633-5400-47d7180dbfd6.png)
ドメイン名と「DNS」を確認し、**「確定とリクエスト」**をクリックしましょう。
![スクリーンショット_2021-06-14_14_10_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/667743c9-139c-af7a-2f97-3e7693ff4093.png)

検証状態は、「検証保留中」になります。
**Route53でのレコード作成**をクリックしましょう。
![スクリーンショット_2021-06-14_14_11_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/b2e0ed46-0c04-b005-e83f-bd5746fe858f.png)

正常にCNAMEレコードがRoute53に追加されると**「成功」**と表示されます。

**CNAMEレコード**とは、ドメイン名に別名を指定するためのレコードです。
例えば、`example.com`などの現在のレコードに対して、別のドメイン (`example.jp`など)やサブドメイン (`www.example.com`など) にマッピングします。
この時、`www.example.com`をcanonical name(正式名)、`example.com`をaliases(別名)と呼びます。
![スクリーンショット_2021-06-15_21_04_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/2710a5c2-4d4e-5dd0-13e9-788eb30de9c1.png)


Route53を起動すると、以下のように検証用のCNAMEレコードが追加されています。
![スクリーンショット_2021-06-14_14_53_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/0cbd7b73-3798-5e47-732a-95336e5f9d3a.png)

早ければ数分で**「発行済み」**になります。
※２０分〜３０分かかる場合もあるので、気長に待ちましょう。
![スクリーンショット_2021-06-14_14_12_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/b1819e7c-e19a-7baf-a900-fa58cb9f0248.png)

以上でSSL証明書の発行は完了です。

##CloudFrontへSSL証明書を設定する

独自ドメインによるhttps接続の為、CloudFrontの設定をします。

CloudFront→Distribution→該当の**DistributionID**をクリックしましょう。
![スクリーンショット_2021-06-15_10_28_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/3d703252-7a39-7470-e07c-bc45ecfc3243.png)

###Distributionを編集する
「General」→**Edit**をクリックしましょう。
![スクリーンショット_2021-06-14_14_17_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/0890d763-9b00-de1f-7afb-35b09acaf860.png)

-  **Alternate Domain Names (CNAMEs)**は、`www.testfile.tk`とします。`https://www.testfile.tk`でのアクセスを可能にします。

-  **Custom SSL Certificate**にチェックします。
先程、ACMで作成した`*.testfile.tk(fb1a5....`を指定します。
![スクリーンショット_2021-06-14_14_31_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/5b34e057-e8c6-38dc-f45b-c12c50dc35e0.png)

上記以外はそのままの設定でOKなので、**「Yes,Edit」**をクリックしましょう。

以下のように、設定されていたら成功です。
![スクリーンショット_2021-06-14_14_31_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/a700e3df-a1ac-8be9-2c53-1802cd8376d3.png)

「Distributions」に戻るとCNAMEsタブに指定したドメインが表示されています。

Statusが**In Progress**から**Deployed**になるのを待ちます。
以下のようにStatusが**Deployed**になったら設定は完了です。
※Deployedになるまでは数分かかります。
![スクリーンショット_2021-06-14_14_41_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/de456172-3ba0-ad05-128b-b8faf8dbab21.png)

以上でCloudFrontへSSL証明書を設定する作業は完了です。

##Route53にCloudFrontのドメインを紐付ける

今回は、`www.testfile.tk`で公開するため、Route53のレコード設定をします。

###レコードを作成する

Route53→ホストゾーン→ドメイン名（`testfile.tk`）をクリック→**レコードを作成**をクリックしましょう。
![スクリーンショット_2021-06-14_14_53_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/ab1683f4-1c0b-e244-c6a7-c873e911d578.png)

- レコード名
→リダイレクト元のドメイン
（CloudFrontでSSL証明書を設定した際に入力したドメイン名）

- レコードタイプ
→A

- トラフィックのルーティング先
→**エイリアスをON**にする
→**「CloudFront ディストリビューションへのエイリアス」**を指定
→CloudFrontのDomain Nameを指定
![スクリーンショット_2021-06-14_15_10_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/08fb558a-17e6-f9b6-79d0-cd6d54e6cfd6.png)

入力ができたら、**レコードを作成**をクリックしましょう。

作成されると以下のように、Aレコードが作成されます。
![スクリーンショット_2021-06-14_15_10_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/fb43c171-df1e-8bc2-83d0-7ae82605df15.png)

以上でRoute53へのドメイン名の紐付け作業は完了です。

##独自ドメインにアクセスしてブラウザで確認する

作成したドメイン(`https://www.testfile.tk/`)をブラウザでアクセスして、静的サイトが表示されるか確認しましょう。
無事表示されたら、成功です！

※今は上記のURLでアクセスできません。

![スクリーンショット_2021-06-14_15_11_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/9bbfae6b-34ab-bb56-3aab-fa8f925c08c8.png)
以上で全工程が完了しました！

※テスト目的などの場合は、課金されないようにS3バケットの削除、CloudFrontのDistributionの削除、Route53のホストゾーンの削除（作成から12時間以内にホストゾーンを削除した場合は、月額0.5$の課金対象外です）など忘れずに実施しておきましょう。

##番外編

###S3バケットのオブジェクトをCloudFrontに即時反映させる方法

S3バケット内のオブジェクト（html,cssなど）を更新したいときに、オブジェクトをバケットにアップロードしても、CloudFrontには即時に反映されません。

なぜなら、CloudFrontはS3オブジェクトのキャッシュを**24時間保持**しているからです。

> デフォルトでは、CloudFront は Amazon S3 からのレスポンスを 24 時間 (86,400 秒間のデフォルト TTL) キャッシュしています。リクエストが エッジロケーションに到着してから24 時間以内に Amazon S3 を提供した場合、Amazon S3 のコンテンツを更新したとしても、CloudFront はキャッシュされたレスポンスを使います。
引用：[CloudFront が、Amazon S3 から古いコンテンツを提供し続けるのはなぜですか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serving-outdated-content-s3/)

その場合の対処法は、CloudFrontのキャッシュをクリアすることでS3からオブジェクトを直接取得でき、ファイルが即時反映されます。

コンソールから「CloudFront」→**対象のDistributions**を選択しましょう。
![スクリーンショット_2021-06-11_15_42_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/7041ed18-6330-1c6f-ada9-41660a2f2d7e.png)


**Invalidations**をクリックしましょう。
※「Invalidation」とは直訳で「無効化」という意味です。
![スクリーンショット_2021-06-11_15_55_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/9a4666c9-0fe9-7829-15f2-2906f26b0266.png)

**Create Invalidation**をクリックすると、モーダルが開きます。
![スクリーンショット_2021-06-11_16_03_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/5222cc5b-b15e-8d12-9570-aebd6683c887.png)

**Object Paths**にキャッシュをクリアをしたいS3のオブジェクトのパスを指定しましょう。

削除したいオブジェクトのキャッシュをパスで指定します。
今回は、`/*`と指定します。
これを指定すると、対象の**S3バケット内全てのキャッシュがクリア**されます。
データを指定したい場合などは、以下のように指定しましょう。
`/index.html`　
`/css/*`

入力したら、**Invalidate**をクリックしましょう。
![スクリーンショット_2021-06-11_16_09_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/375b7fd2-35a9-7849-024d-58534450cc04.png)


StatusがIn Progressから**Completed**に変われば、キャッシュの削除は完了です。
![スクリーンショット_2021-06-11_16_35_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592132/d2ab90f5-6f28-2043-434d-34f5c9a476df.png)

ブラウザからCoudFrontのURL(`d3XXXXXX36XXXX.cloudfront.net`)にアクセスし、サイトが更新されたことを確認してみましょう。

独自ドメインの反映までには、時間がかかると思います。
自分の場合は３〜４時間かかりました。

※※注意事項※※
>無料で 1 か月あたり 1,000 回のパスの無効化が許可されています。パスの無効化が 1 か月あたり 1000 回を超える場合は、「Amazon CloudFront の料金」にある「無効リクエスト」の覧をご参照ください。
引用：[CloudFront が、Amazon S3 から古いコンテンツを提供し続けるのはなぜですか?](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serving-outdated-content-s3/)

##参考サイト

今回実装するにあたって以下のサイトを参考にさせていただきました。

[Amazon S3 での静的ウェブサイトの設定](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step4-add-bucket-policy-make-content-public)
[CloudFrontを使用して、Amazon S3 でホストされた静的ウェブサイトを公開する](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serve-static-website/)
[CloudFront + S3 + Route53で独自ドメインをSSL通信(https)設定をする](https://soypocket.com/it/cloudfront-s3-route53-https/)
[無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた](https://dev.classmethod.jp/articles/mesoko-r53-cdn/#toc-12)