はじめに
表題の件について調べる機会がありましたのでまとめました。
実はCloudFormationの練習が主な目的なので目新しい内容はありませんが、良かったらお付き合いください。
パターン
- S3Originを使用するパターン
- S3静的ウェブサイトホスティングを使用するパターン
Pros / Cons / 使いどころ例
共通
Pros
- 独自ドメインでhttps接続できるようになる
- たぶん大概の場合利用料金が安くなる
- その他以下参照
CDP:Cache Distributionパターン - 利点
Cons
S3Originを使用するパターン
Pros
- OAIを用いて、S3へのアクセスをCloudFront経由に限定できる
- 署名付きURL等を使ってアクセス制限できる
- アクセスログをCloudFrontのログに集約できる
- ログに限らずCloudFrontでできることはCloudFrontに任せられる
Cons
- サブディレクトリ以下のIndexDocument設定ができない
- ex.) 以下のようにフルパスで指定する必要がある
- NG:
https://example.com/blog/ - OK:
https://example.com/blog/index.html
- バージニアリージョン（us-east-1）以外のS3バケットをOriginに指定した場合、設定直後のアクセス状況によってはしばらく繋がらないことがある
参考: Cloudfront,S3で307リダイレクトに苦しめられた - パパエンジニアのアウトプット帳
使いどころ例
- SPA
- ペライチなウェブサイト
- 特定のユーザのみアクセス可能なコンテンツの配信
- etc.
S3静的ウェブサイトホスティングを使用するパターン
Pros
- サブディレクトリ以下のIndexDocumentを設定できる（S3の静的ウェブサイトホスティングにて設定）
-
https://example.com/blog/でもOKになる
-
Cons
- S3バケットをパブリック公開する必要がある
- バケットポリシーでUserAgentやOrigin Custom Headers等を用いて、制限している雰囲気にすることはできる
- CloudFront→S3間がhttpでの平文接続になる
- GCS（Google Cloud Storage）はhttpsで静的ウェブサイト配信設定ができるようです。CloudFrontのOriginはS3である必要はないので、httpが嫌なだけであればS3の代わりにGCSを選択するのも手。
参考: 静的ウェブサイトの例、トラブルシューティング、ヒント | Cloud Storage ドキュメント | Google Cloud
- GCS（Google Cloud Storage）はhttpsで静的ウェブサイト配信設定ができるようです。CloudFrontのOriginはS3である必要はないので、httpが嫌なだけであればS3の代わりにGCSを選択するのも手。
使いどころ例
- 階層のあるウェブサイト
- 平文でパブリック公開されても問題ないコンテンツの配信
- etc.
CloudFormationテンプレートスニペット
Gistに書きました。
パラメータに使用するカスタムドメインとSSL証明書のARNを入力したら、あとはコピペでGO!
※話を簡単にするため、ACMでのSSL証明書取得（またはインポート）およびカスタムドメインとCloudFront Distributionの紐付けは別途ご対応いただく前提となっております。
S3Originを使用するパターン
CloudFormation template snippet - CloudFront Distribution with a S3 Origin · GitHub
S3静的ウェブサイトホスティングを使用するパターン
CloudFormation template snippet - CloudFront Distribution with a S3 Static Website Hosting · GitHub
おわりに
有名な2パターンについて書きましたが、どちらがベストとは言いづらくケースバイケースで選択する必要がありますね。
AWSにこだわる必要がなければ、要件に応じて文中でも少し書いたGCPや、静的ホスティングに特化したNetlify等のサービスを検討してみてもよいかと思います。
それでは以上です。
CloudFormationの練習に付き合っていただきありがとうございました。
補足：本文で言及した以外の参考文献
- CloudFormation で OAI を使った CloudFront + S3 の静的コンテンツ配信インフラを作る ｜ DevelopersIO
- オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する - Amazon CloudFront
- カスタムヘッダーをオリジン (ウェブディストリビューションのみ) へ転送する - Amazon CloudFront
- 今だから！Amazon CloudFront 徹底活用
- AWS BlackBelt Online Seminar 2017 Amazon CloudFront + AWS Lambda@Edge
- CloudFront + S3 で静的サイトを運用する際の注意点 - Qiita
- Amazon S3 + CloudFront で始める静的サイトホスティング | kuune.org