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

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

ソリューションの概要

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

ビューワーが www.example.com のウェブサイトをリクエストします。
リクエストされたオブジェクトがキャッシュされている場合、はオブジェクトをキャッシュからビューワーに CloudFront 返します。
オブジェクトが CloudFrontのキャッシュにない場合、はオリジン (S3 バケット) からオブジェクトを CloudFront リクエストします。
S3 は、オブジェクトをに返します。これにより CloudFront、Lambda@Edge オリジンレスポンスイベントがトリガーされます。
Lambda@Edge 関数によって追加されたセキュリティヘッダーを含むオブジェクトが、 CloudFrontのキャッシュに追加されます。
(非表示) オブジェクトがビューワーに返されます。同じ CloudFront エッジロケーションに送信されるオブジェクトに対する後続のリクエストは、キャッシュから処理されます CloudFront。

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

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

AWS CloudFormation コンソールを使用してデフォルトコンテンツでソリューションをデプロイしてから、ウェブサイトのコンテンツを Amazon S3 にアップロードします。
ソリューションをコンピュータにクローンして、ウェブサイトのコンテンツを追加します。次に、AWS Command Line Interface (AWS CLI) を使用してソリューションをデプロイします。

注記

CloudFormation テンプレートをデプロイするには、米国東部 (バージニア北部) リージョンを使用する必要があります。

トピック

前提条件
AWS CloudFormation コンソールを使用する場合
ローカルでのソリューションのクローン作成
アクセスログの検索

前提条件

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

Amazon Route 53 ホストゾーンを指している登録済みドメイン名 (example.com など)。ホストゾーンは、このソリューションをデプロイするAWS アカウントのと同じにある必要があります。登録済みドメイン名がない場合、Route 53 で登録できます。登録済みドメイン名を持っていても、Route 53 のホストゾーンをポイントしていないという場合は、Route 53 を DNS サービスとして設定します。
AWS Identity and Access Management IAM ロールを作成する CloudFormation 起動テンプレートへの (IAM) アクセス許可と、ソリューション内のすべてのAWSリソースを作成するアクセス許可。

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

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

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

[Launch on AWS] (Launch で起動) を選択して、AWS CloudFormation コンソールでこのソリューションを開きます。必要に応じて、にサインインしますAWS アカウント。
スタックの作成ウィザードが CloudFormationコンソールで開き、このソリューション CloudFormationのテンプレートを指定するフィールドがあらかじめ入力されています。

ページの最下部にある [Next] を選択します。
[スタック詳細の指定] ページで、次のフィールドに値を入力します。
- SubDomain – ウェブサイトに使用するサブドメインを入力します。たとえば、サブドメインが www の場合、ウェブサイトは www.example.com で利用できます。(次の箇条書きで説明するように、example.com をドメイン名に置き換えます)。
- DomainName – example.com などのドメイン名を入力します。このドメインは Route 53 ホストゾーンを指している必要があります。
- HostedZoneId – ドメイン名の Route 53 ホストゾーン ID。
完了したら、[次へ] を選択します。
(オプション) [スタックオプションの設定] ページで、タグおよびその他のスタックオプションを追加します。

完了したら、[次へ] を選択します。
[レビュー] ページで、ページの下部までスクロールし、[機能] セクションの 2 つのボックスを選択します。これらの機能は、AWS CloudFormation がスタックのリソースへのアクセスを許可する IAM ロールを作成し、リソースを動的に命名することを可能にします。
[スタックの作成] を選択します。
スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[ステータス] が [CREATE_COMPLETE] に変わります。

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

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

https://console.aws.amazon.com/s3/でAmazon S3 コンソールを開きます。
名前が amazon-cloudfront-secure-static-site-s3bucketroot- で始まるバケットを選択します。

注記
s3bucketlogs ではなく、名前に s3bucketroot を含むバケットを選択してください。名前に s3bucketroot が含まれるバケットには、ウェブサイトのコンテンツが含まれています。s3bucketlogs が含まれるバケットには、ログファイルのみ含まれています。
ウェブサイトのデフォルトコンテンツを削除し、独自のコンテンツをアップロードします。

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

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

前提条件

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

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

からソリューションをクローンまたはダウンロードしますhttps://github.com/aws-samples/amazon-cloudfront-secure-static-site クローンを作成またはダウンロードしたら、コマンドプロンプトまたはターミナルを開き、amazon-cloudfront-secure-static-site フォルダに移動します。
次のコマンドを実行し、ソリューションのアーティファクトをインストールしてパッケージ化します。
```
make package-static
```
ウェブサイトのコンテンツを www フォルダにコピーし、デフォルト Web サイトのコンテンツを上書きします。
次の AWS CLI コマンドを実行して、ソリューションのアーティファクトを保存する Amazon S3 バケットを作成します。を独自のバケット名example-bucket-for-artifactsに置き換えます。
```
aws s3 mb s3://example-bucket-for-artifacts --region us-east-1
```
次の 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
```
次のコマンドを実行し、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
```
AWS CloudFormation スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[ステータス] が [CREATE_COMPLETE] に変わります。

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

アクセスログの検索

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

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

https://console.aws.amazon.com/s3/でAmazon S3 コンソールを開きます。
-amazon-cloudfront-secure-staticsite-s3bucketlogs- で始まる名前のバケットを選択します。

注記
s3bucketroot ではなく、名前に s3bucketlogs を含むバケットを選択してください。名前に s3bucketlogs が含まれるバケットには、ログファイルが含まれています。s3bucketroot が含まれるバケットには、ウェブサイトのコンテンツが含まれています。
cdn という名前のフォルダには、 CloudFront アクセスログが含まれています。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

ヒント

ディストリビューションの使用