produced by Classmethod ˗ˏˋ 技術とビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 事前登録受付中

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 とします。