AWS Portfolio
En este tutorial, exploraremos la implementación de un sitio web estático para nuestro portafolio en AWS, aprovechando las capacidades de Cloud9, Lambda, API Gateway y S3. Esta práctica asegura una implementación fluida y eficiente de nuestro portafolio en el entorno de AWS. ¡Vamos a comenzar!
AWS Cloud9
Primero crearemos un entorno con Cloud9.
Abrimos Cloud9 ID dentro de el entorno vamos a clonar nuestro repositorio:
git clone https://github.com/leonxrdon/AWS-Portfolio.git
Ahora:
cd AWS-Portfolio
AWS S3
Ahora crearemos una S3 para mostrar nuestra Web Estática.
- La S3 debe tener acceso público para que funcione.
- Agregamos los permisos correspondientes:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::aws-portfolio-leo/*"
}
]
}
- Ahora copiaremos los archivos de Cloud9 a S3 con el comando:
aws s3 cp ./ s3://<nombre-del-bucket> --recursive
- Y vemos que los archivos se carguen correctamente en el bucket:
- Ahora desde el bucket, en la seccion de Propiedades, habilitamos el despliegue de web estáticas, te debería quedar así:
- Y para ver nuestro proyecto desde internet entramos en el enlace:
- Y ya hemos desplegado nuestro Portfolio, usando Cloud9 y S3
AWS Lambda
Ahora para agregar funcionalidad al formulario de contacto, vamos a utilizar una API Gateway con Lambda y configuraremos una SNS para que el envío del formulario nos llegue a nuestro correo.
- Primero creamos la Lambda en Node.js 16.x:
AWS API Gateway
- Después crearemos la API Gateway de tipo REST API:
- Creamos el recurso /contact el método que vamos a usar que en este caso sera POST, deberá quedarte algo asi:
- Para crear el método POST, debemos seleccionar Lambda y marcar la Lambda que creamos previamente:
- Una vez creado habilitaremos los CORS, dando clic sobre el recurso /contact y en la parte de la derecha damos clic en en Habilitar CORS,
- Ahora damos en Desplegar y creamos una nueva etapa:
- Una vez que tengamos guardado, copiaremos el link de invocación de nuestra API y lo colocamos en nuestro código HTML, así:
- El diagrama de nuestra lambda se vera así (Perdón escribí mal lambda jeje):
AWS Lambda
- Agregamos el código que controlará nuestra lambda:
const AWS = require('aws-sdk');
const sns = new AWS.SNS();
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}`);
} catch (err) {
console.error(err, err.stack);
}
};
AWS SNS
Solo nos faltaría configurar la SNS para recibir mensajes en nuestro email.
- Creamos un nuevo "Topic" en SNS y una suscripción con el email donde queremos recibir los mensajes desde nuestro portfolio.
Después de confirmar la subscripción, copiamos el "arn" de nuestra SNS y la colocamos dentro de la lambda.
Ahora debería funcionar correctamente, si vamos al formulario de contacto y enviamos los datos del formulario, toda nuestra estructura funcionara correctamente.
Si no funciona correctamente, no te olvides en revisar los log dentro de CloudWatch.
Funcionamiento:
Formulario:
Email:
Espero este tutorial te ayude para que despliegues tu portfolio con un formulario de contacto funcional usando AWS lambda, AWS cloud9, AWS s3 AWS SNS, AWS API Gateway. Este conjunto de herramientas de AWS no solo simplifican el despliegue, sino también elevará la funcionalidad de tu portafolio.
Espero que esta experiencia te brinde una base sólida y eficiente para destacar tu presencia en línea. ¡Éxito en tu proyecto!
