安全な静的ウェブサイトの開始方法

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

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

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

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

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

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

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

[レビュー] ページで、ページの下部までスクロールし、[機能] セクションの 2 つのボックスを選択します。これらの機能により、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- で始まるバケットを選択します。

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

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

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

make package-static

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

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

aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-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

次のコマンドを実行し、CloudFormation を使用してソリューションをデプロイし、次の値を置き換えます。

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

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

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

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

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

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