wwwあり・なしのS3静的WebサイトをCloudFront経由で公開する構成4選

S3上の静的WebサイトをCloudfront経由で公開する構成をまとめてみました。
2020.08.18

こんにちは、久住です。

静的WebサイトをS3で公開する際に、wwwありwwwなしの2つのドメインで公開したいというケースがありました。 今回はCloudFront経由で公開する構成をまとめてみました。

【追記】 コメントを頂き、方法1のCloudFrontの代替ドメイン名(CNAME)の利用は 重複コンテンツとしてマイナス評価を受ける可能性がある ということがわかりました。

https://support.google.com/webmasters/answer/66359?hl=ja

ご指摘いただいたsuzuki.ryoさん、ありがとうございます!

方法1.CloudFrontの代替ドメイン名(CNAME)を利用

CloudFrontの代替ドメイン名(CNAME)には複数ドメイン記載することができるので、wwwありwwwなしの2つのドメインを設定する方法があります。

代替ドメイン名 (CNAME) を追加してカスタム URL を使用する

静的Webサイトホスティング無効

S3までの通信をHTTPSにする場合はS3の[Static website hosting]を無効にします。 この場合のメリットとしてはCloudfront - S3間のアクセス制限(OAI)をできることです。

静的Webサイトホスティング有効

S3の[Static website hosting]を有効にすると、CloudFront - S3間の通信がHTTPとなることに加え、OAIが使えませんのでご注意ください。 この場合のメリットとしては、サブディレクトリを切った場合にroot object(index.html等)を指定せずにアクセスできることです。

例)example.com/hoge/index.htmlにアクセスしたい場合 → example.com/hoge/にアクセスすることで実現可能

基本的には方法1で問題ないことが多いと思います。 下記はコンテンツの仕様等によって、どうしても上記の構成が取れない場合に考えてみた構成です。

方法2.S3のリダイレクト設定を利用

S3の[Static website hosting]を有効にするとリダイレクト設定ができるので、こちらを利用する方法です。

下記はwww.example.comにアクセスした場合、CloudFront -> S3にアクセスし、S3でexample.comにリダイレクトされる設定です。

この場合、最終的にブラウザ上に表示されるURLはexample.comになります。

方法3.S3のメタデータを利用

1つのhtmlで完結するようなシンプルなコンテンツの場合、S3オブジェクト単位にリダイレクト用のメタデータを入れておくことでリダイレクト可能です。

https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html

方法2では全てのリクエストをリダイレクトする場合はバケットポリシーを参照しない動作であることが現在の AWS の仕様のため、リダイレクト元のS3バケットに直接アクセスできないバケットポリシーをかけませんでした。しかし、方法3ではバケットポリシーが動作するため、全てのS3バケットをセキュアに保つことができます。

方法4.Lambda@Edgeを利用

方法1を利用しつつ、サブディレクトリを切っている構成の場合、Lambda@Edgeを利用する構成が考えられます。

詳細は下記エントリーに詳しく記載がございますので御覧ください。

https://dev.classmethod.jp/articles/directory-indexes-in-s3-origin-backed-cloudfront/

まとめ

簡単にですが、各方法とメリット/デメリットをまとめてみました。

方法 メリット デメリット
Cloudfrontの代替ドメイン名(CNAME) シンプルな構成 ほとんどの場合でOKだがコンテンツ次第では不十分
S3のリダイレクト設定 200OK応答 リダイレクト元のS3にOAI設定ができない
バケットポリシーが動作しない
S3のメタデータ 200OK応答 リダイレクト元のS3にOAI設定ができない
リダイレクト元のS3にコンテンツ(同名ファイル)を置かないといけない
Lambda@Edge サブディレクトリ運用が容易 アクセス毎にlambda@Edgeの費用がかかる

S3のリダイレクト設定やメタデータでのリダイレクトは、あまり登場シーンはないかもしれないですね。

【追記】
方法1が重複コンテンツとしてSEOでマイナス評価を受ける可能性があるとのことなので、S3のリダイレクト設定かLambda@Edgeが望ましい形になりそうです。

さいごに

構築の中で色々な構成を検証してきたので頭の整理も兼ねてまとめてみました。 「こんな構成使わないよ」というのもあるかもしれないですが、一部の要素が皆様のお役に立てば幸いです。