安全な静的ウェブサイトの使用開始 - Amazon CloudFront

「翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。」

安全な静的ウェブサイトの使用開始

Amazon CloudFront の使用を開始するには、このトピックで説明するソリューションを使用して、ドメイン名用の安全な静的ウェブサイトを作成します。静的ウェブサイトは、HTML、CSS、JavaScript、画像、動画などの静的ファイルのみを使用し、サーバーやサーバー側の処理は必要ありません。このソリューションを使用すると、ウェブサイトには次の利点があります。

  • Amazon Simple Storage Service (Amazon S3) の耐久性のあるストレージを使用 - このソリューションでは、静的ウェブサイトのコンテンツをホストする Amazon S3 バケットを作成します。ウェブサイトを更新するには、新しいファイルを S3 バケットにアップロードするだけです。

  • Amazon CloudFront コンテンツ配信ネットワークによって高速化される - このソリューションは、低レイテンシーでビューワーにウェブサイトを提供する CloudFront ディストリビューションを作成します。このディストリビューションは、オリジンアクセスアイデンティティを使用して設定され、S3 から直接ではなく CloudFront を通じてのみウェブサイトにアクセスできるようにします。

  • HTTPS と追加のセキュリティヘッダーによって保護 - このソリューションでは、AWS Certificate Manager (ACM) で SSL/TLS 証明書を作成し、CloudFront ディストリビューションにアタッチします。この証明書により、ディストリビューションが HTTPS を使用してドメインの Web サイトに安全にサービスを提供できるようになります。

    このソリューションでは、Lambda @Edge を使用して、すべてのサーバーレスポンスにセキュリティヘッダーを追加します。セキュリティヘッダーは、ウェブサーバーレスポンス内のヘッダーのグループであり、追加のセキュリティ対策を講じるようにウェブブラウザに指示します。詳細については、ブログ記事「Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront」を参照してください。

  • AWS CloudFormation を使用して設定およびデプロイされる - このソリューションでは、AWS CloudFormation テンプレートを使用してすべてのコンポーネントを設定するため、コンポーネントの設定よりもウェブサイトのコンテンツに集中できます。

このソリューションは、GitHub 上のオープンソースです。コードを表示したり、プルリクエストを送信したり、問題を提起したりするには、「https://github.com/aws-samples/amazon-cloudfront-secure-static-site」に進みます。

ソリューションの概要

次の図は、この静的ウェブサイトソリューションの動作の概要を示しています。


                CloudFront を使用した安全な静的ウェブサイトの概要図
  1. ビューワーが www.example.com のウェブサイトをリクエストします。

  2. リクエストされたオブジェクトがキャッシュされている場合、CloudFront はオブジェクトをキャッシュからビューワーに返します。

  3. オブジェクトが CloudFront のキャッシュにない場合、CloudFront はオリジン (S3 バケット) からオブジェクトをリクエストします。

  4. S3 はオブジェクトを CloudFront に返し、Lambda@Edge オリジンレスポンスイベントをトリガーします。

  5. Lambda@Edge 関数によって追加されたセキュリティヘッダーを含むオブジェクトは、CloudFront のキャッシュに追加されます。

  6. (非表示) オブジェクトがビューワーに返されます。同じ CloudFront エッジロケーションに送信されるオブジェクトに対する後続のリクエストは、CloudFront キャッシュから処理されます。

ソリューションのデプロイ

この安全な静的ウェブサイトソリューションをデプロイするには、次のいずれかのオプションを選択できます。

  • AWS CloudFormation コンソールを使用してデフォルトコンテンツでソリューションをデプロイし、ウェブサイトのコンテンツを Amazon S3 にアップロードします。

  • ソリューションをコンピュータにクローンして、ウェブサイトのコンテンツを追加します。次に、AWS コマンドラインインターフェイス (AWS CLI) を使用してソリューションをデプロイします。

前提条件

このソリューションを使用するには、次の前提条件が必要です。

  • Amazon Route 53 ホストゾーンを指している登録済みドメイン名 (example.com など)。ホストゾーンは、このソリューションをデプロイするのと同じ AWS アカウントに存在する必要があります。登録済みドメイン名がない場合、Route 53 で登録できます。登録済みドメイン名を持っているが、Route 53 ホストゾーンを指していない場合、DNS サービスとして Route 53 を設定します

  • AWS Identity and Access Management (IAM) ロールを作成する CloudFormation テンプレートを起動するための IAM アクセス許可、およびソリューション内のすべての AWS のリソースを作成するためのアクセス許可。

このソリューションの使用中に発生したコストは、お客様の負担となります。コストの詳細については、AWS の各サービスの料金表ページを参照してください。

AWS CloudFormation コンソールの使用

