# 安全な静的ウェブサイトの開始方法
Amazon CloudFront の使用を開始するには、このトピックで説明するソリューションを使用して、ドメイン名用の安全な静的ウェブサイトを作成します。*静的ウェブサイト*は、HTML、CSS、JavaScript、画像、動画などの静的ファイルのみを使用し、サーバーやサーバー側の処理は必要ありません。このソリューションを使用すると、ウェブサイトには次の利点があります。
+ **[Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html) の耐久性のあるストレージを使用** - このソリューションでは、静的ウェブサイトのコンテンツをホストする Amazon S3 バケットを作成します。ウェブサイトを更新するには、新しいファイルを S3 バケットにアップロードするだけです。
+ **Amazon CloudFront コンテンツ配信ネットワークによる高速化** - このソリューションは、低レイテンシーでビューワーにウェブサイトを提供する CloudFront ディストリビューションを作成します。このディストリビューションは、[オリジンアクセスコントロール](private-content-restricting-access-to-s3.md) (OAC) を使用して設定され、S3 から直接ではなく CloudFront を通じてのみウェブサイトにアクセスできるようにします。
+ **HTTPS とセキュリティヘッダーによってセキュリティ保護される** - このソリューションは、[AWS Certificate Manager (ACM)](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) で SSL/TLS 証明書を作成し、それを CloudFront ディストリビューションにアタッチします。この証明書により、ディストリビューションが HTTPS を使用してドメインの Web サイトに安全にサービスを提供できるようになります。
+ **[AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) を使用した設定とデプロイ** - このソリューションは CloudFormation テンプレートを使用してすべてのコンポーネントをセットアップするため、コンポーネントの設定よりもウェブサイトのコンテンツに集中できます。
このソリューションは、GitHub 上のオープンソースです。コードを表示したり、プルリクエストを送信したり、問題を提起したりするには、「」に進みます[https://github.com/aws-samples/amazon-cloudfront-secure-static-site](https://github.com/aws-samples/amazon-cloudfront-secure-static-site)
**Topics**
+ [ソリューションの概要](#cloudformation-website-overview)
+ [ソリューションをデプロイする](#deploy-secure-static-website-cloudformation)
## ソリューションの概要
次の図は、この静的ウェブサイトソリューションの動作の概要を示しています。
![\[CloudFront を使用した安全な静的ウェブサイトの概要図\]](http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-overview-github.png)
1. ビューワーが www.example.com のウェブサイトをリクエストします。
1. リクエストされたオブジェクトがキャッシュされている場合、CloudFront はオブジェクトをキャッシュからビューワーに返します。
1. オブジェクトが CloudFront のキャッシュにない場合、CloudFront はオリジン (S3 バケット) にオブジェクトをリクエストします。
1. S3 はオブジェクトを CloudFront に返します。
1. CloudFront はオブジェクトをキャッシュします。
1. オブジェクトがビューワーに返されます。同じ CloudFront エッジロケーションに送信されるオブジェクトに対する後続のリクエストは、CloudFront キャッシュから処理されます。
## ソリューションをデプロイする
この安全な静的ウェブサイトソリューションをデプロイするには、次のいずれかのオプションを選択できます。
+ CloudFormation コンソールを使用してデフォルトコンテンツでソリューションをデプロイしてから、ウェブサイトのコンテンツを Amazon S3 にアップロードします。
+ ソリューションをコンピュータにクローンして、ウェブサイトのコンテンツを追加します。次に、AWS Command Line Interface (AWS CLI) を使用してソリューションをデプロイします。
**注記**
米国東部 (バージニア北部) リージョンを使用して CloudFormation テンプレートをデプロイする必要があります。
**Topics**
+ [前提条件](#deploy-website-cloudformation-prerequisites)
+ [CloudFormation コンソールを使用する](#deploy-website-cloudformation-console)
+ [ソリューションのクローンをローカルで作成する](#deploy-website-cloudformation-clone)
+ [アクセスログの検索](#deploy-website-cloudformation-logs)
### 前提条件
このソリューションを使用するには、次の前提条件が必要です。
+ Amazon Route 53 ホストゾーンを指している登録済みドメイン名 (example.com など)。ホストゾーンは、このソリューションのデプロイ先と同じ AWS アカウントにある必要があります。登録済みドメイン名がない場合、[Route 53 で登録](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/registrar.html)できます。登録済みドメイン名を持っていても、Route 53 のホストゾーンをポイントしていないという場合は、[Route 53 を DNS サービスとして設定](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/dns-configuring.html)します。
+ IAM ロールを作成する CloudFormation テンプレートを起動するための AWS Identity and Access Management (IAM) 許可、およびソリューション内のすべての AWS のリソースを作成するための許可。詳細については、*AWS CloudFormation ユーザーガイド*の「[Controlling access with AWS Identity and Access Management](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-iam-template.html)」を参照してください。
このソリューションの使用中に発生したコストは、お客様の負担となります。コストの詳細については、[各 AWS のサービスの料金ページ](https://aws.amazon.com/pricing/)を参照してください。
### CloudFormation コンソールを使用する
**CloudFormation コンソールを使用してデプロイするには**
1. [このソリューションを CloudFormation コンソール で起動します](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=amazon-cloudfront-secure-static-site-templates-main&templateURL=https://s3.amazonaws.com/solution-builders-us-east-1/amazon-cloudfront-secure-static-site/latest/main.yaml)。必要に応じて、AWS アカウントにサインインします。
1. CloudFormation コンソールで **[スタックを作成]** ウィザードが開きます。このソリューションの CloudFormation テンプレートを指定するフィールドが事前に入力されています。
ページの最下部にある [**Next**] を選択します。
1. [**スタック詳細の指定**] ページで、次のフィールドに値を入力します。
+ **SubDomain** - ウェブサイトで使用するサブドメインを入力します。たとえば、サブドメインが *www* の場合、ウェブサイトは *www*.example.com で利用できます。(次の箇条書きで説明するように、example.com をドメイン名に置き換えます)。
+ **DomainName** - *example.com* などのドメイン名を入力します。このドメインは Route 53 ホストゾーンを指している必要があります。
+ **HostedZoneId** — ドメイン名の Route 53 ホストゾーン ID。
+ **CreateApex** – (オプション) CloudFront 設定にドメイン頂点 (example.com) へのエイリアスを作成します。
1. 完了したら、[**次へ**] を選択します。
1. (オプション) [**スタックオプションの設定**] ページで、[タグおよびその他のスタックオプションを追加します](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-add-tags.html)。
1. 完了したら、[**次へ**] を選択します。
1. [**レビュー**] ページで、ページの下部までスクロールし、[**機能**] セクションの 2 つのボックスを選択します。これらの機能により、CloudFormation はスタックのリソースへのアクセスを許可する IAM ロールを作成し、リソースに動的に名前を付けることができます。
1. [**スタックの作成**] を選択します。
1. スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[**ステータス**] が [**CREATE\$1COMPLETE**] に変わります。
ステータスが [**CREATE\$1COMPLETE**] の場合、https://*www.example.com* に移動してウェブサイトを表示します (www.example.com は、ステップ 3 で指定したサブドメイン名およびドメイン名に置き換えます)。ウェブサイトのデフォルトコンテンツが表示されます。
![\[このソリューションの静的ウェブサイトのデフォルトコンテンツ。「I am a static website!」と書かれている\]](http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-content.png)
**ウェブサイトのデフォルトのコンテンツを独自のコンテンツに置き換えるには**
1. Amazon S3 コンソール ([https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)) を開きます。
1. 名前が **amazon-cloudfront-secure-static-site-s3bucketroot-** で始まるバケットを選択します。
**注記**
**s3bucketlogs** ではなく、名前に **s3bucketroot** を含むバケットを選択してください。名前に **s3bucketroot** が含まれるバケットには、ウェブサイトのコンテンツが含まれています。**s3bucketlogs** が含まれるバケットには、ログファイルのみ含まれています。
1. ウェブサイトのデフォルトコンテンツを削除し、独自のコンテンツをアップロードします。
**注記**
このソリューションのデフォルトコンテンツでウェブサイトを表示した場合、デフォルトコンテンツの一部が CloudFront エッジロケーションにキャッシュされている可能性があります。更新されたウェブサイトのコンテンツがビューワーに確実に表示されるようにするには、ファイルを*無効*にして、CloudFront エッジロケーションからキャッシュされたコピーを削除します。詳細については、「[ファイルを無効化してコンテンツを削除する](Invalidation.md)」を参照してください。
### ソリューションのクローンをローカルで作成する
**前提条件**
このソリューションをデプロイする前にウェブサイトのコンテンツを追加するには、ソリューションのアーティファクトをローカルでパッケージ化する必要があります。これには、Node.js と npm が必要です。詳細については、「[https://www.npmjs.com/get-npm](https://www.npmjs.com/get-npm)」を参照してください。
**ウェブサイトのコンテンツを追加し、ソリューションをデプロイするには**
1. からソリューションをクローンまたはダウンロードします[https://github.com/aws-samples/amazon-cloudfront-secure-static-site](https://github.com/aws-samples/amazon-cloudfront-secure-static-site) クローンを作成またはダウンロードしたら、コマンドプロンプトまたはターミナルを開き、`amazon-cloudfront-secure-static-site` フォルダに移動します。
1. 次のコマンドを実行し、ソリューションのアーティファクトをインストールしてパッケージ化します。
```
make package-static
```
1. ウェブサイトのコンテンツを `www` フォルダにコピーし、デフォルト Web サイトのコンテンツを上書きします。
1. 次の AWS CLI コマンドを実行して、ソリューションのアーティファクトを保存する Amazon S3 バケットを作成します。*amzn-s3-demo-bucket-for-artifacts* を独自のバケット名に置き換えます。
```
aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1
```
1. 次の AWS CLI コマンドを実行し、ソリューションのアーティファクトを CloudFormation テンプレートとしてパッケージ化します。*amzn-s3-demo-bucket-for-artifacts* を、前のステップで作成したバケットの名前に置き換えます。
```
aws cloudformation package \
--region us-east-1 \
--template-file templates/main.yaml \
--s3-bucket amzn-s3-demo-bucket-for-artifacts \
--output-template-file packaged.template
```
1. 次のコマンドを実行し、CloudFormation を使用してソリューションをデプロイし、次の値を置き換えます。
+ *your-CloudFormation-stack-name* - CloudFormation スタックの名前で置き換えます。
+ *example.com* - ドメイン名で置き換えます。このドメインは、同じ AWS アカウント の Route 53 ホストゾーンをポイントしている必要があります。
+ *www* - ウェブサイトで使用するサブドメインに置き換えます。たとえば、サブドメインが *www* の場合、ウェブサイトは www.example.com で利用できます。
+ *hosted-zone-ID* — ドメイン名の Route 53 ホストゾーン ID に置き換えます。
```
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 HostedZoneId=hosted-zone-ID
```
1. （オプション) ドメイン頂点を使用してスタックをデプロイするには、代わりに次のコマンドを実行します。
```
aws --region us-east-1 cloudformation deploy \
--stack-name your-CloudFormation-stack-name \
--template-file packaged.template \
--capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
--parameter-overrides DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes
```
1. CloudFormation スタックの作成が完了するまで待ちます。スタックはネストされたスタックを作成します。完了までに数分かかることがあります。完了すると、[**ステータス**] が [**CREATE\$1COMPLETE**] に変わります。
ステータスが [**CREATE\$1COMPLETE**] に変わったら、https://www.example.com に移動してウェブサイトを表示します (www.example.com は、前のステップで指定したサブドメイン名およびドメイン名に置き換えます)。ウェブサイトのコンテンツが表示されます。
### アクセスログの検索
このソリューションでは、CloudFront ディストリビューションの[アクセスログ](AccessLogs.md)が有効になります。ディストリビューションのアクセスログを見つけるには、以下のステップを実行します。
**ディストリビューションのアクセスログを見つけるには**
1. Amazon S3 コンソール ([https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)) を開きます。
1. 名前が **amazon-cloudfront-secure-static-site-s3bucketlogs-** で始まるバケットを選択します。
**注記**
**s3bucketroot** ではなく、名前に **s3bucketlogs** を含むバケットを選択してください。名前に **s3bucketlogs** が含まれるバケットには、ログファイルが含まれています。**s3bucketroot** が含まれるバケットには、ウェブサイトのコンテンツが含まれています。
1. **cdn** という名前のフォルダには、CloudFront アクセスログが含まれています。