【CloudFront + S3】独自ドメインでS3の画像を配信する

大量の画像を保存して配信する際によく使われる、CloudFront+S3環境作成の備忘録です。
CloudFrontを経由することで、S3に直接アクセスされることもなく、キャッシュも効くようになるので、レスポンスも早くなります。
データ転送量が多くなってくると、S3から直接配信するよりもCloudFrontを経由した方がコストも抑えられるそうです。
ACMの設定やアプリケーションからS3への画像アップロード処理については、今回は省略しています。

# 概要
- 独自ドメインを用いてCloudFront経由でS3に保存されている画像ファイルを確認できるようにする
- S3への直接アクセスは拒否。CloudFront経由でのみアクセスを許可する
![CloudFrontS3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/e204f5d0-4b48-0463-a8e4-d2d6fc6e1c40.jpeg)

# 対象の読者
- 「これから設定していくぞ！」と意気込んでAWSコンソールを開いたけど、やり方がわからない人
- AWSのコンソールを使用したことがある人
- 過去に似たような設定をしたことがあるけど、忘れちゃった人

# 前提条件
- ACM(AWS Certificate Manager）に設定したいドメインの証明書が登録されている
- Route53に設定したいドメインのホストゾーンが登録されている

# 手順

## S3の設定（S3バケットの作成）
S3でバケットを作成します。
バケットという言葉に容器という意味があるように、データを置く箱のようなものです。
1. AmazonS3 > バケット からバケットの作成をクリック
2. 以下の画像の情報を設定し、作成する(その他の設定はデフォルトのまま)
![スクリーンショット-2022-05-24-20.29.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/093ce2d2-66f9-bbbb-e726-9aa217cc379d.jpeg)
![スクリーンショット-2022-05-24-15.34.19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/0cf8ea85-85b4-9a56-7061-ea99d0c02386.jpeg)
3. 作成したバケットを指定し、画像をアップロードする
4. アップロードした画像のオブジェクトURLをコピーし、S3のファイルに直接アクセスしてみる
![スクリーンショット 2022-05-24 20.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/fa73e7af-43a8-f66c-880d-12d203149a26.png)
5. 画像のようなページが表示され、直接アクセスできないことが確認できればOK
![スクリーンショット 2022-05-24 20.35.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/3e1adbc1-6896-a0fb-0afa-07d037d55bb7.png)

## CloudFrontの設定
CloudFrontのディストリビューションを作成します。
ディストリビューションを作ることで、「コンテンツ配信するためのシステムを立ち上げている」くらいの認識で大丈夫だと思います。詳しくは公式ガイド (https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/distribution-working-with.html) を参照してください。

1. CloudFront > ディストリビューション からディストリビューションを作成
2. 以下の画像の情報を設定し、作成する(その他の設定はデフォルトのまま)
    - オリジンに、作成したS3を設定
    ![スクリーンショット-2022-05-25-15.41.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/fe85c6be-5f49-6f68-3b50-888ef2be3ae6.jpeg)
    - 設定の項目の代替ドメインに、使用したいドメインを設定
    ※ 代替ドメインの設定には、証明書が必要です。ACMの設定が終わっていない場合、一旦代替ドメインの設定はせずに保存して、後ほど設定を変更してください。
![スクリーンショット-2022-05-25-15.41.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/80e75256-113f-a3e1-c66a-1300be0417c6.jpeg)

3. 作成したディストリビューションのドメイン名をコピー
![スクリーンショット 2022-05-25 15.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/35e4961f-44d9-d593-d5e9-a203b163ccc9.png)

4. `https://{ディストリビューションドメイン名}/{S3に上げたファイルのパス}`にアクセスして、画像が表示されるか確認
※ディストリビューションがデプロイ中の場合、画像が表示されないことがあります。有効に切り替わってから確認してください。

## Route53の設定
Route53で、使用したいドメインがCloudFrontに向くように設定します。
1. Route53 > ホストゾーン から使用したいドメインを選択（サブドメイン付与する場合、メインドメインを選択）
2. レコードを作成を選択
3. Aレコードで、対象がCloudFrontディストリビューションのエイリアスを向くように選択して作成
![スクリーンショット-2022-05-25-16.00.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/930d8712-23c2-ae37-fe13-51b2d00f8819.jpeg)




## 最終確認
`https://{設定したドメイン}/{S3に上げたファイルのパス}`にアクセスして、画像が表示されれば完成です！
![スクリーンショット 2022-05-25 15.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/2a37bc49-ab51-9d88-dff7-93b3687db059.png)

# 最後に
いかがでしたか？
今回の例は画像ですが、他の形式であっても同様に配信することが可能です。
S3を使って、コンテンツを配信していきたい人の参考になれば幸いです。