さくらで取得したドメインを使ってCloudFrontとの通信を無料でSSL化

# はじめに
## 解決したこと
さくらで取得したドメイン（厳密には設定したサブドメイン）を使い、CloudFrontとHTTPS通信できるようにしました。

## 課題
あるSPAをVercelにホスティングしています。
画像だけS3から取得したいのですが、S3デフォルトのドメインではなく、さくらで取得したドメインを利用したいなぁと考えました。
このとき、利用するドメインはHTTPS通信が有効になるように設定します。
（さらにこれを無料で実現したい）

## アプローチ
さくらのドメインでも無料SSLが設定できます。
ただし `example.com` と `www.example.com` だけ対応のようで、サブドメインやワイルドカードでの対応は別途費用がかかる模様。

色々と調べて以下の構成にしてみることに。
![スクリーンショット 2020-06-09 20.03.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/6b30b14e-a61a-03d9-12d1-bf4a0d2a671f.png)

このあたりの記事を参考にしました。
https://yuukiyg.hatenablog.jp/entry/2019/03/03/014646
https://cre8cre8.com/aws/https-s3-and-cloudfront.htm
記事ではRoute53の設定もありますが、今回はRoute53を一切使わずにいきます。

# 設定手順
## ACMで証明書を作る
１．必ず `us-east1` に変えてください。僕は一度 `ap-northeast-1` で作ってしまって失敗しました。（後の手順でCloudFrontへ設定する時に選択肢に出てきません）
![スクリーンショット 2020-06-09 20.29.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/ff87eb64-4592-ca1f-b58c-9bc99ee4903e.png)

２． 「パブリック証明書のリクエスト」を選択
![スクリーンショット 2020-06-09 20.38.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/7aac55d2-4d88-11a6-efd4-77bcd7c16f78.png)

３．`image.example.com` は設定したいドメインに置き換えてください。
※ `example.com` は実際に取得したドメインでなく例
※ 僕は `example.com` にあたるドメインを取得し、サブドメインの `image.example.com` を今回設定しようとしています
![スクリーンショット 2020-06-09 20.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/e63616b8-606d-c23b-1d50-420499b2931a.png)

４．「Email認証」を選択
このあと設定を完了する際、↓に記載のメールアドレスにメールが来ます。（そのメールから検証を済ませる）
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/gs-acm-validate-email.html

DNS認証も試してみましたが、どうも上手くいかずでした。
（さくらのドメインにCNameを追加する作業があるのですが、そこで「名前解決可能なホスト名を入力してください。」と言われて登録できず）
![スクリーンショット 2020-06-09 20.48.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/3e1b5d33-d860-f236-b4de-b5ef5f5fdb0f.png)

５．タグを追加は必要であれば設定してください。
６．「確定とリクエスト」を押せばメールが送信されます。メールから検証を完了すれば証明書作成は完了。

## CloudFrontの設定
※途中の部分は適宜必要な設定をしてください

１．「CreateDistribution」
![スクリーンショット 2020-06-09 20.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/31c5afb2-3de6-1f6e-7181-62fdd8d0b019.png)

２．Webを選択
![スクリーンショット 2020-06-09 20.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/a95e2772-917c-94e4-458a-e668466a7bdf.png)

３．「Origin Domain Name」でOriginとなるS3を選択。
![スクリーンショット 2020-06-09 21.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/f3c2f99a-4904-b33c-6baf-643e06ccb789.png)
「Restrict Bucket Access」はS3へ直接画像を取りに行くことはやめたかったのでYesに。
「Viewer Protocol Policy」は「Redirect HTTP to HTTPS」でもよかったのですが、そもそもHTTPでくるケースが考えられなかったので「HTTPS Only」に。「もともとHTTPで運用していたのをHTTPS化する」みたいなときには「Redirect HTTP to HTTPS」が良さそうですね。
![スクリーンショット 2020-06-09 21.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/3678b08f-4297-76de-96b1-6783f6c689cf.png)
「Alternate Domain Names
(CNAMEs)」に `image.example.com` を入力します。
「Custom SSL Certificate (example.com):」にチェックを入れ、その下のテキスト欄でACMで作成したものを選択します。
（ACMで作業する時にリージョンを間違えるとここでチェック入れれなくなります）
![スクリーンショット 2020-06-09 21.20.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/2c2e3c27-e812-599d-7001-f00b5bb3f2ce.png)
その他はデフォルト値で、「Create Distribution」をポチ。
![スクリーンショット 2020-06-09 21.25.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/fc9ebea7-ea11-3e8a-dcbe-1d395cc92691.png)

４．CloudFrontのダッシュボードに戻ると、作成したレコードが見えると思います。
直後は「Status」の箇所が「In Progress」になっていると思いますが、しばらくすると「Deployed」に変わります。そうするとCloudFrontを使い始められます。

５．次の作業のために、CloudFrontへ割り当てられているドメインを控えておきます。
作成したCloudFrontのレコード（IDの箇所に貼られたリンク）を選択すると、設定画面に飛びます。
「Genaral」タブの「Domain Name」という項目に「xxxxx.cloudfront.net」といった文字列があります。これを控えておきます。

## さくらのドメインにてCloudFrontのCNAMEを登録
さくらのドメイン管理画面で控えておいたCloudFrontのドメインを `image.example.com` にCNAMEで割り当てます。
※「FQDN（ドメイン名の付いた形でのホスト名）にて入力の場合は最後にドットを付与して下さい。」とあるのでCloudFrontのドメインの末尾に `.` を入れています

あとはこの設定が反映されればOK。
![スクリーンショット 2020-06-09 21.37.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/1f6cb053-325f-8887-9a91-26cc00c7e65a.png)

## 画像にアクセスしてみる
試しにS3にファイルをアップロードしてみて、ブラウザからアクセスできるか確認します。
さらにブラウザでSSL証明書が有効になっていれば大丈夫そう。（リロードボタン右の鍵マークをクリック）
![スクリーンショット 2020-06-09 21.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280803/a4d7611e-0c64-43f8-d8e1-b2d234ae95ba.png)
バッチリですね :sparkles: 

# 設定してみて
設定は以上ですが、途中で引っかかったところややって良かった点など。

## ACM証明書作成の際にはリージョンを必ずチェック！
意気揚々とCloudFrontの設定に移行しましたが、悲しい想いをしたので注意です。

## 設定直後はうまく動作しなかった
最初は `ERR_CERT_COMMON_NAME_INVALID` エラーが出てリクエストできず。キャッシュとかかなと思い少し時間を置いたら正常に動作しました。

## 無料枠の範囲内でより多くのリクエストを受けられるようになった
S3の無料枠で「20,000 Get Requests of Amazon S3」がありますが、CloudFrontは「2,000,000 HTTP and HTTPS Requests of Amazon CloudFront」になっています。
これもあり、CloudFrontを挟む構成に。

# 最後に
普段お仕事ではインフラをあまり触らないので、フィードバックあったらお願いします :pray: