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

最終更新日: 2021 年 9 月 14 日

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

• アクセスがオリジンアクセスアイデンティティ (OAI) で制限されたオリジンとして、REST API エンドポイントを使用する
• 匿名 (パブリック) アクセスを許可して、ウェブサイトのエンドポイントをオリジンとして使用する
• アクセスが Referer ヘッダーで制限されたオリジンとして、ウェブサイトのエンドポイントを使用する
• AWS CloudFormation を使用して REST API エンドポイントをオリジンとしてデプロイし、OAI と CloudFront を指すカスタムドメインによってアクセスを制限する

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

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

1. Amazon S3 コンソールを使ってバケットを作成し、ウェブサイトファイルをアップロードします。
   注: この設定では、バケットで静的ウェブサイトホスティングを有効にする必要はありません。この設定では、静的ウェブサイトホスティング機能のウェブサイトエンドポイントではなく、バケットの REST API エンドポイントを使用します。
2. CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
   [Origin Domain] には、作成したバケットを選択します。
   [S3 バケットアクセス] には、[はい、OAI を使用する] (バケットは CloudFront のみへのアクセスを制限できます) を選択します。
   [Origin Access Identity] には、[新しい OAI の作成] を選択します。次に、OAI 名を入力し、[作成] を選択します。
   [バケットポリシー] には、[はい、バケットポリシーを更新します] を選択します。
3. ウェブサイトには SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてくださいをご覧ください。
4. [Create Distribution] ( ディストリビューションを作成 ) を選択します。
5. ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
6. 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 エンドポイントをオリジンとして使用し、オリジンアクセスアイデンティティ (OAI) によるアクセスを制限します。
4. CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
   [Origin domain] で、手順 2 でコピーしたエンドポイントを入力します。
   注:ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用されていない S3 バケット REST API エンドポイントのみが含まれます。
5. ウェブサイトには SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてくださいをご覧ください。
6. [Create Distribution] ( ディストリビューションを作成 ) を選択します。
7. ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
8. DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。
   注: 以前の DNS 値の有効期限が切れるまでにかかる時間は、ホストゾーンで設定されている TTL 値、およびローカルのリゾルバーがこれらの TTL 値を使用するかどうかによって異なります。

この設定では、ディストリビューションにカスタムの 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 ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
   [Origin domain] で、手順 2 でコピーしたエンドポイントを入力します。注:ドロップダウンリストからバケットを選択しないでください。ドロップダウンリストには、この設定で使用されていない S3 バケット REST API エンドポイントのみが含まれます。
   [カスタムヘッダーの追加] には、[ヘッダーの追加] を選択します。
   [ヘッダー名] には、[Referer] と入力します。
   [値] には、オリジンに転送するカスタマーヘッダー値を入力します (S3 バケット)。オリジンへのアクセスを制限するために、ランダムな値または他の人は知らない秘密の値を入力します。
4. ウェブサイトには SSL (HTTPS) を使用するのがベストプラクティスです。HTTPS でカスタムドメインを使用するには、[カスタム SSL 証明書] を選択します。 [証明書の要求] を選択して、新しい証明書を要求できます。カスタムドメインを使用していない場合でも、ディストリビューションの cloudfront.net ドメイン名で HTTPS を使用できます。
   重要: ディストリビューションに [Alternate domain names (CNAMEs)] (代替ドメイン名 (CNAME)) を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。SSL 証明書の問題をトラブルシューティングするには、CloudFront ディストリビューションでカスタム SSL 証明書を使用している場合の問題のトラブルシューティング方法を教えてくださいをご覧ください。
5. [Create Distribution] ( ディストリビューションを作成 ) を選択します。
6. Amazon S3 コンソールからウェブサイトのバケットを開きます。次に、手順 3 で指定したカスタム Referer ヘッダーがリクエストに含まれることを条件として、s3:GetObject を許可するバケットポリシーを追加します。この設定では、S3 バケットのブロックパブリックアクセス設定を無効にする必要があります。(Amazon S3 は、リファラによって制限された匿名アクセスを許可するバケットポリシーをパブリックと見なします)。ユースケースでブロックパブリックアクセス設定を有効にする必要がある場合は、REST API エンドポイントをオリジンとして使用し、アクセスはオリジンアクセスアイデンティティ (OAI) によって制限されます。
   注: カスタム Referer ヘッダーを含まないリクエストに対するアクセスをブロックするには、バケットポリシーで明示的な拒否ステートメントを使用します。
7. ドメインの DNS レコードを更新して、ウェブサイトの CNAME が CloudFront ディストリビューションのドメイン名をポイントするように設定します。CloudFront コンソールで d1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
8. DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。
   注: 以前の DNS 値の有効期限が切れるまでにかかる時間は、ホストゾーンで設定されている TTL 値、およびローカルのリゾルバーがこれらの TTL 値を使用するかどうかによって異なります。

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

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

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