CloudFront を使用して、Amazon S3 でホストされた静的ウェブサイトを提供するにはどうすればよいですか?

最終更新日: 2022 年 11 月 3 日

静的ウェブサイトを Amazon Simple Storage Service (Amazon S3) バケットでホスティングし、Amazon CloudFront ディストリビューションを通じてウェブサイトを公開したいと考えています。どうすればそれができますか?

簡単な説明

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

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

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

解決方法

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

OAC または OAI (従来) によってアクセスが制限されているオリジンとして REST API エンドポイントを使用する

Amazon S3 コンソールを使用してバケットを作成し、ウェブサイトファイルをアップロードします。
注: この設定では、バケットで静的ウェブサイトホスティングをオンにする必要はありません。この設定では、静的ウェブサイトホスティング機能のウェブサイトエンドポイントではなく、バケットの REST API エンドポイントを使用します。
CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、次のいずれかの方法を使用して Amazon S3 オリジンへのアクセスを制限します。OAC を使用するのがベストプラクティスです。OAI の使用は従来の設定です。

ディストリビューションを作成するときは、次の設定で OAC を使用してアクセスを制限します。
[Origin Domain] (オリジンドメイン) フィールドで、Amazon S3 バケット名を入力します。
[Origin access] (オリジンアクセス) セクションで、[Origin access control settings (recommended)] (オリジンアクセスコントロール設定 (推奨)) を選択します。
[Origin access control] (オリジンアクセスコントロール) ドロップダウンリストで OAC 名を選択し、[Create control setting] (コントロール設定を作成) を選択します。
ダイアログボックスで、コントロール設定に名前を付けます。デフォルト設定の [Sign requests (recommended)] (リクエストに署名する (推奨)) のままにしておくのがベストプラクティスです。その後、[Create] (作成) を選択します。
CloudFront には、ディストリビューションを作成した後に Amazon S3 バケットにアクセスするための許可を OAC に付与するポリシーステートメントが用意されています。[Copy Policy] (ポリシーをコピー) を選択し、S3 バケットポリシー設定にポリシーを貼り付けます。

-または-

ディストリビューションを作成するときは、次の設定で OAI を使用してアクセスを制限します。
[Origin Domain] (オリジンドメイン) フィールドで、Amazon S3 バケット名を入力します。
[Origin access] (オリジンアクセス) で、[Legacy access identities
] (従来のアクセスアイデンティティ) を選択します。[Origin access identity] (オリジンアクセスアイデンティティ) ドロップダウンリストで、オリジンアクセスアイデンティティ名を選択します。その後、[Create new OAI
] (新しい OAI を作成) を選択します。ダイアログボックスで、新しいオリジンアクセスアイデンティティの名前を指定し、[Create] (作成) を選択します。
[Bucket policy] (バケットポリシー) で、[Yes, update the bucket policy] (はい、バケットポリシーを更新します) を選択します。
ディストリビューションを作成する際には、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[Custom SSL certificate] (カスタム SSL 証明書) を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください」を参照してください。
ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。
注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンで設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

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

この設定では、ウェブサイトのバケットに対するパブリック読み取りアクセスが許可されます。詳細については、ウェブサイトへのアクセスに必要な権限を参照してください。

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

Amazon S3 コンソールを使用してバケットを作成し、このバケットで静的ウェブサイトのホスティングをオンにします。
[Static website hosting] (静的ウェブサイトホスティング) ダイアログボックスから、バケットの [Endpoint] (エンドポイント) をコピーします (先頭の http:// は除きます)。形式は DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com のようになります。後のステップで、この形式のエンドポイントが必要になります。
作成したバケットに対するパブリック読み取りアクセスを許可するバケットポリシーを追加します。
注: この設定では、S3 バケットのブロックパブリックアクセス設定をオフにする必要があります。ユースケースでパブリックアクセスのブロック設定をオンにする必要がある場合は、REST API エンドポイントをオリジンとして使用します。その後、オリジンアクセスコントロール (OAC) またはオリジンアクセスアイデンティティ (OAI) によってアクセスを制限します。
CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
[Origin domain] で、手順 2 でコピーしたエンドポイントを入力します。
注:ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用されていない S3 バケット REST API エンドポイントのみが含まれます。
ディストリビューションを作成する際には、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[Custom SSL certificate] (カスタム SSL 証明書) を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください」を参照してください。
ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。
注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンで設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

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

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

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

Amazon S3 コンソールを使用してバケットを作成し、このバケットで静的ウェブサイトのホスティングをオンにします。
[Static website hosting] (静的ウェブサイトホスティング) ダイアログボックスから、バケットの [Endpoint] (エンドポイント) をコピーします (先頭の http:// は除きます)。形式は DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com のようになります。後のステップで、この形式のエンドポイントが必要になります。
CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
[Origin domain] で、手順 2 でコピーしたエンドポイントを入力します。
注:ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用されていない S3 バケット REST API エンドポイントのみが含まれます。
[カスタムヘッダーの追加] には、[ヘッダーの追加] を選択します。
[ヘッダー名] には、[Referer] と入力します。
[値] には、オリジンに転送するカスタマーヘッダー値を入力します (S3 バケット)。オリジンへのアクセスを制限するために、ランダムな値または他のユーザーは知らない秘密の値を入力します。
ディストリビューションを作成する際には、ウェブサイトに SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[Custom SSL certificate] (カスタム SSL 証明書) を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、「CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてください」を参照してください。
Amazon S3 コンソールからウェブサイトのバケットを開きます。その後、ステップ 3 で指定したカスタム Referer ヘッダーがリクエストに含まれることを条件として、s3:GetObject を許可するバケットポリシーを追加します。この設定では、S3 バケットのブロックパブリックアクセス設定をオフにする必要があります。Amazon S3 は、Referer によって制限された匿名アクセス権を付与するバケットポリシーをパブリックとみなします。ユースケースでパブリックアクセスのブロック設定をオンにする必要がある場合は、REST API エンドポイントをオリジンとして使用します。その後、オリジンアクセスコントロール (OAC) またはオリジンアクセスアイデンティティ (OAI) を使用してアクセスを制限します。
注: カスタム Referer ヘッダーを含まないリクエストに対するアクセスをブロックするには、バケットポリシーで明示的な拒否ステートメントを使用します。
ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。
注: 以前の DNS 値の有効期限が切れるまでの時間は、ホストゾーンで設定されている TTL 値によって異なります。また、ローカルリゾルバーがこれらの TTL 値を使用しているかどうかによっても異なります。

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

このソリューションを使用すると、ウェブサイトは次のようになります。

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

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