コンテンツにスキップ

Cloudflareを使用するためのAmazon Web Services静的サイトの設定

概要

Cloudflareを使用して、AmazonのSimple Storage Service（S3）を利用して静的コンテンツを保存するAmazon Web Services（AWS）に依存するサイトをプロキシすることができます。

この記事では、以下の前提を想定しています：

  • あなたのサイトは登録されたドメインに関連付けられており、
  • S3バケットに追加する静的コンテンツ（画像やHTMLページなど）を持っています。

始めるには、以下の手順に従ってください。

AWS S3バケットの設定

AWS S3バケットは、パブリッククラウドストレージリソースです。これらのバケットはファイルフォルダに似ており、データと記述メタデータを含むオブジェクトを保存します。詳細については、Amazon S3バケットの操作 ↗を参照してください。

このガイドでは、あなたのサイトが以下の両方で利用可能であることを想定します：

  • サブドメインURL（例：https://www.example.com）、および
  • アペックスドメイン（「ルートドメイン」とも呼ばれる）URL（例：https://example.com）。

これを実現するには、以下のタスクを完了して2つのS3バケットを設定する必要があります。

タスク1 - サブドメイン用のS3バケットを設定

サブドメインS3バケットを作成して設定するには、Amazonの以下の手順に従ってください：

  1. AWS管理コンソールを使用して、S3バケットを作成 ↗します。バケット名には、https://部分を除いたサブドメインURLを使用します。例えば、www.example.com。
  2. 次に、静的ウェブサイトホスティング用にS3バケットを設定 ↗します。静的ウェブサイトホスティングの設定を保存した後は、バケットのパブリックアクセスを無効にする手順をスキップできます。

タスク2 - アペックスドメイン用のS3バケットを設定

サブドメインバケットを設定した後、アペックスドメインバケットを作成して設定できます。Amazonの以下の手順に従ってください：

  1. AWS管理コンソールを使用して、S3バケットを作成 ↗します。バケット名には、https://部分を除いたドメインURLを使用します。例えば、example.com。
  2. 次に、このバケットのURLからサブドメインバケットのURLにリクエストをリダイレクトする必要があります。以下の手順に従ってください：S3バケットホストウェブサイトへのリクエストを別のホストにリダイレクト ↗。ターゲットバケットまたはドメインには、タスク1で使用したサブドメインバケットのバケット名を入力します。例えば、www.example.com。

CloudflareのIPアドレスを許可するためのバケットポリシーを設定

バケットを作成し、静的コンテンツのホスティングを有効にしたので、Cloudflareがバケットにアクセスできるように権限を設定できます。これにより、サイトはCloudflareプロキシからのリクエストにのみ応答します。これは、Cloudflareプロキシで使用される現在のIPアドレス範囲のリスト ↗です。

ポリシーを設定するには：

  1. Amazonの手順に従って、S3バケットポリシーを追加 ↗します。
  2. バケットポリシーエディタでポリシーを入力するステップでは、以下のサンプルを使用して必要なJSONコードを記入します。以下の内容を置き換えることを確認してください：
    • www.example.com（"Resource": "arn:aws:s3:www.example.com/*"に表示される）をサブドメインURLのS3バケット名に置き換えます。
    • プレースホルダーIPアドレスをCloudflareのIPアドレス ↗の現在のリストに置き換えます。
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "192.2.0.1" (例のIPアドレス),
                        "192.2.0.2" (例のIPアドレス),
                        (https://www.cloudflare.com/ipsにリストされているすべてのIPを追加)
                    ]
                }
            }
        }
    ]
}

S3バケットに静的コンテンツをアップロード

S3バケットに静的コンテンツを追加するには、Amazonの手順に従ってファイルとフォルダをS3バケットにアップロード ↗します。

Cloudflareでサイトを設定

Cloudflareでサイトを設定する前に、サブドメインとルートバケットの両方のURLまたはエンドポイントを確認してください。各バケットのURLは、AWS S3コンソールのプロパティ > 静的ウェブサイトホスティング > エンドポイントで見つけることができます。

始めるには：

  1. Cloudflareアカウントを作成し、ウェブサイトを追加 ↗する手順に従ってください。すでにアカウントをお持ちの場合は、Cloudflareにドメインを追加に直接進むことができます。
  2. DNSクエリ結果画面でDNSレコードを確認するステップに到達したら、サブドメインとアペックスドメインURLそれぞれの新しいCNAMEレコードを2つ作成する必要があります。
  3. レコードを追加をクリックして、サブドメインDNSレコード（例：www.example.com）を作成します。CNAMEレコードを追加する手順は、CloudflareでのDNSレコードの管理 ↗を参照してください。
    • 名前フィールドには、サブドメイン名を入力します。例えば、www。
    • 値フィールドには、サブドメインバケットエンドポイントを入力します。https://部分は含めないでください。
    • 保存をクリックします。
  4. 次に、アペックスドメイン（例：example.com）について、レコードを追加をクリックします。CNAMEレコードを追加する手順は、CloudflareでのDNSレコードの管理 ↗を参照してください。
    • 名前フィールドには、アペックスドメイン名を入力します。例えば、example.com。
    • 値フィールドには、アペックスドメインバケットエンドポイントを入力します。https://部分は含めないでください。
    • 保存をクリックします。
  5. S3静的サイトはデフォルトでHTTPSをサポートしていないため、設定ルールを使用してSSLモードをフレキシブルに設定します。
  6. 最後に、ドメインのネームサーバーをCloudflareに変更 ↗します。

サイトがCloudflareで完全に設定されると、訪問者は設定したサブドメインまたはアペックスドメインエンドポイントを使用してAWS S3ホストのコンテンツにアクセスできるようになります。

トラブルシューティング

CloudflareでDNSレコードを作成する際に「無効なホスト名：ルートドメインを表すには「@」を使用してください。」というエラーが表示されます。

  • CNAMEレコードを作成していることを確認してください。他のレコードタイプではありません。

Cloudflareが私のドメイン名レジストラですが、ネームサーバーを変更する方法がわかりません。

  • すでにCloudflareをドメイン名レジストラとして使用している場合、ネームサーバーを変更する必要はありません。

私の静的HTMLページがフォーマットなしのHTMLコードとして表示されます。

  • プロパティを設定 > メタデータ > ヘッダー： Content-Type、値： text/htmlで正しいメタデータオプションを選択したことを確認してください。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings