More than 5 years have passed since last update.

CloudFront+S3で静的コンテンツ配信するパターンまとめと、そのまま使えるCloudFormationテンプレートスニペット

Posted at 2018-11-15

はじめに

表題の件について調べる機会がありましたのでまとめました。
実はCloudFormationの練習が主な目的なので目新しい内容はありませんが、良かったらお付き合いください。

パターン

S3Originを使用するパターン
S3静的ウェブサイトホスティングを使用するパターン

Pros / Cons / 使いどころ例

共通

Pros

独自ドメインでhttps接続できるようになる
たぶん大概の場合利用料金が安くなる
その他以下参照

CDP:Cache Distributionパターン - 利点

Cons

以下参照

CDP:Cache Distributionパターン - 注意

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

使いどころ例

階層のあるウェブサイト
平文でパブリック公開されても問題ないコンテンツの配信
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の練習に付き合っていただきありがとうございました。

補足：本文で言及した以外の参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up