serverless static site

AWS とサーバーレス フレームワークを使用した静的サイトのホスト

このアプリケーションは、シングル ページ アプリケーションをホストするためのさまざまな AWS リソースを作成します。このアプリケーションには、連絡先データをデータベースに保存し、アプリケーションの作成者に電子メールを送信するための連絡先フォームもあります。

このアプリケーションで使用される AWS のサービス。

• S3 - ホスティング用
• CloudFront - CDN 用
• Route53 - DNS 用
• 証明書マネージャー - HTTPS 証明書の場合
• APIゲートウェイ - API用
• Lambda - コンタクトフォームデータの保存用
• DynamoDB - データベース用
• SNS - 誰かが連絡メッセージを送信したときに作成者に電子メールを送信するため

Route53 ドメイン名の設定

このデモでは、手間をかけずに HTTPS 認証を使用できるように、Amazon Route53 にルーティングされた Namecheap ドメイン名を使用しています。このリンクに従って、Namecheap から Route53 へのリダイレクトと SSL 証明書の ACM を構成できます。

Amazon CloudFront で ACM 証明書を使用するには、米国東部 (バージニア北部) リージョンで証明書をリクエストまたはインポートする必要があります。

注: S3 バケット名がドメイン名と一致していることを確認してください。たとえば、私のドメイン名はnewarc.ioなので、バケット名をnewarc.ioに設定しました。

https://benjamincongdon.me/blog/2017/06/13/How-to-Deploy-a-Secure-Static-Site-to-AWS-with-S3-and-CloudFront/

導入

デプロイする前に、 sample.config.jsonファイルからconfig.dev.jsonを作成し、値を設定します。

 {
    "BUCKET_NAME": "S3 bucket name. For example, mysite.com",
    "TABLE_NAME": "DynamoDB table name",
    "CONTACT_RECEIVED_TOPIC": "contact-received-email",
    "FORWARD_EMAIL": "Email where you want to receive contact message",
    "ACM_CERT_ARN": "arn:aws:acm:us-east-1:<AWS ACCOUNT>:certificate/<CERTIFICATION ID>",
    "HOSTED_ZONE_ID": "Route53 Hosted Zone ID" 
}

sls deployコマンドを実行して、変更を AWS にデプロイします。

サイトコンテンツの公開

サイト固有の変更 (HTML、CSS、JS など) をプッシュするには

 aws s3 sync app/ s3://<bucket name>

CloudFront キャッシュの無効化

サービスをデプロイした後、変更をサイトにプッシュするだけの場合。 CloudFront ディストリビューションでは、キャッシュされたコンテンツを更新するのに時間がかかります。 CloudFront をすぐに更新するには、キャッシュをinvalidate必要があります。

CloudFront コンソールに移動し、このサービスを通じて作成されたディストリビューション ID をコピーし、次のコマンドを実行します。次のコマンドはキャッシュ全体をクリアすることに注意してください。 --paths使用して選択したファイルをクリアすることもできます。

 aws cloudfront create-invalidation --distribution-id <ID> --paths /*

詳細については、こちらのドキュメントを確認してください - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

SNSメール購読

誰かが UI の連絡フォームに記入したとき。 API はデータを DynamoDB に保存し、設定された SNS トピックにメッセージを公開します。 SNS トピックには電子メール サブスクリプションもあり、メッセージの詳細を受け取りたい場所に電子メールを置くことができます。

サービスをデプロイすると、サブスクリプションをアクティブ化するための確認メールが AWS から届きます。メールの指示に従ってください。

詳細については、こちらのドキュメントを確認してください - https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

掃除

まずサイトバケットのコンテンツをクリアします。

 aws s3 rm s3://<bucket name> --recursive

アプリケーションスタックを削除する

 sls remove --profile <your profile> --aws-region <region>

ライセンス

MITライセンス

著作権 (c) 2021 ダヴァル ナガル