En este tutorial configuraremos un web server utilizando EC2, probablemente una de las cosas menos complejas que podemos hacer en AWS, básicamente levantaremos una máquina virtual en EC2 para montar una página web.

1. Crear la instancia de EC2

Lo primero es buscar en la consola de AWS:

El servicio EC2:

Una vez dentro de la consola de EC2, seleccionamos la opción Launch Instance:

Escogemos alguna imagen AMI que sea Free tier elegible, de tal manera que podamos levantar la instancia sin pagar nada.

El segundo paso es elegir el tipo de instancia, buscamos nuevamente que sea Free tier elegible, esta será una instancia con recursos muy básicos, pero útil para nuestros fines.

Configuramos los detalles de la instancia, es importante que al ser creada la instancia se le asigne una IP pública, para ello verificamos que posea la siguiente configuración: Auto-assign Public IP: Use subnet setting (Enable).

Posteriormente vienen las configuraciones de almacenamiento, acá podemos agregar más discos duros EBS si quisieramos, pero en este caso dejaremos los valores por default.

Luego podemos agregar etiquetas, que básicamente son meta-data de la instancia, esto es especialmente útil cuando tenemos muchas instancias y necesitamos información sobre qué aloja cada una.

Creamos un nuevo Security Group para nuestra instancia asegurándonos de que en las reglas permita solicitudes hacia el puerto 22 y el puerto 80 desde cualquier origen.

Creamos un nuevo key pair para nuestra instancia, estas son las llaves con las que accederemos a través de SSH a nuestra instancia de EC2.

Posteriormente escogemos la opción Launch instance y luego de algunos minutos la instancia estará corriendo y lista para ser utilizada. en el campo IPv4 Public IP, podremos ver la IP pública de la instancia, que posteriormente será utilizada para conectarse a la misma.

Si seleccionamos nuestra instancia y hacemos click en Connect, veremos el siguiente recuadro con las opciones e instrucciones para conectarnos a la instancia.

Nosotros nos conectaremos utilizando A standalone SSH client.

2.1. Conectarse a la instancia vía SSH (Windows)

Para conectarse a la instancia EC2 vía SSH en Windows es necesario descargar putty, una herramienta que puede ser utilizada como cliente SSH y cuenta con algunas otras funcionalidades.

Una vez descargado procedemos a ejecutar el asistente de instalación.

Una vez instalado, necesitamos convertir nuestro archivo .PEM a un archivo .PPK, para ello procedemos a abrir PuTTY Key Generator.

Haciendo click en load, podemos cargar nuestra llave .PEM.

Veremos un mensaje de que la llave se importó correctamente.

Guardamos la llave importada sin passphrase.

Nos aseguramos de que el archivo se guarde con la extensión .PPK.

Al finalizar procedemos a abrir PuTTY. Ingresamos la IP pública de nuestra instancia de EC2.

Desplegamos la opción Connection, posteriormente la opción SSH y por último vamos a Auth, adjuntaremos el archivo .PKK generado.

Volvemos a la pestaña de sesión y guardamos la sesión con un nombre representativo, en este caso MiWebServer.

Posteriormente la aplicación nos preguntará si confiamos en este host para agregar la llave a la cahe de PuTTY. Respondemos que sí, pues es nuestra instancia de EC2.

Con esto estaremos conectados con nuestra instancia EC2 vía SSH desde Windows.

Luego de esto ingresamos con el usuario ec2-user, no nos pedirá contraseña pues estamos usando nuestro archivo .PPK para autenticarnos.

2.2. Conectarse a la instancia vía SSH (Linux)

Para conectarse a la instancia EC2 vía SSH en Linux, es necesario descargar nuestro archivo .PEM

Nos movemos a la carpeta en la que se encuentra el archivo:

1

cd /home/erick/

Asignamos los permisos adecuados:

1

chmod 400 MiNuevaKeyPair.pem

Y accedemos remotamente vía SSH:

1

ssh -i "MiNuevaKeyPair.pem" ec2-user@ec2-18-206-137-162.compute-1.amazonaws.com

Con esto habremos ingresado a nuestra instancia:

3. Iniciar apache server

