Portfolio con CloudFront y DynamoDB

Repo Demo
Blog / Portfolio con CloudFront y Dy… /
Portfolio con CloudFront y DynamoDB

Por: Leonardo Narváez.

En: 22 de Diciembre de 2023 a las 17:53
AWS AWS APIGateway AWS Cloud AWS Cloud9 AWS CloudFront AWS DynamoDB AWS Lambda AWS S3 AWS Serverless AWS SNS Github Javascript Portfolio

A partir de nuestro proyecto anterior: AWS Portfolio Example

Vamos agregar un Cloudfront para reducir la latencia de nuestro portfolio y ademas configuraremos una DynamoDB para guardar los datos que nos envien desde el formulario de contacto.


AWS CloudFront

  • Vamos CloudFront dentro de AWS Console y creamos una nueva distribución
  • En el origen seleccionamos nuestra S3

  • Desactivaremos el WAF (Web Application Firewall)

  • Una vez creada, editamos la configuraciones para definir la ruta de nuestro index.html

  • Y en General podemos ver la url, con la cual tenemos acceso a la web desde el CloudFront

  • Y el proyecto ya estaría desplegado.

Sí hacemos una comparación en PageSpeed entre la web desplegada directamente desde el S3 y el CloudFront, podremos ver un cambio significativo en los tiempos de carga y la eficiencia general de nuestra web, recordando que nuestra S3 se encuentra en la región de Virginia por ende tendrá latencia hasta nuestra ubicación y con el CloudFront se consigue reducir esa latencia y hacer que nuestra web se vea cargue mucho más rápido.


AWS DynamoDB

  • Creamos una AWS DynamoDB


AWS Lambda

Si queremos guardar los datos dentro de nuestra DynamoDB, tenemos que actualizar nuestra Lambda, ya que aquí es donde recogemos los datos que nos envían desde el formulario.

  • Importamos la DynamoDB
const dynamodb = new AWS.DynamoDB(); 
  • Llamamos a nuestra DynamoDB y le configuramos los datos que queremos que se almacenen
 const dynamodbParams = {
            TableName: '<tuDynamoDB>',
            Item: {
                'id': { S: Date.now().toString() },
                'name': { S: input.name },
                'email': { S: input.email },
                'phoneNumber': { S: input.phoneNumber },
                'message': { S: input.message }
            }
        };
 const dynamodbData = await dynamodb.putItem(dynamodbParams).promise();
 console.log('Item added to DynamoDB:', dynamodbData);
  • El código de la Lambda nos debería quedar así, (recuerda cambiar los datos correspondientes en <arn:Topic> y <tuDynamoDB>):
const AWS = require('aws-sdk');
const sns = new AWS.SNS();
const dynamodb = new AWS.DynamoDB();
 
exports.handler = async (event) => {
    var input_data = JSON.stringify(event, null, 4);
    var input = JSON.parse(input_data)
    var params = {
        Message: 'Nombre: ' + input.name+'\n\nEmail: '+ input.email +'\n\nTelefono: '+ input.phoneNumber+ '\n\n' +input.message + '\n\n--Fin del mensaje--',
        Subject: "Contacto de Portafolio.",
        TopicArn: "<arn:Topic>"
    };
    try {
        const data = await sns.publish(params).promise();
        console.log(`Message sent to the topic ${params.TopicArn}`);
        console.log(`Message ID: ${data.MessageId}`);
        
        
        const dynamodbParams = {
            TableName: '<tuDynamoDB>',
            Item: {
                'id': { S: Date.now().toString() },
                'name': { S: input.name },
                'email': { S: input.email },
                'phoneNumber': { S: input.phoneNumber },
                'message': { S: input.message }
            }
        };
 
        const dynamodbData = await dynamodb.putItem(dynamodbParams).promise();
        console.log('Item added to DynamoDB:', dynamodbData);
    } catch (err) {
        console.error(err, err.stack);
    }
};
  • Desplegamos la Lambda
  • Agregamos los permisos correspondientes

Funcionamiento:

Formulario de contacto:

DynamoDB:

  • Ahora si vemos los elementos de nuestra tabla veremos que se crearon los registros, con los datos enviados desde el formulario.

Y así tendremos implementado AWS CloudFront y AWS DynamoDB en nuestro portfolio, para tener menor tiempo de carga y mas control sobre los contactos que nos escriben desde nuestro formulario, espero que este proyecto te ayude a potenciar tu portfolio.

Compartir:

Ver más

¿Cómo púbicar una página web en AWS con Docker?
107 AWS
¿Cómo crear una web estática usando AWS S3 y Cloud9?
105 AWS
¿Cómo crear una Amazon Elastic Compute Cloud (EC2) en Amazon?
83 AWS
AWS Portfolio Example
170 AWS

author-portfolio-con-cloudfront-y-dynamodb
Leonardo Narváez

Desarrollador de software apasionado y creativo con experiencia en diversos lenguajes y tecnologías. Especializado en la creación de soluciones innovadoras y eficientes, como aplicaciones web y móviles, sitios web interactivos y soluciones personalizadas.

Artículos