はじめに
解決したこと
さくらで取得したドメイン（厳密には設定したサブドメイン）を使い、CloudFrontとHTTPS通信できるようにしました。
課題
あるSPAをVercelにホスティングしています。
画像だけS3から取得したいのですが、S3デフォルトのドメインではなく、さくらで取得したドメインを利用したいなぁと考えました。
このとき、利用するドメインはHTTPS通信が有効になるように設定します。
（さらにこれを無料で実現したい）
アプローチ
さくらのドメインでも無料SSLが設定できます。
ただし example.com と www.example.com だけ対応のようで、サブドメインやワイルドカードでの対応は別途費用がかかる模様。
色々と調べて以下の構成にしてみることに。
このあたりの記事を参考にしました。
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へ設定する時に選択肢に出てきません）
２． 「パブリック証明書のリクエスト」を選択
３．image.example.com は設定したいドメインに置き換えてください。
※ example.com は実際に取得したドメインでなく例
※ 僕は example.com にあたるドメインを取得し、サブドメインの image.example.com を今回設定しようとしています
４．「Email認証」を選択
このあと設定を完了する際、↓に記載のメールアドレスにメールが来ます。（そのメールから検証を済ませる）
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/gs-acm-validate-email.html
DNS認証も試してみましたが、どうも上手くいかずでした。
（さくらのドメインにCNameを追加する作業があるのですが、そこで「名前解決可能なホスト名を入力してください。」と言われて登録できず）
５．タグを追加は必要であれば設定してください。
６．「確定とリクエスト」を押せばメールが送信されます。メールから検証を完了すれば証明書作成は完了。
CloudFrontの設定
※途中の部分は適宜必要な設定をしてください
１．「CreateDistribution」
２．Webを選択
３．「Origin Domain Name」でOriginとなるS3を選択。
「Restrict Bucket Access」はS3へ直接画像を取りに行くことはやめたかったのでYesに。
「Viewer Protocol Policy」は「Redirect HTTP to HTTPS」でもよかったのですが、そもそもHTTPでくるケースが考えられなかったので「HTTPS Only」に。「もともとHTTPで運用していたのをHTTPS化する」みたいなときには「Redirect HTTP to HTTPS」が良さそうですね。
「Alternate Domain Names
(CNAMEs)」に image.example.com を入力します。
「Custom SSL Certificate (example.com):」にチェックを入れ、その下のテキスト欄でACMで作成したものを選択します。
（ACMで作業する時にリージョンを間違えるとここでチェック入れれなくなります）
その他はデフォルト値で、「Create Distribution」をポチ。
４．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。
画像にアクセスしてみる
試しにS3にファイルをアップロードしてみて、ブラウザからアクセスできるか確認します。
さらにブラウザでSSL証明書が有効になっていれば大丈夫そう。（リロードボタン右の鍵マークをクリック）
バッチリですね 
設定してみて
設定は以上ですが、途中で引っかかったところややって良かった点など。
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を挟む構成に。
最後に
普段お仕事ではインフラをあまり触らないので、フィードバックあったらお願いします 