Lo siguiente será iniciar apache server, en nuestro caso la instancia de EC2 que escogimos ya lo tenía instalado, si la instancia no lo tuviera tendríamos que instalarlo. Para arrancarlo ejecutamos el siguiente comando:

1

sudo service httpd start

Luego validamos que el servicio esté corriendo ejecutando:

1

sudo service httpd status

4. Publicar nuestra página

Creamos un archivo index.html en la carpeta /var/www/html/index.html

Para ello ejecutamos el comando:

1

nano /var/www/html/index.html

Posteriormente introducimos el código html de nuestra página.

Salimos del editor nano con la combinación de teclas Ctrl + x, al salir nos preguntará si queremos guardar nuestros cambios, respondemos que sí.

Por último si accedemos a la IP pública de nuestro servidor desde un navegador veremos la página recién creada.

Con esto llegamos al final de nuestro tutorial.

En este tutorial crearemos un Alexa Skill, pero nuestro principal objetivo es explorar estas herramientas de AWS y familiarizarnos con su uso para poder elaboraro soluciones más complejas y determinar cómo podemos usarlas para nuestros fines.

Antes de comenzar vale la pena hacer una aclaración sobre la diferencia entre Alexa y Echo:

• Alexa es el servicio de voz ubicado en la nube de Amazon disponible en los dispositivos de Amazon y dispositivos tercios con Alexa integrada.

• Amazon Echo es un altavoz inteligente, es un dispositivo de hardware producido por Amazon.

Sucede a menudo que los usuarios utilizan el término alexa para referirse indiscriminadamente a ambas cosas, pero lo cierto es que tecnicamente son diferentes.

A lo anterior debemos agregar que Alexa está presente en muchos dispositivos de Amazon.

Luego de la aclaración anterior comenzaremos con el tutorial.

1. Crear un S3 bucket público

• Ingresamos a la consola de AWS

• Buscamos el servicio S3

• Seleccionamos la opción create bucket

• Asignamos un nombre válido para el nuevo bucket, un nombre que no haya sido usado para ningun otro bucket (recibiremos un mensaje de error si el nombre no fuera válido).

• Seleccionamos la opción create

Posteriormente hacemos todo el contenido del bucket público, para ello seleccionamos nuestro bucket creado y hacemos click en el boton Edit public access settings

Validamos que todas las opciones no esten seleccionadas y hacemos click en save.

Escribimos el texto solicitado y hacemos click en confirm.

Entramos al bucket cerado, nos movemos a la pesataña properties y en la opción Bucket Policy, configuramos la siguiente política:

1
2
3
4
5
6
7
8
9
10
11
12

{
  "Version": "2012-10-17",
  "Statement": [
    { 
      "Sid": "PublicReadGetObject", 
      "Effect": "Allow", 
      "Principal": "*", 
      "Action": "s3:GetObject", 
      "Resource": "ARN here/*" 
    } 
  ] 
}

Es impotante cambiar la parte de “ARN here” por el ARN de nuestro bucket, posteriormente hacemos click en save y nuestra política será aplicada:

2. Explorar Amazon Polly

En este segmento del tutorial podremos explorar el servicio de Amazon Polly a nivel general, lo haremos creando un audio a partir de cierto texto, este audio será almacenado en S3, lo primero es buscar el servicio Amazon Polly :

Una vez dentro de la consola de Amazon Polly, hacemos click en Get Started:

Posteriormente nos encontraremos con un panel en el que podemos escribir texto que será leído según las configuraciones que hagamos, podemos por ejemplo configurar el idioma del texto y la persona que lo leerá, es decir, si esta persona leerá con un tono de voz masculino o femenino y el tono de voz de la persona en específico, incluso tenemos para el mismo idioma diferentes acentos, por ejemplo, yo incrusté cierto texto que será leído en español mexicano, con una voz femenina perteneciente a Mia.

Luego vamos a hacer click en synthesize to S3, para poder exportar el audio correspondiente a este texto en nuestro bucket de S3.

Al hacerlo nos desplegará una ventana en la que debemos ingresar el nombre de nuestro bucket.

Seleccionamos Synthesize y se creará una tarea para sintetizar el audio correspondiente al texto ingresado.

En la pestaña de S3 synthesis tasks podemos ver el estado de esta tarea para determinar si ya fue completada o no.

