CloudFront を使用して Amazon S3 でホストされている静的ウェブサイトを提供する方法を教えてください。

Amazon Simple Storage Service (Amazon S3) バケットを使用して静的ウェブサイトをホストしたいと考えています。それから、Amazon CloudFront ディストリビューションを通じてウェブサイトを提供したいと考えています。

簡単な説明

Amazon S3 でホストされている静的ウェブサイトを提供するには、以下の設定のいずれかを使用して CloudFront ディストリビューションをデプロイします。

• REST API エンドポイントをオリジンとして使用し、オリジンアクセスコントロール (OAC) またはオリジンアクセスアイデンティティ (OAI) を使用してアクセスを制限する
  注: オリジンアクセスコントロール (OAC) を使用してアクセスを制限するのがベストプラクティスです。オリジンアクセスアイデンティティ (OAI) は、このプロセスの従来の方法です。
• ウェブサイトのエンドポイントをオリジンとして使用し、匿名 (パブリック) アクセスを許可する
• ウェブサイトのエンドポイントをオリジンとして使用し、Referer ヘッダーでアクセスを制限する
• AWS CloudFormation を使用して、静的ウェブサイトエンドポイントをオリジンとし、CloudFront を指すカスタムドメインをデプロイする

この 2 つのエンドポイントタイプの詳細については、「ウェブサイトエンドポイントと REST API エンドポイントの主な違い」を参照してください。

解決策

オリジンとして使用する S3 エンドポイントタイプで CloudFront ディストリビューションを設定するには、次の手順を実行します。

REST API エンドポイントをオリジンとして使用し、OAC または OAI (レガシー) でアクセスを制限する

次の手順を実行します。

1.     Amazon S3 コンソール を使用してバケットを作成し、自分のウェブサイトファイルをアップロードします。
   注: この設定では、バケットの静的ウェブサイトホスティングをオンにする必要はありません。この設定で使用するのは、静的ウェブサイトホスティング機能のウェブサイトエンドポイントではなく、バケットの REST API エンドポイントです。

2. CloudFront ウェブディストリビューションを作成します。ユースケースのディストリビューション設定に加えて、次のセクションのいずれかのステップを実行して、Amazon S3 オリジンへのアクセスを制限します。OAI はレガシー設定であるため、OAC を使用するのがベストプラクティスです。
   OAC

   ディストリビューションを作成するときは、[オリジンドメイン] フィールドに Amazon S3 バケット名を入力します。

   **[オリジンアクセス]で、[オリジンアクセスコントロール設定 (推奨)]**を選択します。

   **[オリジンアクセスコントロール]ドロップダウンリストで、OAC名を選択し、[コントロール設定を作成]**を選択します。

   ダイアログボックスで、コントロール設定に「**.** I」という名前を付けます。デフォルト設定の [署名リクエスト (推奨)] のままにすることをお勧めします。その後、**[作成]**を選択します。

   CloudFront は、ディストリビューションの作成後、Amazon S3 バケットへのアクセス許可を OAC に付与するポリシーステートメントを提供します。[ポリシーをコピー] を選択し、S3 バケットポリシー設定にポリシーを貼り付けます。

   OAI

   ディストリビューションを作成するときは、[オリジンドメイン] フィールドに Amazon S3 バケット名を入力します。

   [オリジンアクセス] で、**[レガシーアクセスアイデンティティ]**を選択します。

   [オリジンアクセスアイデンティティ] ドロップダウンリストで、オリジンアクセスアイデンティティ名を選択します。次に、**[新しい OAI を作成]**を選択します。

   ダイアログボックスで、新しいオリジンアクセスアイデンティティに名前を付け、**[作成]**を選択します。

   [バケットポリシー] で **[はい、バケットポリシーを自動で更新します]**を選択します。

3. ディストリビューションを作成するときは、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。****[証明書をリクエスト] を選択して、新しい証明書をリクエストします。カスタムドメインを使用しない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションの代替ドメイン名 (CNAME) を入力する場合、選択した SSL 証明書と CNAME が一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください。」を参照してください。

4. ドメインの DNS レコードを更新して、ウェブサイトのドメインが CloudFront を指すようにします。ディストリビューションのドメイン名は、CloudFront コンソールで確認できます。ドメイン名は、次の例のようになります: d1234abcd.cloudfront.net。

5. DNS の変更が反映され、以前の DNS エントリの有効期限が切れるまでお待ちください。
   注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンに設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

ウェブサイトのエンドポイントをオリジンとして使用し、匿名 (パブリック) アクセスを許可する

この設定により、ウェブサイトのバケットへのパブリック読み取りアクセスが可能になります。詳細については、「ウェブサイトアクセスのアクセス許可の設定」を参照してください。

注: Amazon S3 の静的ウェブサイトエンドポイントを使用する場合、CloudFront と Amazon S3 の間の接続は HTTP のみで利用可能です。CloudFront と Amazon S3 間の接続に HTTPS を使用するには、オリジンに S3 REST API エンドポイントを設定します。

次の手順を実行します。

1. Amazon S3 コンソールを使用してバケットを作成し、そのバケットで静的ウェブサイトホスティングを有効にします。

2. 静的ウェブサイトホスティングダイアログボックスから、先頭に http:// を付けずにバケットのエンドポイントをコピーします。形式は DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.comに似ています。この形式のエンドポイントは、後のステップで必要になります。

