S3を最速でhttps化する手順と全設定項目

# 対象の読者

- とにかくS3を独自ドメインでhttps化したい人
- たまにこの要件に対応する度にググって調べている人
- S3をhttps化する手順と設定項目が全部記載されているマニュアルを探している人

**https化対応前の構成**

<img width="291" alt="2-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549788/f772f20a-91ed-ee42-3aa1-a06a60354b24.png">

**https化対応後の構成**

<img width="552" alt="2-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549788/c05f42dd-2031-1781-a209-51bcae29ad3b.png">

# 手順と設定項目

作業手順は以下の３つです。

1. ACM（Amazon Certificate Manager）で証明書を作成する
2. CloudFrontでディストリビューションを作成する
3. Route53の独自ドメインのエイリアスの向き先を変更する

## 1. ACM（Amazon Certificate Manager）で証明書を作成する

1. `[Management Console]` にログイン後、リージョンをバージニア北部に切り替える。
2. メニューから`[Certificate Manager]`を開く。
3. `[証明書のリクエスト]` → `[パブリック証明書のリクエスト]` → `[証明書のリクエスト]` 。
4. `[ドメイン名]` にhttps化対象のドメイン名を入力して `次へ`。
5. `[DNSの検証]` を選択して `[次へ]` 。
6. タグの追加はたぶん不要。付けたかったらつける。
7. `[ドメイン名]` と `[検証方法]` を確認して `[確定とリクエスト]` 。
8. `[Route53でのレコードの作成]` で表示されるダイアログからCNAMEを `[作成]` する。
9. 証明書の一覧画面で状況が `[検証保留中]` となっていることを確認する。
10.  状況が `[発行済み]` になるまで10 ~ 30分待つ。

以上で使用する証明書が発行されます。

## 2. CloudFrontでディストリビューションを作成する

1. `[Management Console]` のメニューから `[CloudFront]` を開く。
2. `[Create Distribution]` から Webの `[Get Started]` を開く。
3. Create Distribution画面で以下の項目を埋める。

|  　　#　　 | 項目名 | 入力値 | 備考 |
| -------- | -------- | -------- | -------- |
| 1 | Origin Domain Name | 対象のバケットを選択  | |
| 2 | Origin Path | 空欄 |  | 
| 3 | Origin ID | 1で自動で入っているはず |  |
| 4 | Restrict Bucket Access | Yes  | YesにするとCloudFront経由でのみ閲覧可能 |
| 5 | Origin Access Identity | Create a New Identity |  |
| 6 | Comment | 5で自動で入っているはず |  |
| 7 | Grant Read Permissions on Bucket | Yes, Update Bucket Policy | これを設定しておくとS3のバケット側の設定を自動でやってくれる |
| 8 | Origin Custom Headers | 空欄 |  |
| 9 | Viewer Protocol Policy HTTP and HTTPS | Redirect HTTP to HTTPS | httpからhttpsへリダイレクトさせる |
| 10 | Allowed HTTP Methods | GET, HEAD |  |
| 11 | Field-level Encryption Config | 空欄 |  |
| 12 | Cached HTTP Methods | GET, HEAD |  |
| 13 | Cache Based on Selected Request Headers | None (Improves Caching)  |  |
| 14 | Object Caching | Use Origin Cache Headers | オリジン（今回はS3）側のオブジェクトのCache-Controlに従う |
| 15 | Minimum TTL | ー | 12でUse Origin Cache Headersを選択しているので入力できないはず |
| 16 | Maximum TTL | ー | 同上 |
| 17 | Default TTL | ー | 同上 |
| 18 | Forward Cookies | ALL | 今回はCookiesをオリジンに通す設定にする。要件に合わせて変えましょう。 |
| 19 | Query String Forwarding and Caching | Forward all, cache based on all | 今回はクエリーをオリジンに通す設定にする。要件に合わせて変えましょう。 |
| 20 | Smooth Streaming | No | Microsoft Smooth Streamingを利用する場合はYesにする |
| 21 | Restrict Viewer Access | No |  |
| 22 | Compress Objects Automatically | No |  |
| 23 | Lambda Function Associations | 空欄 |  |
| 24 | Price Class | Use All Edge Locations (Best Performance) |  |
| 25 | AWS WAF Web ACL | None |  |
| 26 | Alternate Domain Names(CNAMEs) | 証明書を取得したドメイン名 |  |
| 27 | SSL Certificate | Custom SSL Certificate (example.com)から対象のドメイン名の証明書を選択 |
| 28 | Custom SSL Client Support | Clients that Support Server Name Indication (SNI) - (Recommended) | |
| 29 | Security Policy | TLSv1.1_2016 (recommended) |  |
| 30 | Supported HTTP Versions | HTTP/2, HTTP/1.1, HTTP/1.0 |  |
| 31 | Default Root Object | index.html |  |
| 32 | Logging | off |  |
| 33 | Bucket for Logs | ー | |
| 34 | Log Prefix | ー | |
| 35 | Cookie Logging | ー | |
| 36 | Enable IPv6  | ☑ |  |
| 37 | Comment | 空欄 |  |
| 38 | Distribution State | Enabled  |  |

- 以上の入力を確認して、`[Create Distribution]`を押す。

4. `[Distributions]` からディストリビューションの一覧を表示して、今作ったディストリビューションのStatusが`In Progress` となっていることを確認する。
5. Statusが`Deployed`になるまで30 ~ 40分待つ。

## 3. Route53の独自ドメインのエイリアスの向き先を変更する

1. `[Management Console]` のメニューから `[Route53]` を開く。
2. `[ホストゾーン]` から対象のドメインを開く。
3. `[名前]` が対象のドメイン名 かつ `[タイプ]`がAになっている行を選択する。
4. 画面右の `[レコードセットの編集]` から エイリアス先を `[CloudFront ディストリビューション] - 対象のドメイン名` となっているものを選択する。
5. 上記設定を確認して `[レコードセットを保存]` を押す。

# 動作確認

ここまでの設定が終わったら、`https://{独自ドメイン}` でアクセスできるはずです。

以上