Al completar la tarea, tendremos este audio en el bucket que indicamos.

3. Crear una función Lambda

Buscamos el servicio AWS Lambda en la consola de aws.

Una vez en la consola de AWS Lambda, procedemos a crear una nueva función, es importante crear esta función en una region en donde Alexa trigger esté habilitado, yo lo haré en US East (N. Virginia). Esto puede verse en la esquina superior derecha de nuestra consola.

Luego de hacer click en Create function, encontraremos en el panel 3 opciones, Author from scratch, Use a blueprint y Browse serverless app repository, nosotros seleccionaremos esta última y buscaremos el repositorio alexa-skills-kit-nodejs-factskill.

Escogemos el respositorio y dejamos todas sus configuraciones con los valores por defecto, posteriormente hacemos click en deploy y esperamos hasta que termine el proceso de deploy de nuestra función:

Ingresamos a la función y vemos que ya cuenta con un alexa trigger, esto porque hicimos el deploy de la función en una región que lo soporta, en este caso N. Virginia.

En el código autogenerado por la función veremos que hay un set de oraciones aleatoreas, agregaré mi nombre en el listado, luego procedí a hacer click en Save, para guardar los cambios en la función.

Vamos a https://developer.amazon.com/ e ingresamos a Amazon Alexa:

Una vez registrados y dentro de nuestra cuenta, procedemos a buscar el Alexa Skills kit:

En la consola de Alexa, escogemos la opción Create Skill.

Luego de crearla nos da la opción de escoger un template, escogemos Fact Skill y continuamos:

Luego estaremos en el Alexa Development Console:

Vamos a la sección de invocations, asignamos un nombre a nuestra invocation, en este caso coloque el nombre Cloud Facts y seleccionamos la opción save model:

Regresamos a la consola de Lambda, a la función anteriormente creada e identificamos y copiamos el ARN de nuestra función:

Vamos de nuevo a Alexa Developer Console, a la sección Endpoint y configuramos el ARN de nuestra función, de tal manera que nuestro Alexa Skill apuntará a la fución Lambda anteriormente creada. Luego de agregar el ARN, seleccionamos Save Endpoints.

Vamos a la sección GetNewFactIntent, incresamos un nuevo fact, a cloud fact en este caso, luego agregamos este fact y seleccionamos Save Model para guardar el modelo. Y luego Build Model para construir nuestro modelo. Al finalizar el Build recibiremos una notificación.

Luego de terminar el Build, vamos a la sección Test, cambiamos el modo a Development e ingresamos la instrucción open cloud facts. Luego vamos a obtejer un fact de la función asociada. En este caso recibí el siguiente: Here’s your fact: A year on Mercury is just 88 days long. Con lo anterior tenemos que nuestra Alexa Skill funciona y que nuestra función lambda también lo hace.

Regresamos a la consola de Lambda y seleccionamos todos los facts del arreglo.

Los eliminamos, dejamos solamente nuestro nombre y guardamos los cambios haciendo click en el boton Save.

Vamos nuevamente a Alexa Developer Console e ingresamso open cloud facts.

Luego de ingresarlo el único resultado posible es nuestro nombre, pues eliminamos el resto de facts.

Ahora en lugar de usar mi nombre como Fact, usaremos el archio de audio generado anteriormente con Polly, para ello vamos a nuestro bucket, a nuestro archivo de audio y en sus propiedades de la pestaña Overview encontraremos el URL del file.

Vamos a la consola de Lambda y modificamos el fact, en lugar de ser nuestro nombre introducimos el URL de nuestro audio con el siguiente formato para indicar que se trata de un audio

1

'<audio src=\"https://s3.amazonaws.com/ericknavarropolly2019/c4c0a83c-3718-49b4-bb72-0ee529ddf95b.mp3\"/>'

Y hacemos click en Save.

Antes de ejecutar nuestro Skill, es importante que nos aseguremos de que el file en el bucket es público, para ello vamos a la consola de S3, seleccionamos nuestro bucket, seleccionamos nuestro archivo y seleccionamos la opción Make Public.

Posteriormente vamos a nuestro Skill, ingresamos la instrucción open cloud facts y obtendremos el audio configurado.

