serverless static site

Hosten Sie eine statische Site mit AWS und Serverless Framework

Diese Anwendung erstellt verschiedene AWS-Ressourcen zum Hosten einer Single Page Application. Die Anwendung verfügt außerdem über ein Kontaktformular, um die Kontaktdaten in der Datenbank zu speichern und E-Mails an den Autor der Anwendung zu senden.

In dieser Anwendung verwendete AWS-Services.

• S3 – Für Hosting
• CloudFront – Für CDN
• Route53 – Für DNS
• Zertifikatsmanager – Für HTTPS-Zertifikate
• API-Gateway – Für API
• Lambda – Zum Speichern von Kontaktformulardaten
• DynamoDB – Für Datenbank
• SNS – Zum Senden einer E-Mail an den Autor, wenn jemand eine Kontaktnachricht sendet

Konfiguration des Route53-Domänennamens

Für diese Demo verwende ich meinen Namecheap-Domainnamen, der an Amazon Route53 weitergeleitet wird, damit ich die HTTPS-Zertifizierung ohne zusätzlichen Aufwand nutzen kann. Sie können diesem Link folgen, um die Umleitung von Namecheap zu Route53 und ACM für das SSL-Zertifikat zu konfigurieren.

Um ein ACM-Zertifikat mit Amazon CloudFront zu verwenden, müssen Sie das Zertifikat in der Region USA Ost (Nord-Virginia) anfordern oder importieren.

Hinweis: Bitte stellen Sie sicher, dass Ihr S3-Bucket-Name mit Ihrem Domänennamen übereinstimmt. Mein Domänenname lautet beispielsweise newarc.io , daher habe ich meinen Bucket-Namen auf newarc.io konfiguriert.

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

Einsatz

Erstellen Sie vor der Bereitstellung die config.dev.json aus der Datei sample.config.json und legen Sie die Werte fest.

 {
    "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" 
}

Führen Sie den sls deploy -Befehl aus, um die Änderungen in AWS bereitzustellen.

Website-Inhalte veröffentlichen

Um die Site-spezifischen Änderungen voranzutreiben (Html, CSS, JS usw.)

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

Ungültigmachung des CloudFront-Cache

Nach der Bereitstellung des Dienstes, wenn Sie die Änderung nur auf Ihre Site übertragen. Die CloudFront-Verteilung wird einige Zeit in Anspruch nehmen, um den zwischengespeicherten Inhalt zu aktualisieren. Um CloudFront sofort zu aktualisieren, müssen Sie den Cache invalidate .

Gehen Sie zu Ihrer CloudFront-Konsole, kopieren Sie die über diesen Dienst erstellte Verteilungs-ID und führen Sie den folgenden Befehl aus. Bitte beachten Sie, dass der folgende Befehl den gesamten Cache löscht. Sie können die ausgewählten Dateien auch mit --paths löschen.

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

Weitere Einzelheiten finden Sie in der Dokumentation hier: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

SNS-E-Mail-Abonnement

Wenn jemand das Kontaktformular in der Benutzeroberfläche ausfüllt. Die API speichert die Daten in DynamoDB und veröffentlicht außerdem eine Nachricht im konfigurierten SNS-Thema. Das SNS-Thema verfügt auch über ein E-Mail-Abonnement, bei dem Sie die E-Mail dort platzieren können, wo Sie die Nachrichtendetails erhalten möchten.

Nachdem Sie den Service bereitgestellt haben, erhalten Sie von AWS eine Bestätigungs-E-Mail zur Aktivierung Ihres Abonnements. Bitte folgen Sie den Anweisungen in der E-Mail.

Weitere Einzelheiten finden Sie in der Dokumentation hier: https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

Aufräumen

Löschen Sie zuerst den Inhalt des Site-Buckets.

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

Entfernen Sie den Anwendungsstapel

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

Lizenz

MIT-Lizenz

Copyright (c) 2021 Dhaval Nagar