simple static website

シンプルな静的ウェブサイト

単一の AWS CloudFormation スクリプトを使用して、シンプルで安価な CDN ベースの静的ウェブサイトを作成します。 Gatsby、Hugo、11ty などの静的サイト ジェネレーターを使用して構築されたサイトに最適です。ステートレスな React アプリ。または、単純な古い HTML、CSS、および画像ファイル。

説明書

1. ここで AWS にドメインを登録します

2. Route53 でそのドメインのホストゾーンを作成しました

3. simple-static-website.yamlテンプレートを使用して、新しい CloudFormation スタックを作成します。 CloudFront の制約のため、これはus-east-1で実行する必要があります。

4. パラメータを指定します。

   • ドメイン名
   • ウェブサイト名
   • HostedZoneId (コンソールを使用すると、リストが提供されます)
   • BucketName (オプション)、既存のバケットを使用する場合。空のままにした場合、CloudFormation は URL サブドメインからバケット名を生成します。

5. コンソールまたは awscli を使用して CloudFormation スタックをプロビジョニングします。

    aws cloudformation deploy 
       --stack-name foo 
       --template-file simple-static-website.yaml 
       --parameter-overrides 
           DomainName=example.com 
           HostedZoneId=ABCDEFGHIJK0123456789 
           WebsiteName=www
   

6. 新しく作成した S3 バケットに単純なindex.html ファイルを置きます。サンプルの awscli コマンドについては、スタックの CloudFormation 出力を確認してください。

7. 指定したドメインで新しい Web サイトにアクセスします。 URL については、CloudFormation の出力を参照してください。

コンテンツ配信ネットワーク (CDN) の使用に関する注意事項

CloudFront CDN はウェブサイトを世界中の複数の場所にキャッシュすることに注意してください。サイトを変更する場合は、キャッシュを無効にする必要があります。料金はかかりますが、サーバーを実行しないため、全体的には非常に安価な設定です。

謝辞

このスクリプトは、Alain Seng の優れたブログ投稿と、Amazon の今はなき CloudFormer テンプレートを介して実行される手動でプロビジョニングされた既存のサイトの出力からインスピレーションを得たものです。 CloudFormer は優れたツールですが、このソリューションによってユーザーが利用できる CVE の数が増加したため、Amazon によってその存在が隠蔽されてしまいました。これについては、karimelmel による良い記事がここにあります。 CloudFormation スクリプトを改善し、新機能を追加してくれた eisenhowerj に感謝します。