AWS Portfolio Example

Repo Demo
Blog / AWS Portfolio Example /
AWS Portfolio Example

Por: Leonardo Narváez.

En: 20 de Diciembre de 2023 a las 17:57
AWS AWS APIGateway AWS Cloud9 AWS CloudFront AWS Lambda AWS S3 AWS Serverless AWS SNS Github Portfolio

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: