こんにちは。齋藤です。
AWS超初心者の私（デザイナー見習い）が初めてCloudFrontを使用したので、完全に個人の備忘録的に、S3にアップロードした画像などのファイルをCloudFrontを介して配信したい場合の作業手順を記したいと思います。
AWS超初心者ですので誤りなどがありましたらご指摘頂けますと幸いです
そもそもAWSってなに？
AWSは「Amazon Web Service」の略で、Amazonが提供するクラウドコンピューティングプラットフォームのことです。市井でよく聞く「クラウド化」はこのAWSを用いて実現されるのだとか。
AWSは、クラウドの分野で広く利用されており、Webサイトのホスティングだけではなく、ビッグデータ処理、人工知能など、さまざまな用途に使用されているようです。
同様のサービスとして、Google Cloud PlatformやMicrosoft Azureなどがあります。
S3とは？
今回使うS3とは「Amazon Simple Storage Service」の略称で、AWSのストレージサービスのことです。S3はメディア配信やWebサイトのホスティングだけでなく、バックアップやビッグデータ処理にも使われているようです。
S3には決まった容量という概念が存在せずに、格納されるデータの量に応じて自動的にスケールアップ・ダウンされます。（よくあるストレージサービスのプランがあるのではなく従量課金制）
利点としては、高い耐久性と管理性、データの暗号化などの強固なセキュリティ機能を使用できることなどがあります。
AWSの無料利用枠に含まれており、5GBの標準ストレージ、20000件のGetリクエスト、2000件のPutリクエストが 12ヶ月間無料 で使用することができます。（2023年7月現在）
CloudFrontとは？
S3と同様に今回使うCloudFrontとは、AWSのCDNサービスです。
CDNとは「コンテンツデリバリーネットワーク」の略で、世界中に配置された複数のサーバーからコンテンツを提供し、ユーザーに近い場所からコンテンツを配信することで、応答時間の短縮やネットワークの負荷軽減を実現する仕組みのことです。
CloudFrontはWebサイト、画像や動画などのメディア、APIなどの様々なコンテンツの配信に使用されるようです。
CloudFrontを使用することにより、先述のCDNの説明にもある通り、高速なコンテンツ配信を可能にすることのみならず、DDoS攻撃への対処などのセキュリティ対策や負荷分散にも有用です。
こちらもAWSの無料利用枠に含まれており、1TBのデータ転送 (アウト)、1000万件のHTTPおよびHTTPSリクエスト、200万件のCloudFront関数呼び出しが 無制限無料 で使用することができます。（2023年7月現在）
S3を使えるようにする
S3にはバケットと呼ばれる概念があります。これは、S3内でデータを保存するためのコンテナのことで、この中に画像などの各ファイルが格納されます。
バケットの新規作成
S3の管理ページにアクセスし、画面右端の「バケットを作成」をクリックします。
バケットの設定
作成するバケットの設定画面が表示されるので、名称やリージョンなどの初期設定を行います。今回は名称だけ指定し、その他は割愛します。
バケットの名はグローバルに一意である必要がありますので、他のAWSユーザーが使用している名称を重複して使用することはできません。
設定項目の入力が完了したら「バケットを作成」をクリックします。
これでS3が使用できるようになりました。
CloudFrontを使えるようにする
ディストリビューションとは、CloudFrontがコンテンツを配信するための設定とリソースのまとまりを指します。ディストリビューションでは、特定のコンテンツの配信方法、セキュリティ設定、キャッシュ動作などを指定します。
ディストリビューションを作成する
CloudFrontの管理画面にアクセスし、画面右上の「ディストリビューションを作成」をクリックします。
初期設定を行う
今回は必要最小限の設定をご紹介します。
オリジンドメイン
オリジンドメインの選択では、先ほど作成したS3のバケットのAWSオリジンを選択します。
オリジンアクセス
オリジンアクセスでは2つ目の「Origin access control settings」を選択し、数珠繫ぎで表示された「コントロール設定を作成」をクリックします。
Create conttol settingというモーダルが表示されるので特に何も変更せずに「作成」をクリックします。
デフォルトのキャッシュビヘイビア
ビューワープロトコルポリシーを「Redirect HTTP to HTTPS」に変更します。こうすることで、http://でアクセスされた場合にhttps://に自動的にリダイレクトしてくれます。
その他は今回は割愛します。
キャッシュキーとオリジンリクエスト
こちらも今回はノータッチで割愛します。
関数の関連付け
こちらもノータッチ
ウェブアプリケーションファイアウォール（WAF）
ファイアウォールの設定です。AWS WAFを使用したい場合は有効にしてください。
AWS WAFの使用には当然料金がかかります。1ヶ月あたりに1000万件のリクエストがあった場合、14ドル程度の費用がかかるようです。
その他設定
こちらも割愛。
すべての設定事項の入力が完了したら「ディストリビューションを作成」をクリックします。
これでCloudFrontが使えるようになりました。
S3のバケットポリシーを更新する
ディストリビューション作成直後の画面を見てみると、上部に「バケットポリシーを更新する必要があります」と警告が表示されます。
「ポリシーをコピー」をクリックしてコピーします。
先ほど作成したS3のバケットのページに戻り、「アクセス許可」からバケットポリシーのセクションに移動し、「編集」をクリックします。
JSONの記述ができる画面になりますので、先程コピーしておいたポリシーをペーストして保存します。
これでS3のバケットとCloudFrontのディストリビューションの連携が完了しました。
画像をアップロードしてアクセスしてみる
S3のバケットにアップロード
S3のバケットの管理ページから画像を一枚アップロードしてみます。
アップロードが完了するとファイルのプロパティを確認することができます。オブジェクトURLが表示されますのでクリックしてみましょう。
エラーがでてOK
S3のオブジェクトURLからファイルにアクセスすると以下のようなエラーコードが表示されます。
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>xxxxxxxxxxxxxxxxx</RequestId>
<HostId>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</HostId>
</Error>
これでOKです。
ディストリビューションのドメイン経由でアクセスしてみる
次にCloudFrontのディストリビューションのドメイン名経由でアクセスしてみます。hogehoge.cloudfrount.net/<ファイル名>でアクセスしてみてください。（ディストリビューションドメイン名は画像のように、ディストリビューションの管理ページで確認できます）
無事に表示が確認できました。
これでCloudFront経由でファイル配信を実現することに成功です。
さいごに
今回はS3にアップロードした画像をCloudFrontを介して配信する手順について記してみました。
超初心者ですので誤り等ありましたらご指摘ください。
ご精読ありがとうございました。
参考文献
AWS「AWSクラウド無料利用枠」（2023年7月2日閲覧）
https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all