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 達瓦爾納加爾