serverless static site

Aloje un sitio estático con AWS y Serverless Framework

Esta aplicación crea varios recursos de AWS para alojar una aplicación de página única. La aplicación también tiene un formulario de contacto para guardar los datos de contacto en la base de datos y también enviar un correo electrónico al autor de la aplicación.

Servicios de AWS utilizados en esta aplicación.

• T3 - Para alojamiento
• CloudFront: para CDN
• Ruta 53: para DNS
• Administrador de certificados: para certificado HTTPS
• Puerta de enlace API: para API
• Lambda: para guardar datos del formulario de contacto
• DynamoDB: para base de datos
• SNS: para enviar un correo electrónico al autor cuando alguien envía un mensaje de contacto

Configuración del nombre de dominio Route53

Para esta demostración, estoy usando mi nombre de dominio Namecheap enrutado a Amazon Route53 para poder usar la certificación HTTPS sin problemas adicionales. Puede seguir este enlace para configurar la redirección de Namecheap a Route53 y ACM para el certificado SSL.

Para utilizar un certificado ACM con Amazon CloudFront, debe solicitar o importar el certificado en la región Este de EE. UU. (Norte de Virginia).

Nota: Asegúrese de que el nombre de su depósito S3 coincida con su nombre de dominio. Por ejemplo, mi nombre de dominio es newarc.io , así que configuré el nombre de mi depósito para que sea newarc.io .

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

Despliegue

Antes de implementar, cree config.dev.json a partir del archivo sample.config.json y establezca los valores.

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

Ejecute el comando sls deploy para implementar los cambios en AWS.

Publicación del contenido del sitio

Para impulsar los cambios específicos del sitio (Html, CSS, JS, etc.)

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

Invalidación de caché de CloudFront

Después de implementar el servicio, si simplemente está implementando el cambio en su sitio. La distribución de CloudFront tardará algún tiempo en actualizar el contenido almacenado en caché. Para actualizar CloudFront inmediatamente, deberá invalidate el caché.

Vaya a su consola de CloudFront, copie el ID de distribución creado a través de este servicio y ejecute el siguiente comando. Tenga en cuenta que el siguiente comando borrará todo el caché. También puede borrar los archivos selectivos usando --paths .

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

Para obtener más detalles, consulte la documentación aquí: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Suscripción de correo electrónico SNS

Cuando alguien completa el formulario de contacto en la interfaz de usuario. La API guardará los datos en DynamoDB y también publicará un mensaje en el tema SNS configurado. SNS Topic también tiene una suscripción de correo electrónico, donde puede colocar el correo electrónico donde desea recibir los detalles del mensaje.

Después de implementar el servicio, recibirá el correo electrónico de confirmación de AWS para activar su suscripción. Siga las instrucciones del correo electrónico.

Para obtener más detalles, consulte la documentación aquí: https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

Limpiar

Primero borre el contenido del depósito del sitio.

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

Eliminar la pila de aplicaciones

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

Licencia

Licencia MIT

Copyright (c) 2021 Dhaval Nagar