安全な静的ウェブサイトの使用開始 - 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 Command Line Interface (AWS CLI) を使用してソリューションをデプロイします。

前提条件

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

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

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

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

AWS CloudFormation コンソールを使用する

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

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

    Launch on AWS button

  2. AWS CloudFormation コンソールに、このソリューションの CloudFormation テンプレートを指定するフィールドが事前入力された [Create stack] (スタックの作成) ウィザードが開きます。

    ページの最下部にある [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. Amazon S3 コンソール (https://console.aws.amazon.com/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-static

  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. Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。

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

    注記

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

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