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.