Con esto llegamos al final del tutorial, espero que esta introducción a Alexa Skills, les motive a seguir explorando estas herramientas de AWS.

En este tutorial se creará un CDN utilizando AWS CloudFront.

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

• AWS CloudFront: Servicio CDN con el que serviremos nuestro contenido, es decir, nuestra página no será servida directamente de S3.

• AWS S3: Almacenamiento en la nube en el que alojaremos nuestros recursos.

Lo primero es buscar el servicio S3 en la consola de AWS, una vez en la consola de S3, procedemos a crear un nuevo bucket, haciendo click en la opción Create Bucket.

En el asistente de creación del bucket:

• Name and Region: Indicamos el nombre del bucket, en mi caso es 20190416-sydney-cloudfront-origin, este nombre debe ser único en todo el universo de buckets de AWS, puede que el nombre del bucket ya exista, si es ese el caso recibiremos un mensaje de error y tendremos que modificar el nombre del bucket, dejamos los valores por defecto para el resto de opciones. Además escogemos una región que geográficamente esté muy lejos de nosotros, en mi caso la región más alejada es la de Asia Pacific (Sydney).

• Configure options: Dejamos los valores por defecto para estas opciones.

• Set permissions: Nos aseguramos que las restricciones para asignar permisos publicos no estén chequeadas, estas opciones aparecen en la siguiente imagen encerradas en dos recuadros amarillos, podemos dejar las opciones de configuración por defecto.

• Review: Validamos que toda la configuración realizada corresponda con lo que necesitamos y creamos el bucket.

Posteriormente procedemos a cargar una imagen en alta definición, haciendo click en el boton Upload, en mi caso cargué una fotografía de 4.3 MB.

Dentro del asistente nos aseguramos de hacer público el archivo cargado.

Continuamos con las siguientes fases del asistente dejando el resto de las configuraciones con sus valores por defecto.

Hacemos click en el nombre de la imagen recién cargada y en el Overview del objeto veremos la URL con la que podemos acceder a él.

Copiamos la URL y la pegamos en el navegador, veremos cómo la imagen carga lentamente, esto debido a que físicamente la región de Sydney está muy lejos de mí.

Procedemos a crear nuestro CDN, para ello buscamos el servicio CloudFront en la consola de AWS, una vez en la consola de CloudFront, hacemos click en el boton Create Distribution.

En la sección Web, hacemos click en el botón Get Started.

Configuramos como Origen el bucket que recientemente creamos en la región de Sydney.

Luego de seleccionar nuestro bucket para la opción Origin Domain Name, se asigna automáticamente un Origin ID, este es un nombre que nos permitirá identificar el origen dentro de la distribución.

Seleccionamos la opción Restrict Bucket Access: Yes, esto hará que nuestro bucket que inicialmente era público deje de serlo para que podamos acceder a los archivos del bucket solamente a través de nuestro CDN, de nuestra distribución de CloudFront.

Seleccionamos Origin Access Identity: Create a New Identity, esto creará un identificador que se usará para crear una política en S3 que permita a nuestro CDN acceder a los recursos de S3, que ya no serán públicos debido a la configuración anterior.

Seleccionamos Grant Read Permissions on Bucket: Yes, Update Bucket Policy, esta opción actualizará la política de nuestro bucket y la cambiará para que deje de ser público y comience a ser solamente accesible para nuestro CDN.

En la configuración Viewer Protocol Policy, seleccionamos la opción Redirect HTTP to HTTPS, pues este el principal objetivo en este tutorial, servir la página con a través de HTTPS.

El resto de configuraciones las dejamos con sus valores por defecto y procedemos a hacer click en Create Distribution.

Al finalizar la creación, el status será Deployed y el state será Enabled.

Vamos a S3 y en las propiedades de la imagen cargada, en la sección Permissions, validamos que la imagen sea pública.

Vamos a CloudFront y hacemos click en el identificador de nuestro recién creado CDN, con esto accederemos a sus propiedades, una vez dentro copiamos el dominio del CDN.

