serverless static site

Héberger un site statique avec AWS et Serverless Framework

Cette application crée diverses ressources AWS pour héberger une application à page unique. L'application dispose également d'un formulaire de contact pour enregistrer les données de contact dans la base de données et également envoyer un e-mail à l'auteur de l'application.

Services AWS utilisés dans cette application.

• S3 - Pour l'hébergement
• CloudFront - Pour CDN
• Route53 - Pour DNS
• Gestionnaire de certificats - Pour le certificat HTTPS
• Passerelle API - Pour l'API
• Lambda - Pour enregistrer les données du formulaire de contact
• DynamoDB - Pour la base de données
• SNS - Pour envoyer un e-mail à l'auteur lorsque quelqu'un soumet un message de contact

Configuration du nom de domaine Route53

Pour cette démo, j'utilise mon nom de domaine Namecheap acheminé vers Amazon Route53 afin de pouvoir utiliser la certification HTTPS sans problème supplémentaire. Vous pouvez suivre ce lien pour configurer la redirection Namecheap vers Route53 et ACM pour le certificat SSL.

Pour utiliser un certificat ACM avec Amazon CloudFront, vous devez demander ou importer le certificat dans la région USA Est (Virginie du Nord).

Remarque : Veuillez vous assurer que le nom de votre compartiment S3 correspond à votre nom de domaine. Par exemple, mon nom de domaine est newarc.io , j'ai donc configuré le nom de mon bucket sur newarc.io .

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

Déploiement

Avant de déployer, créez le config.dev.json à partir du fichier sample.config.json et définissez les valeurs.

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

Exécutez la commande sls deploy pour déployer les modifications sur AWS.

Publication du contenu du site

Pour pousser les modifications spécifiques au site (Html, CSS, JS, etc.)

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

Invalidation du cache CloudFront

Après avoir déployé le service, si vous transmettez simplement la modification à votre site. La distribution CloudFront prendra un certain temps pour mettre à jour le contenu mis en cache. Pour mettre à jour immédiatement CloudFront, vous devrez invalidate le cache.

Accédez à votre console CloudFront, copiez l'ID de distribution créé via ce service et exécutez la commande suivante. Veuillez noter que la commande suivante effacera tout le cache. Vous pouvez également effacer les fichiers sélectifs en utilisant --paths .

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

Pour plus de détails, consultez la documentation ici - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Abonnement aux e-mails SNS

Quand quelqu'un remplit le formulaire de contact dans l'interface utilisateur. L'API enregistrera les données dans DynamoDB et publiera également un message dans la rubrique SNS configurée. Le sujet SNS dispose également d'un abonnement par e-mail, dans lequel vous pouvez placer l'e-mail à l'endroit où vous souhaitez recevoir les détails du message.

Après avoir déployé le service, vous recevrez l'e-mail de confirmation d'AWS pour activer votre abonnement. Veuillez suivre les instructions contenues dans l'e-mail.

Pour plus de détails, consultez la documentation ici - https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

Nettoyer

Effacez d’abord le contenu du compartiment de site.

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

Supprimer la pile d'applications

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

Licence

Licence MIT

Copyright (c) 2021 Dhaval Nagar