CloudFront(CDN)+S3(静的コンテンツ)構成手順概要

S3に静的コンテンツをデプロイし、CDNを使いたい場合って結構あると思います。(画像、js、htmlなどは静的コンテンツになります)

仕組みが理解出来れば、かなり簡単に構築出来ますので覚えておいて損はない構成だと思います。自分がやってみたパターンの概要を記録しておきます。詳細画面は常に変わるので、仕組みとして理解する必要があります。

なお、S3単体でhttps対応する事は現状(2019/9)出来ません。CloudFrontとACMを挟む必要があります。

スポンサーリンク

Route53

独自ドメインの場合、Route53でドメインを取得しておきます。

ACM

https対応する場合、ACMで証明書を発行しておきます。

このDNS検証用としてRoute53のCNAMEにresource record valueを設定しておきます。(ウィザードに従えば出来るはず)

注意点

CloudFrontはグローバルな為、ACMはデフォルトリージョンのvirginia(us-east-1)で作る必要があります。

S3

S3にコンテンツをデプロイします。

注意点

バケットはパブリックにしないようにします。

CloudFrontからのアクセスだけを許可するためです。脇から意図せず入ってくるのはセキュリティの面として良くないので。

CloudFront

作成したACMを指定し、origin と origin access identity に作成したS3を指定して、distribution を作成します。作成したS3のバケットポリシーにこのidentityが設定されたことを確認出来ます。

パスによってELBを指定したい場合、originを追加してELBを指定します。ALBは以下参考。

CloudFront+ALB構成手順概要
CloudFrontをALBの前段に持ってくる場合、セキュリティを考慮して、直接ALBにアクセスされないようにしたいと思います。その為、C...

注意点

  • CloudFrontがデプロイされるまで20分は覚悟
  • 独自ドメインのリクエストがS3に接続するまで1時間は覚悟(その間307リダイレクトが発生(以下記事参照)
CloudFront+S3構成にしたけど独自ドメインからS3のドメインに307リダイレクトされてしまう問題
以下の構成手順概要の通り実装した際に、独自ドメインからS3のバケットURLに307リダイレクトされてしまうという現象が発生しましたので記録...

CloudFrontまとめ記事

以下にまとめました。

https://normalblog.net/system/cloudfront-matome/