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

最終更新日: 2020 年 6 月 11 日

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

簡単な説明

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

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

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

解決方法

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

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

  1. Amazon S3 コンソールを使用してバケットを作成し、ウェブサイトファイルをアップロードします。
  2. CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
    [Origin Domain Name] には、作成したバケットを選択します。
    [バケットアクセスの制限] には、[はい] を選択します。
    [Origin Access Identity] には、[新しい ID の作成] を選択します。
    [コメント] には、デフォルト値のままを選択することができます。または、OAI のカスタムラベルを入力することもできます。
    [バケットの読み取りアクセス許可を付与] には、[はい、バケットポリシーを更新します] を選択します。
  3. ウェブサイトに SSL (HTTPS) を使用したくない場合は、次の手順に進みます。ウェブサイトに SSL を使用するには、[SSL 証明書] に [デフォルトの CloudFront 証明書] または [カスタム SSL 証明書] を選択できます。または、[ACM で証明書をリクエストまたはインポート] を選択して新しい証明書をリクエストすることもできます。
    重要: ディストリビューションに [代替ドメイン名 (CNAME)] を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。詳細については、「代替ドメイン名および HTTPS を使用する」を参照してください。
  4. [ディストリビューションの作成] を選択します。
  5. ドメインの DNS レコードを更新して、ウェブサイトの CNAME を CloudFront ディストリビューションのドメイン名に設定します。CloudFront コンソールd1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
  6. DNS の変更が反映され、以前の DNS エントリが期限切れになるのを待ちます。

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

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

  1. Amazon S3 コンソールを使用してバケットを作成し、バケットで静的ウェブサイトホスティングを有効にします
  2. [静的ウェブサイトホスティング] ダイアログボックスから、先頭の http:// を付けずにバケットのエンドポイントをコピーします。形式は AWSDOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com のようになります。以降の手順ではこの形式のエンドポイントが必要です。
  3. 作成したバケットへパブリック読み取りアクセスを許可するバケットポリシーを追加します。
  4. CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
    [Origin Domain Name] で、手順 2 でコピーしたエンドポイントを入力します。
  5. ウェブサイトに SSL (HTTPS) を使用したくない場合は、次の手順に進みます。ウェブサイトに SSL を使用するには、[SSL 証明書] に [デフォルトの CloudFront 証明書] または [カスタム SSL 証明書] を選択できます。または、[ACM で証明書をリクエストまたはインポート] を選択して新しい証明書をリクエストすることもできます。
    重要: ディストリビューションに [代替ドメイン名 (CNAME)] を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。詳細については、「代替ドメイン名および HTTPS を使用する」を参照してください。
  6. [ディストリビューションの作成] を選択します。
  7. ドメインの DNS レコードを更新して、ウェブサイトの CNAME を CloudFront ディストリビューションのドメイン名に設定します。CloudFront コンソールd1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
  8. DNS の変更が反映され、以前の DNS エントリが期限切れになるのを待ちます。

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

注: この設定では、ディストリビューションにカスタムの Referer ヘッダーを設定し、次にバケットポリシーを使用してカスタムの Referer ヘッダーを持つリクエストにのみアクセスを許可することでアクセスを制限します。この設定で許可されているアクセスが、ユースケースの要件を満たしているかどうかを必ず評価してください。

  1. Amazon S3 コンソールを使用してバケットを作成し、バケットで静的ウェブサイトホスティングを有効にします
  2. [静的ウェブサイトホスティング] ダイアログボックスから、先頭の http:// を付けずにバケットのエンドポイントをコピーします。形式は AWSDOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com のようになります。以降の手順ではこの形式のエンドポイントが必要です。
  3. CloudFront ウェブディストリビューションを作成します。ユースケースに必要なディストリビューション設定に加えて、以下を入力してください。
    [Origin Domain Name] で、手順 2 でコピーしたエンドポイントを入力します。
    [ヘッダー名] の [Origin カスタムヘッダー] に、[Referer] と入力します。[] には、オリジンに転送するカスタムヘッダーを入力します (S3 バケット)。オリジンへのアクセスを制限するために、ランダムな値または他の人は知らない秘密の値を入力することができます。
  4. ウェブサイトに SSL (HTTPS) を使用したくない場合は、次の手順に進みます。ウェブサイトに SSL を使用するには、[SSL 証明書] に [デフォルトの CloudFront 証明書] または [カスタム SSL 証明書] を選択できます。または、[ACM で証明書をリクエストまたはインポート] を選択して新しい証明書をリクエストすることもできます。
    重要: ディストリビューションに [代替ドメイン名 (CNAME)] を入力した場合、CNAME は選択した SSL 証明書と一致する必要があります。詳細については、「代替ドメイン名および HTTPS を使用する」を参照してください。
  5. [ディストリビューションの作成] を選択します。
  6. Amazon S3 コンソールからウェブサイトのバケットを開きます。次に、手順 3 で指定したカスタム Referer ヘッダーがリクエストに含まれることを条件として、s3:GetObject を許可するバケットポリシーを追加します。
    注: カスタム Referer ヘッダーを含まないリクエストに対するアクセスをブロックするには、バケットポリシーで明示的な拒否ステートメントを使用します。
  7. ドメインの DNS レコードを更新して、ウェブサイトの CNAME を CloudFront ディストリビューションのドメイン名に設定します。CloudFront コンソールd1234abcd.cloudfront.net のような形式のディストリビューションのドメイン名を見つけることができます。
  8. DNS の変更が反映され、以前の DNS エントリが期限切れになるのを待ちます。

CloudFormation を使用して REST API エンドポイントをオリジンとしてデプロイし、OAI と CloudFront を指すカスタムドメインによってアクセスを制限する

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

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

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