これも備忘録シリーズです。毎回何らかの手順を抜かしてしまうのでメモしておく。
S3バケットの作成

S3バケットを「アジアパシフィック (東京) ap-northeast-1」に作成します. (例として hiyuzawa-test バケットを作成しました。)
せっかく、Cloudfront経由で参照させたいので、直にS3アクセスは禁止させます。「パブリックアクセスをすべて ブロック(デフォルトのままにする。)」
サンプルでファイルをアップロードしておきます。(aws cli からの例. ブラウザからでもOK)
% cat test.txt
Hello World !
こんにちは世界!
% aws s3 ls
...
2021-05-17 14:38:11 hiyuzawa-test
...
% aws s3 cp test.txt s3://hiyuzawa-test/
upload: ./test.txt to s3://hiyuzawa-test/test.txt
%

上の画面の test.textをタップして表示される画面のオブジェクトURLを覚えておきます。(ブラウザからはS3パブリックアクセス禁止しているのでアクセスできないのが正常)
オブジェクトURL
https://hiyuzawa-test.s3-ap-northeast-1.amazonaws.com/test.txt
CloudFrontの設定
Create Distribution で設定を新規作成します。設定すべきは以下の項目です。デフォルトから変えるところのみ記載。赤線の項目をいつも忘れてしまう。。。
Origin Settings | |
> Origin Domain Name | https://hiyuzawa-test.s3-ap-northeast-1.amazonaws.com (サンプルでアップロードしたファイルのオブジェクトURLのドメイン部) |
> Restrict Bucket Access | Yesに変更する |
>Origin Access Identity | Create a New Identity を選択する |
>Grant Read Permissions on Bucket | Yes, Update Bucket Policy を選択する |
Default Cache Behavior Settings | |
> Viewer Protocol Policy | HTTPS Only (ここは任意にRedirect HTTP to HTTPSでも可) |
> Cache Policy | これはデフォルトでも良い(キャッシュが標準で効く設定) もし開発時等でキャッシュを無効にしたい場合は Managed-CachingDisabled に |
Distribution Settings | |
> Alternate Domain Names (CNAMEs) | xxxx.cloudfront.net 以外で配信したい場合はそのドメインを定義(任意) その場合は下の「SSL Certificate」で有効なSSL証明証を選択する必要あり |
これで作成をします。待つこと数分。定義済み設定一覧からCloudFrontの配信ドメインが確認できます。

Statusが Deployed に変わったら、CloudFrontドメイン経由でS3のバケットがHTTPSアクセス可能になります。 (文字化けしてますがまあOK)
独自ドメインの設定をした場合は、Route53の設定にて、独自ドメイン → CloudFrontドメイン の対応設定が追加で必要です。
何かを忘れるとアクセス時にエラーになります、そうなっても設定の編集を確認して修正すれば参照できるようになるはずです。