S3をCloudflare CDNのオリジンに指定してみた

quiver

2022.05.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Amazon S3上のコンテンツをCloudflare CDNから配信する構成について、S3バケットの静的ウェブサイトホスティング化の有無に応じて紹介します。

静的ウェブサイトを有効にする場合

S3には静的ウェブサイトホスティングという機能があります。

リダイレクト設定や'/path'と/path/index.html'の URL を同一視するといったウェブと親和性の高い機能が備わっています。

参考 Amazon S3 + Amazon CloudFrontでWebサイトを構築する際にS3静的Webサイトホスティングを採用する理由 | DevelopersIO

本機能を有効にする場合の構成例です。

S3 バケットの作成

配信するドメインと同じ名前のS3バケットを作成します。

S3 バケットポリシーの変更

CloudflareのネットワークからS3オブジェクトにアクセスできるよう、S3バケットの Permissions → Bucket policy を変更します。

アクセス元を制限する

Cloudflare ネットワークからのみアクセスを許可する場合、以下のポリシーを適用します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::Bucket-Name/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "CloudflareのIP一覧"
                    ]
                }
            }
        }
    ]
}

CloudflareのIP一覧は次のページから確認できます。

IP Ranges | Cloudflare

アクセス元を制限しない

任意のクライアントがS3にアクセスしても良い場合の設定です。

S3 の初期設定ではパブリックアクセスするポリシーを設定できないため、Permissions→Block public accessから本機能を無効化します。

次に、任意のクライアント("Principal": "*")がS3オブジェクトをGETできるよう(Allow s3::GetObject)、以下のポリシーを適用します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

S3 バケットの静的ウェブサイトホスティングを有効化

S3バケットのプロパティ→Static website hosting から静的ウェブサイトホスティングを有効化します。

バケットウェブサイトエンドポイントを控えます。

CloudflareにDNSレコードを追加

Cloudflare の DNS に S3 バケットのバケットウェブサイトエンドポイントをCNAMEレコードで登録します。

SSL/TLS設定

静的ウェブサイトホスティングのエンドポイントは HTTP プロトコルのみ対応し、HTTPS プロトコルには対応していません。

CloudflareからS3オリジンへの通信が HTTP 通信となるよう、Cloudflare のSSL/TLS 設定を Flexible とします。

静的ウェブサイトを無効にする場合

配信するドメインとS3バケット名を揃えるかどうかで手順が変わります。

S3 バケットの作成

S3バケット名を作成します。

配信するドメインとS3バケット名を揃えたほうが、手順はシンプルです。

S3 バケットポリシーの変更

静的ウェブサイトを有効にする場合と手順は同じです。

CloudflareにDNSレコードを追加

Cloudflare の DNS に S3 バケットの仮想ホスティング形式のホスト名をCNAMEレコードで登録します。

「バケット名.s3.リージョン.amazonaws.com」という形式をしており

your.bucket.name.s3.ap-northeast-1.amazonaws.com
your-bucket-name.s3.ap-northeast-1.amazonaws.com

などが該当します。

SSL/TLS設定

ブラウザ-Cloudflare間のみTLS化する Flexible
E2EでTLS化する Full

の両方に対応しています。

(オプション)オリジンアクセス時のホストの書き換え

配信するドメインとS3バケット名を一致させなかった場合、Cloudflare Pages Ruleを使い、オリジンリクエスト時のホスト名をS3エンドポイントに上書きします。

具体的には、

URL : www.example.cf/*
Key : Host Header Override
Value : your-bucket-name.s3.ap-northeast-1.amazonaws.com

のようなルールを追加します。

まとめ

最後に、構成別の設定方法を整理します。

静的ウェブサイトホスト	S3バケット名	エンドポイント	TLS/SSL	Page Rule設定
有効	ドメインと一致	バケット名.s3-website-リージョン.amazonaws.com	flexible	不要
無効	ドメインと一致	バケット名.s3.リージョン.amazonaws.com	flexible/full	不要
無効	ドメインと不一致	バケット名.s3.リージョン.amazonaws.com	flexible/full	HostヘッダーをS3エンドポイントで上書き