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

簡単な説明

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) を入力する場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用する際の問題をトラブルシューティングするにはどうすればよいですか?」を参照してください。

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

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

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

この設定により、ウェブサイトのバケットへのパブリック読み取りアクセスが可能になります。詳細については、 「Web サイトへのアクセス権限の設定」を参照してください。
注: 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) を入力する場合、CNAME は選択した SSL 証明書と一致する必要があります。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) を入力する場合、CNAME は選択した SSL 証明書と一致する必要があります。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 証明書マネージャー (ACM) からの SSL/TLS 証明書を使用する
• CloudFront レスポンスヘッダーポリシーを使用して、すべてのサーバーレスポンスにセキュリティヘッダーを追加する

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

関連情報

安全な静的ウェブサイトを始める

E メール検証

DNS バリデーション

代替ドメイン名と HTTPS の使用