Construcción de un sitio serverless simple con Route 53, API Gateway, Lambda y S3

En este tutorial se creará un sitio serverless que consume una función Lambda sencilla.

Para ello se utilizarán las siguientes tecnologías:

  • AWS S3: Almacenamiento en la nube en el que alojaremos nuestro sitio estático.

  • AWS Route 53: DNS que resolverá el dominio personalizado que utilizaremos en nuestro sitio.

  • API Gateway: Servicio que actuará como “puerta delantera” para que las aplicaciones obtengan acceso a datos, lógica de negocio o funcionalidades desde sus servicios backend, en este caso, código ejecutado en AWS Lambda.

  • AWS Lambda: Servicio que permite ejecutar código sin aprovisionar ni administrar servidores. Solo pagará por el tiempo informático que consuma. No se cobra nada cuando el código no se está ejecutando.

1. Creación del bucket que almacenará nuestra página web

Abrimos la consola de S3.

Creamos un nuevo bucket, nos aseguramos de que el nombre sea válido (que no exista en todo el universo de S3, un bucket con ese nombre).

Nos aseguramos de remover las opciones que bloqueen la posibilidad de hacer el bucket público desmarcando estas restricciones.

Una vez creado nuestro bucket hacemos click sobre su nombre para acceder a sus configuraciones.

Nos dirigimos a la sección Static website hosting.

Configuramos como página principal index.html y como página de error error.html.

2. Creación nuestra función lambda

Abrimos la consola de AWS Lambda.

Creamos una nueva función con la opción Author from scratch.

Colocamos un nombre a la función y escogemos Python como lenguaje de la función, en el momento del tutorial, está disponible Python 3.6 por lo que escogeré este.

Incrustamos el código que devolverá la función, en este caso simplemente devuelve mi nombre.

Con esto finalizamos la creación de nuestra función.

3. Creación nuestro API Gateway

Dentro de la barra izquierda en el segmento Add triggers, encontraremos API Gateway, lo seleccionamos.

Seleccionamos el bloque recién creado.

En la parte inferior veremos que tenemos que configurar el API Gateway. Seleccionamos Create a new API, en este caso para fines de prueba la seguridad seleccionada sera Open, colocamos el nombre de nuestro API y en Deployment stage colocamos prod, que sería la abreviatura de producción.

Para el resto de configuraciones dejamos los valores por default.

Guardamos los cambios en nuestra función.

Al seleccionar el API y dirigirnos a la parte inferior veremos el API endpoint.

Siempre en la parte inferior hacemos click sobre el nombre de nuestro API Gateway, para poder llegar a sus configuraciones.

Seleccionamos el método ANY.

Eliminamos el método ANY.

Creamos un nuevo método.

El nuevo método será GET.

En las configuraciones del nuevo método, seleccionaremos Integration type: Lambda funcion, Use Lambda Proxy Integration: check. Nuestra Lambda region y el nombre de nuestra Lambda function.

Nos preguntará si queremos dar permisos al API para acceder a nuestra función lambda, seleccionamos que sí estamos de acuerdo.

Vamos nuevamente a acciones y seleccionamos Deploy API.

En Depoyment stage: prod nuevamente y colocamos una descripción relacionada con nuestro deploy.

Al finalizar nos indica un Invoke URL, que será utilizado para invocar la función.

Si colocamos el URL en un navegador estaremos invocando el método GET de nuestro API Gateway y se nos mostrará el resultado de la función, que era mi nombre.

Vamos al bucket que creamos index.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<script>
function myFunction() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("my-demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "YOUR-API-GATEWAY-LINK-HERE", true);
xhttp.send();
}
</script>
</head>
<body>
<div align="center">
<br>
<br>
<br>
<br>
<h1>Hola <span id="my-demo">lectores</span></h1>
<button onclick="myFunction()">Haz click</button>
</div>
</body>
</html>

Es importante que en index.html, reemplacemos YOUR-API-GATEWAY-LINK-HERE, por el enlace con el que invocamos a nuestra función lambda.

Y error.html.

1
2
3
4
5
6
<html>
<head></head>
<body>
<h1>¡Hemos tenido un problema!</h1>
</body>
</html>

Estos archivos se cargan con la opción Upload.

Cargamos directamente, sin modificar ninguna configuración, dejamos todos los valores por default.

Seleccionamos ambos archivos y los hacemos públicos.

Confirmamos que queremos hacer los archivos públicos.

Accedemos al endpoint de nuestra página.

Se nos mostrará el saludo por defecto.

Luego de hacer click en el botón se cambiará el saludo con mi nombre, que es el valor que devuelve nuestra función Lambda.

4. Personalizar el dominio de nuestra página

Para personalizar el dominio de nuestra página debemos ir a la consola de Route 53.

En Route 53 podemos comprar un dominio o transferir un dominio.

Vamos a la sección Registered domains y podremos ver nuestro dominio.

Vamos a la sección Hosted zones y hacemos click en el nombre de nuestro dominio para acceder a su configuración.

Hacemos click en Create Record Set para asociar nuestro nombre de dominio a con nuestro sitio web.

Creamos un record set de tipo A, escogemos la opción Alias y configuramos como Alias Target el nombre de nuestro S3 bucket.

Procedemos a crear el Record Set.

Con esto tenemos creado nuestro Record Set.

Si ingresamos nuestro dominio en el navegador se desplegará nuestra página.

Hacemos click y vemos que la función opera correctamente.

Con esto hemos llegado al final de nuestro tutorial.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×