Vamos un navegador e ingresamos el nombre dominio de la distribución recién creada, seguida de slash y el nombre de nuestra imagen. Veremos que nuestra imagen cargará lentamente la primera vez, pero si hacemos muchas veces Ctrl+F5. Veremos que solo la primera vez fue lenta, todas las demás cargo más rápido, esto porque la primera vez que se carga, la imagen queda guardada en la cache de nuestra distribución, en un Edge Location que físicamente está cerca de nosotros, mucho más cerca que la región de nuestro bucket (Sydney). Esta es una de las utilidades más importantes de CloudFront.

Por otro lado si cargamos nuestra imagen consultando directamente el bucket de S3, veremos que nuestra imagen cargará lentamente la primera vez, pero si hacemos muchas veces Ctrl+F5. Veremos que todas las veces la imagen carga lentamente, esto porque con cada solicitud, vamos a traer la imagen hasta la región de Sydney, que físicamente está lejos de nosotros.

Con esto llegamos al fin de nuestro tutorial, en el que claramente pudimos apreciar como el uso de una distribución o CDN tiene un impacto positivo en el performance cuando nuestra página o recursos web son consumidos desde muchos lugares diferentes a lo largo y ancho del mundo.

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.

En este tutorial 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.

• AWS Certificate Manager: Servicio con el que obtendremos el certificado SSL/TLS público que será utilizado para servir el sitio a través de HTTPS.

• AWS CloudFront: Servicio CDN con el que serviremos nuestro contenido, es decir, nuestra página no será servida directamente de S3.

Para desarrollar este tutorial es necesario que ya hayan completado los siguientes tutoriales:

• Publicar un sitio estático en Amazon S3
• Agregar un dominio personalizado a tu sitio utilizando Amazon Route 53

O bien, que tengas un sitio estático publicado en S3 y un dominio registrado en Route 53.

1. Obtener el certificado SSL/TLS público que será utilizado para servir el sitio a través de HTTPS.

Buscamos el servicio AWS Certificate Manager en nuestra consola.

Una vez dentro seleccionamos Get Started para obtener nuestro primer certificado.

Pedimos un certificado publico para nuestro sitio, estos son gratuitos en AWS.

Ingresamos los records para nuestro dominio.

Seleccionamos DNS validation.

Confirmamos nuestros datos y hacemos la solicitud.

Luego nos aparecen pendientes de validación ambos records.

Procedemos a crear los records que nos solicitan en Route 53 para validar que somos dueños del dominio en cuestión.

Creamos el record.

Luego de crearlo tenemos que esperar algun tiempo para que la validación se haga efectiva.

Al finalizar tendremos ambos records validados y nuestro certificado podrá ser utilizado.

2. Configurar nuestro CDN en AWS CloudFront

En la consola de AWS buscamos el servicio Cloudfront. Una vez dentro seleccionamos Create Distribution para crear nuestro primer CDN.

Seleccionamos Get Started en el segmento de Web distribution, pues es una distribución de este tipo la que queremos crear.

Ingresamos el nombre en Origin Domain Name y automáticamente se asignará un Origin ID, podemos dejar ese que se asigne, este es un nombre que nos permitira identificar el origen dentro de la distribución.

Seleccionamos la opción Restrict Bucket Access: Yes, esto hará que nuestro bucket que inicialmente era público deje de serlo para que podamos acceder a los archivos del bucket solamente a través de nuestro CDN, de nuestra distribución de CloudFront.

Seleccionamos Origin Access Identity: Create a New Identity, esto creará un identificador que se usará para crear una política en S3 que permita a nuestro CDN acceder a los recursos de S3, que ya no serán públicos debido a la configuración anterior.

Seleccionamos Grant Read Permissions on Bucket: Yes, Update Bucket Policy, esta opción actualizará la política de nuestro bucket y la cambiará para que deje de ser público y comience a ser solamente accesible para nuestro CDN.

En la configuración Viewer Protocol Policy, seleccionamos la opción Redirect HTTP to HTTPS, pues este el principal objetivo en este tutorial, servir la página con a través de HTTPS.

En la configuración Compress Objects Automatically seleccionamos la opción Yes.

En la sección Distribution Settings, hacemos lo siguiente:

Configuramos nuestros nombres de dominio en la opción Alternate Domain Names (En este caso agregaré ericknavarro.io, y adicionalmente www.ericknavarro.io, para que también funcione con esta dirección).