3. 作成したバケットへのパブリック読み取りアクセスを許可するバケットポリシーを追加します。
   注: この設定では、S3 バケットのブロックのパブリックアクセス設定をオフにする必要があります。ユースケースで、パブリックアクセスのブロック設定をオンにする必要がある場合は、REST API エンドポイントをオリジンとして使用してください。その後、オリジンアクセスコントロール (OAC) またはオリジンアクセスアイデンティティ (OAI) によってアクセスを制限します。

4. CloudFront ウェブディストリビューションを作成します。ユースケースのディストリビューション設定に加えて、次の手順を実行します。

   [オリジンドメイン] には、前のステップでコピーしたエンドポイントを入力します。
   注: ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用しない S3 Bucket REST API エンドポイントのみが含まれます。

5. ディストリビューションを作成するときは、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。[証明書をリクエスト] を選択して、新しい証明書をリクエストします。カスタムドメインを使用しない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションの代替ドメイン名 (CNAME) を入力する場合、選択した SSL 証明書と CNAME が一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください。」を参照してください。

6. ドメインの DNS レコードを更新して、ウェブサイトのドメインが CloudFront を指すようにします。ディストリビューションのドメイン名は、CloudFront コンソールで確認できます。ドメイン名の形式は、次の例のようになります: d1234abcd.cloudfront.net。

7. DNS の変更が反映され、以前の DNS エントリの有効期限が切れるまでお待ちください。
   注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンに設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

ウェブサイトのエンドポイントをオリジンとして使用し、Referer ヘッダーでアクセスを制限する

重要: この設定で許可されているアクセスがユースケースの要件を満たしているかどうかを確認してください。

この設定では、ディストリビューションにカスタム Referer ヘッダーを設定してアクセスを制限します。次に、バケットポリシーを使用して、カスタム Referer ヘッダーを持つリクエストにのみアクセスを許可します。

注: Amazon S3 の静的ウェブサイトエンドポイントを使用する場合、CloudFront と Amazon S3 の間の接続は HTTP のみで利用可能です。CloudFront と Amazon S3 間の接続に HTTPS を使用するには、オリジンに S3 REST API エンドポイントを設定します。

次の手順を実行します。

1. Amazon S3 コンソールを使用してバケットを作成し、そのバケットで静的ウェブサイトホスティングを有効にします。

2. 静的ウェブサイトホスティングダイアログボックスから、先頭に http:// を付けずにバケットのエンドポイントをコピーします。形式は DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.comに似ています。この形式のエンドポイントは、後のステップで必要になります。

3. CloudFront ウェブディストリビューションを作成します。ユースケースのディストリビューション設定に加えて、次の手順を実行します。

   [オリジンドメイン] には、前のステップでコピーしたエンドポイントを入力します。
   注: ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用されていない S3 Bucket REST API エンドポイントのみが含まれています。

   [カスタムヘッダーの追加] で **[ヘッダーを追加]**を選択します。

   [ヘッダー名] に、Refererと入力します。

   [値] には、オリジン (S3 バケット) に転送する顧客ヘッダーの値を入力します。オリジンへのアクセスを制限するために、ランダムな値または他のユーザーは知らない秘密の値を入力します。

4. ディストリビューションを作成するときは、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。****[証明書をリクエスト] を選択して、新しい証明書をリクエストします。カスタムドメインを使用しない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションの代替ドメイン名 (CNAME) を入力する場合、選択した SSL 証明書と CNAME が一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください。」を参照してください。

5. Amazon S3 コンソールからウェブサイトのバケットを開きます。次に、ステップ 3 で指定したカスタム Referer ヘッダー がリクエストに含まれていることを条件に s3:GetObject を許可するバケットポリシーを追加します。この設定では、S3 バケットのブロックのパブリックアクセス設定をオフにする必要があります。Amazon S3 は、Referer によって制限された匿名アクセスを許可するバケットポリシーをパブリックと見なします。ユースケースでパブリックアクセスのブロック設定をオンにする必要がある場合は、REST API エンドポイントをオリジンとして使用してください。その後、オリジンアクセスコントロール (OAC) またはオリジンアクセスアイデンティティ (OAI) を使用してアクセスを制限します。
   **注:**カスタム Referer ヘッダーを含まないリクエストへのアクセスをブロックするには、バケットポリシーで明示的な拒否ステートメントを使用します。

6. ドメインの DNS レコードを更新して、ウェブサイトのドメインが CloudFront を指すようにします。ディストリビューションのドメイン名は、CloudFront コンソールで確認できます。ドメイン名は、次の例のようになります: d1234abcd.cloudfront.net。

7. DNS の変更が反映され、以前の DNS エントリの有効期限が切れるまでお待ちください。
   注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンに設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

CloudFormation を使用して、静的ウェブサイトエンドポイントをオリジンとし、CloudFront を指すカスタムドメインをデプロイします

このソリューションでは、Webサイトに次の設定を使用します。

• CloudFormation を使用してウェブサイトをデプロイする
• Amazon S3 でウェブサイトをホストする
• CloudFront を使用してウェブサイトを配信する
• AWS Certificate Manager (ACM) からの SSL/TLS 証明書を使用する
• CloudFront レスポンスヘッダーポリシーを使用して、すべてのサーバーレスポンスにセキュリティヘッダーを追加する

このソリューションをデプロイする方法については、GitHub ウェブサイトの「Amazon CloudFront Secure Static Website」を参照してください。

関連情報

安全な静的ウェブサイトの開始方法

代替ドメイン名と HTTPS を使用する