serverless static site

使用 AWS 和无服务器框架托管静态站点

该应用程序创建各种 AWS 资源来托管单页应用程序。该应用程序还有一个联系表单，用于将联系数据保存到数据库中，并向应用程序的作者发送电子邮件。

此应用程序中使用的 AWS 服务。

• S3 - 用于托管
• CloudFront - 对于 CDN
• Route53 - 对于 DNS
• 证书管理器 - 适用于 HTTPS 证书
• API 网关 - 对于 API
• Lambda - 用于保存联系表单数据
• DynamoDB - 对于数据库
• SNS - 当有人提交联系信息时向作者发送电子邮件

Route53域名配置

在本演示中，我使用路由到 Amazon Route53 的 Namecheap 域名，以便我可以轻松使用 HTTPS 认证。您可以点击此链接为 SSL 证书配置 Namecheap 到 Route53 重定向和 ACM。

要将 ACM 证书与 Amazon CloudFront 结合使用，您必须在美国东部（弗吉尼亚北部）区域请求或导入该证书。

注意：请确保您的 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邮件订阅

当有人在用户界面中填写联系表单时。 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>

执照

麻省理工学院许可证

版权所有 (c) 2021 达瓦尔纳加尔