Configuramos el certificado SSL generado anteriormente seleccionando Custom SSL Certificate (example.com), al entrar en la caja de texto nos lo desplegará automáticamente y podremos seleccionarlo:

Configuramos en Default Root Object, nuestra página principal, en este caso index.html.

El resto de configuraciones las dejamos con sus valores por defecto y procedemos a hacer click en Create Distribution.

Al finalizar la creación, el status será Deployed y el state será Enabled. Al visitar el nombre de dominio, que en este caso es:

1

d22ckq6fuymrpu.cloudfront.net

Veremos nuestra página, que está siendo servida a través de HTTPS:

3. Apuntar nuestro dominio hacia el CDN creado

Lo primero es buscar el servicio Route 53 en la consola de AWS.

Posteriormente vamos a hosted zones, encontraremos una hosted zone para nuestro dominio, ingresamos a él haciendo click en su identificador.

Una vez dentro encontraremos la configuración actual, en mi caso tenía un record set que apuntaba directamente a S3, eliminé ese record set y procedí a crear uno nuevo, para ello hacemos click en Create Record Set.

Dentro del wizard, configuramos un Record Set de tipo A, que sea un alias cuyo target sea nuestro CDN de CloudFront, si entramos en este campo, nuestro CDN debería aparecer en el listado.

Hacemos click en Create y listo, tenemos creado el primer record set.

Es necesario que creemos 3 record sets más, hasta completar los siguientes 4 recordsets, los A para IPv4 y los AAAA para IPv6, en mi caso estos record sets quedarán de la siguiente manera:

1
2
3
4
5

Record   Domain                Alias Target
A      | ericknavarro.io     | d22ckq6fuymrpu.cloudfront.net
AAAA   | ericknavarro.io     | d22ckq6fuymrpu.cloudfront.net
A      | www.ericknavarro.io | d22ckq6fuymrpu.cloudfront.net
AAAA   | www.ericknavarro.io | d22ckq6fuymrpu.cloudfront.net

Al finalizar tendremos algo como lo siguiente:

Si consultamos nuevamente nuestro dominio ericknavarro.io, podremos observar que la página ya está siendo servida a través de HTTPS:

En este momento hemos alcanzado nuestro objetivo, que era servir un sitio estático a través de HTTPS utilizando S3, Route 53, Certificate Manager y CloudFront.

Algunas anotaciones sobre lo configurado:

• Si por algún motivo necesitaramos cambiar el contenido de la página, además de actualizar los archivos en S3, deberíamos hacer un invalidate en nuestra distribución, pues la distribución guarda en cache la información de la página y lo que nos muestra es siempre información que tiene cacheada, esta información se cachea la primera vez que accedemos a la página. Hacer un invalidate, se puede traducir a borrar la cache.

• Si vamos a nuestro bucket veremos que la política ha cambiado y el único recurso con permisos para acceder al bucket es nuestra distribución, lo que significa que el bucket ya no es público y no podemos acceder a él directamente desde el navegador, tenemos que hacerlo a través de nuestra distribución.

Con esto hemos llegado al final de nuestro tutorial.

En este tutorial se asume que tienes un sitio estático publicado en S3, al que deseas apuntar un dominio personalizado. Si quieres saber más sobre este tema, puedes revisar mi post: Publicar un sitio estático en Amazon S3.

Para agregar un dominio personalizado a nuestro sitio, utilizaremos el servicio Amazon Route 53.

Lo primero es buscar el servicio Route 53 en la consola de AWS.

Una vez dentro de la consola Route 53, escribimos el nombre de dominio que deseamos comprar, presionamos check y verificamos su existencia.

Si no estuviera disponible, AWS nos recomendará otros dominios similares disponibles.

Luego de comprarlo vamos a Registered domains, en donde encontraremos el dominio comprado.

Posteriormente vamos a hosted zones, encontraremos una hosted zone para nuestro dominio, ingresamos al hosted zone de nuestro dominio.

Una vez dentro encontraremos la configuración actual de nuestro dominio, para hacer que nuestro dominio apunte hacia el bucket de S3 que contiene nuestro sitio debemos crear un nuevo Record Set.

Dentro del wizard, configuramos un Record Set de tipo A, que sea un alias cuyo target sea nuestro bucket de S3 que almacena el sitio estático, si entramos en este campo, nuestro bucket debería aparecer en el listado.