CloudFormation コンソールを使用してデプロイするには

  1. [AWS で起動] を選択して、AWS CloudFormation コンソールでこのソリューションを開きます。必要に応じて、AWS アカウントにサインインします。

    
                            Launch on AWS button

  2. AWS CloudFormation コンソールにスタックの作成ウィザードが開きます。フィールドが事前に入力されており、このソリューションの CloudFormation テンプレートが指定されています。

    ページの最下部にある [Next] を選択します。

  3. [スタック詳細の指定] ページで、次のフィールドに値を入力します。

    • SubDomain - ウェブサイトで使用するサブドメインを入力します。たとえば、サブドメインが www の場合、ウェブサイトは www.example.com で利用できます。(次の箇条書きで説明するように、example.com をドメイン名に置き換えます)。

    • DomainName - example.com などのドメイン名を入力します。このドメインは Route 53 ホストゾーンを指している必要があります。

    完了したら、[次へ] を選択します。

  4. (オプション) [スタックオプションの設定] ページで、タグおよびその他のスタックオプションを追加します

    完了したら、[次へ] を選択します。

  5. [レビュー] ページで、ページの下部までスクロールし、[機能] セクションの 2 つのボックスを選択します。これらの機能により、AWS CloudFormation がスタックのリソースへのアクセスを許可する IAM ロールを作成し、リソースに動的に名前を付けることができるようになります。

  6. [スタックの作成] を選択します。

  7. スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[ステータス] が [CREATE_COMPLETE] に変わります。

    ステータスが [CREATE_COMPLETE] の場合、https://www.example.com に移動してウェブサイトを表示します (www.example.com は、ステップ 3 で指定したサブドメイン名およびドメイン名に置き換えます)。ウェブサイトのデフォルトコンテンツが表示されます。

    
                            このソリューションの静的ウェブサイトのデフォルトコンテンツ。「I am a static website!」と書かれている

ウェブサイトのデフォルトのコンテンツを独自のコンテンツに置き換えるには

  1. https://console.aws.amazon.com/s3/ で Amazon S3 コンソールを開きます。

  2. 名前が amazon-cloudfront-secure-static-site-s3bucketroot- で始まるバケットを選択します。

    注記

    s3bucketlogs ではなく、名前に s3bucketroot を含むバケットを選択してください。名前に s3bucketroot が含まれるバケットには、ウェブサイトのコンテンツが含まれています。s3bucketlogs が含まれるバケットには、ログファイルのみ含まれています。

  3. ウェブサイトのデフォルトコンテンツを削除し、独自のコンテンツをアップロードします。

    注記

    このソリューションのデフォルトコンテンツでウェブサイトを表示した場合、デフォルトコンテンツの一部が CloudFront エッジロケーションにキャッシュされている可能性があります。更新されたウェブサイトのコンテンツがビューワーに確実に表示されるようにするには、ファイルを無効にして、CloudFront エッジロケーションからキャッシュされたコピーを削除します。詳細については、「ファイルの無効化」を参照してください。

ローカルでのソリューションのクローン作成

前提条件

このソリューションをデプロイする前にウェブサイトのコンテンツを追加するには、ソリューションのアーティファクトをローカルでパッケージ化する必要があります。これには、Node.js と npm が必要です。詳細については、「https://www.npmjs.com/get-npm」を参照してください。

ウェブサイトのコンテンツを追加し、ソリューションをデプロイするには

  1. https://github.com/aws-samples/amazon-cloudfront-secure-static-site からソリューションをクローンまたはダウンロードします。クローンを作成またはダウンロードしたら、コマンドプロンプトまたはターミナルを開き、amazon-cloudfront-secure-static-site フォルダに移動します。

  2. 次のコマンドを実行し、ソリューションのアーティファクトをインストールしてパッケージ化します。

    make package-function
  3. ウェブサイトのコンテンツを www フォルダにコピーし、デフォルト Web サイトのコンテンツを上書きします。

  4. 次の AWS CLI コマンドを実行し、ソリューションのアーティファクトを保存する Amazon S3 バケットを作成します。example-bucket-for-artifacts を独自のバケット名に置き換えます。

    aws s3 mb s3://example-bucket-for-artifacts --region us-east-1
  5. 次の AWS CLI コマンドを実行し、ソリューションのアーティファクトを AWS CloudFormation テンプレートとしてパッケージ化します。example-bucket-for-artifacts を、前のステップで作成したバケットの名前に置き換えます。

    aws cloudformation package \ --region us-east-1 --template-file templates/main.yaml \ --s3-bucket example-bucket-for-artifacts \ --output-template-file packaged.template
  6. 次のコマンドを実行し、AWS CloudFormation を使用してソリューションをデプロイします。次の値を置き換えます。

    • your-CloudFormation-stack-name - AWS CloudFormation スタックの名前で置き換えます。

    • example.com - ドメイン名で置き換えます。このドメインは、同じ AWS アカウントの Route 53 ホストゾーンを指している必要があります。

    • www - ウェブサイトで使用するサブドメインに置き換えます。たとえば、サブドメインが www の場合、ウェブサイトは www.example.com で利用できます。

    aws cloudformation deploy \ --region us-east-1 --stack-name your-CloudFormation-stack-name \ --template-file packaged.template \ --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \ --parameter-overrides DomainName=example.com SubDomain=www
  7. AWS CloudFormation スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[ステータス] が [CREATE_COMPLETE] に変わります。

    ステータスが [CREATE_COMPLETE] に変わったら、https://www.example.com に移動してウェブサイトを表示します (www.example.com は、前のステップで指定したサブドメイン名およびドメイン名に置き換えます)。ウェブサイトのコンテンツが表示されます。

アクセスログの検索

このソリューションでは、CloudFront ディストリビューションのアクセスログが有効になります。ディストリビューションのアクセスログを見つけるには、以下のステップを実行します。

ディストリビューションのアクセスログを見つけるには

  1. https://console.aws.amazon.com/s3/ で Amazon S3 コンソールを開きます。

  2. 名前が amazon-cloudfront-secure-static-site-s3bucketlogs- で始まるバケットを選択します。

    注記

    s3bucketroot ではなく、名前に s3bucketlogs を含むバケットを選択してください。名前に s3bucketlogs が含まれるバケットには、ログファイルが含まれています。s3bucketroot が含まれるバケットには、ウェブサイトのコンテンツが含まれています。

  3. cdn という名前のフォルダには、CloudFront アクセスログが含まれています。