Una vez creado el record set, ya podemos cargar nuestra página estática mediante el nombre de dominio que compramos.

Vemos que la página de error funciona correctamente siempre sobre el dominio configurado.

Con esto nuestro sitio estático está listo con un dominio personalizado.

Amazon Simple Storage Service (Amazon S3) es un servicio de almacenamiento de objetos que ofrece escalabilidad, disponibilidad de datos, seguridad y rendimiento líderes en el sector.

Un beneficio importante de S3 es la posibilidad de publicar sitios estáticos, sitios para los que no tenemos que configurar un servidor web, sitios serverless.

Lo primero es buscar el servicio S3 en la consola de AWS. Los sitios estáticos que son publicados en S3 deben tener su propio bucket, por lo que crearemos uno para nuestro sitio, hacemos click en create bucket.

En el asistente de creación del bucket:

• Name and Region: Indicamos el nombre del bucket, en mi caso es ericknavarro.io, este nombre debe ser único en todo el universo de buckets de AWS, puede que el nombre del bucket ya exista, si es ese el caso recibiremos un mensaje de error y tendremos que modificar el nombre del bucket, dejamos los valores por defecto para el resto de opciones.

• Configure options: Dejamos los valores por defecto para estas opciones.

• Set permissions: Nos aseguramos que las restricciones para asignar permisos publicos no estén chequeadas, estas opciones aparecen en la siguiente imagen encerradas en dos recuadros amarillos, podemos dejar las opciones de configuración por defecto.

• Review: Validamos que toda la configuración realizada corresponda con lo que necesitamos y creamos el bucket.

Una vez creado el bucket veremos una imagen como la siguiente en nuestra consola, hacemos click en el bucket e incresamos a las opciones.

Una vez dentro nos movemos a la pestaña de Properties y hacemos click en la sección Static website hosting.

Una vez dentro se nos indica el Endpoint que es la URL con la que llegamos al sitio publicado, además tenemos que indicar el nombre de nuestro documento index y de nuestro documento error, en nuestro caso se llamarán index.html y error.html, pero podrían ser otros documentos con nombres diferentes.

1
2

Endpoint:
[http://ericknavarro.io.s3-website-us-east-1.amazonaws.com/](http://ericknavarro.io.s3-website-us-east-1.amazonaws.com/)

Posteriormente nos movemos a la pestaña de permisos y configuraremos una política en la pestaña Bucket Policy para que todos los archivos que se carguen al bucket sean públicos, esta política será:

1
2
3
4
5
6
7
8
9
10
11
12

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::**ericknavarro.io**/*"
        }
    ]
}

Es importante cambiar el nombre del bucket dentro de la política, en este caso el nombre de mi bucket es ericknavarro.io, pero este debe reemplazarse con el nombre del bucket que se usará para publicar el sitio.

Ahora procedemos a cargar los archivos HTML de nuestra página estática, en primero es index.html, que es nuestra página principal:

1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Erick Navarro</title>
    </head>
    <body>
        <h1>Esta es una página estática publicada en S3.</h1>
    </body>
</html>

El segundo es error.html, que es una página secundaria a la que se redirigirá ante cualquier error, por ejemplo, que el usuario intente ingresar a una página inexistente dentro del bucket:

1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Erick Navarro</title>
    </head>
    <body>
        <h1>Hemos tenido un error.</h1>
    </body>
</html>

En nuestro bucket tenemos la opción de cargar archivos (Upload) en la vista Overview:

Seleccionamos los archivos

Tendremos nuestro sitio cargado

Visitamos el endpoint de nuestra página:

1
2

Endpoint:
[http://ericknavarro.io.s3-website-us-east-1.amazonaws.com/](http://ericknavarro.io.s3-website-us-east-1.amazonaws.com/)

Podremos observar el contenido de la página index.html.

Luego de intentar ingresar a una página que no existe en nuestro sitio, S3 nos redirige a la página de error que publicamos:

Con lo anterior tenemos nuestro sitio estático publicado en S3.

Si quieres asignar un dominio personalizado a tu sitio, revisa mi post: Agregar un dominio personalizado a tu sitio utilizando Amazon Route 53