Cómo desplegar una aplicación estática a AWS con S3/Cloudfront/Route53

¿Tienes lista tu página web pero no sabes dónde hostearla? ¿Las opciones que encuentras te parecen muy caras y complicadas? Si respondiste que sí a una o ambas preguntas, entonces AWS podría ser una gran opción para desplegar tu sitio. Amazon Web Services o AWS, como se le conoce en el mundo del cloud, puede ser intimidante a primera vista (lo digo por experiencia). Entrar a la consola, dar clic al buscador de servicios y ver muchas opciones puede ser confuso, pero una vez que conoces los distintos servicios que ofrece y entiendes cómo se relacionan entre ellos, quedarás encantado por el sinfín de proyectos que AWS puede soportar.

Ventajas y desventajas

Dentro de las ventajas podemos encontrar las siguientes:

• Es bastante barato. Según la misma página de AWS, el costo está cerca de los 0.50 dólares mensuales. Si deseas conocer más, ingresa aquí.
• Sencillo de realizar. Aun cuando los pasos no son cortos, puedes tomar este tutorial como un rompecabezas que en menos de 15 minutos ya está armado y que luego de eso no tomará más de 1 minuto en actualizarse, si hubiera algún cambio.
• Se pueden construir pipelines de integración continua en Github Actions. De está manera, tus despliegues serán automáticos y ya no tendrás que preocuparte por entrar a la consola y configurar todo manualmente. Otro detalle es que para construir estos pipelines ya existen plantillas muy fáciles de usar en internet, así que solo es cuestión de entender cómo funciona Github Actions, cómo crear tu primera Action y de utilizar la plantilla mencionada. En esta plantilla solo tendrás que cambiar detalles como los nombres de los servicios que utilizas.

Entre las desventajas encontramos la siguiente:

• Esta desventaja no va del lado del uso de AWS, sino del tipo de renderizado que usaremos debido a que trabajamos con archivos estáticos. El renderizado se dará desde el browser, lo que quiere decir que será el de cada usuario el que construirá la página que éste observe mediante los archivos HTML y JavaScript que le hayamos proporcionado ¿Y esto porque es una desventaja? Bueno, sucede que los bots de Google tienen problemas al momento de realizar la indexación de las páginas que se renderizan de esta manera, ya que las páginas no están totalmente cargadas al aparecer en Google, sino que se construyen en el browser del cliente, como se mencionó previamente. Esto afecta en gran manera al SEO.
  
  Existe otro tipo de renderizado: el que viene desde el servidor. En este caso, tenemos un servidor que está siempre prendido y responde a las peticiones del cliente con toda nuestra página ya construida solo para que el browser las muestre. Utilizando este tipo de renderizado facilita que los bots de Google indexen nuestra página, ayudando al SEO.

¿Qué necesito?

1. Una cuenta en AWS. Crearla  es muy sencillo y hay muchos tutoriales que te indican como hacerlo, aquí te dejo uno de mis favoritos.
2. Una carpeta con todos los archivos estáticos de tu proyecto. ¿Cuáles son los archivos estáticos de mi proyecto? Esta carpeta toma distintos nombres dependiendo del framework con el que trabajes . Por ejemplo, en el caso de Angular 2 hacia adelante, su nombre es dist/, mientras que en el caso de una aplicación hecha en React su nombre es build/. Sin importar el framework o librería que emplees, solo es cuestión de buscar en internet cómo realizar el build de los archivos estáticos para comenzar con este tutorial.
3. Un dominio registrado en Route53. Si tu dominio no fue registrado en Route53, no te preocupes, porque es posible “transferirlo” a este servicio. Esta “transferencia” varía poco según el proveedor de tu dominio y no es complicada de realizar. Descubre más detalles aquí

El paso a paso

En este punto se utilizará el framework React, pero como se mencionó previamente, también sirve como guía si desarrollaste tu front con Angular, Vue o algún otro framework.

El dominio que utilizaremos para el tutorial será mars-proyect.xyz.

1) Creación de la aplicación en React.

Para crear nuestra aplicación base en React utilizaremos el siguiente comando en una terminal reemplazando <nombreDeApp> por el nombre de tu App:

create-react-app <nombreDeApp>

Este comando creará un frontend plantilla desde el cual podemos construir nuestro proyecto. Esta plantilla incluye todas las carpetas y archivos que podamos necesitar.

Si aún no tienes este comando, instálalo con npm a través del siguiente comando:

npm install -g create-react-app

2) Revisión del package.json de nuestra React App.

Nuestra nueva React App tiene entre sus scripts el necesario para el build (como se observa en la imagen a continuación).

3) Realizar el build del proyecto y explorar la carpeta con los archivos estáticos.

Si abrimos una terminal y ejecutamos el comando npm run build se genera la carpeta build con los siguientes elementos en su interior:

Todos estos son los archivos estáticos, previamente mencionados, que se deberán subir a AWS.

4) Entender los servicios de AWS que utilizaremos.

-S3: Aquí subiremos todos los archivos estáticos utilizando sus buckets.

-CloudFront: Es el CDN de AWS. Gracias a él, nuestra página web servirá de manera más rápida a los distintos clientes repartidos a nivel del mundo. Conoce más sobre CDNs aquí.

-Route53: Es el DNS de AWS. Aquí podrás registrar tus dominios o transferir el manejo de dominios registrados en otros proveedores.

5) Crear los S3 buckets.

a) Una vez que ingresamos al servicio S3 de AWS, hacemos clic en el botón Create bucket.

b) Crearemos dos buckets, uno con el mismo nombre de nuestro dominio y otro con el prefijo www antes de nuestro dominio. En este tutorial los dos buckets serán:

1. mars-proyect.xyz
2. www.mars-proyect.xyz

c) Para la creación de los buckets solo se modificarán los nombres como se puede ver aquí:

Luego le damos al botón de Create bucket al final de la página y continuamos.

6. Subir los archivos estáticos a S3 bucket.

a) Ingresamos al bucket www.mars-proyect.xyz.

b) Al ingresar veremos las opciones (como en la imagen debajo). Hacemos clic al botón naranja que dice Upload.

c) Al darle click al botón el punto b, veremos una pantalla como la siguiente:

Aquí empezaremos por darle clic a Add folder y subiremos el o los folders que se hayan generado dentro de nuestra carpeta build del punto 3. Como vemos, el único folder a subir es el folder static.

Luego, seleccionamos Add files y subimos todos los otros archivos.

Para finalizar, al subir correctamente la carpeta y los archivos la página debería lucir parecido a la imagen a continuación. Es importante destacar que el total de archivos es bastante variable y depende de cada proyecto.

7) Configurar los permisos del bucket www.mars-proyect.xyz.

a) Empezaremos por editar los bucket settings. Haz click en el botón Edit que se muestra debajo.

Se abrirá una pantalla. En ella, quita el check del checkbox, de tal manera que la página quede como la imagen debajo y dale a Save changes.

Editar el Bucket Policy.

Para esto, utilizaremos una plantilla que pueden encontrar aquí.

Es importante resaltar de esta plantilla  que debemos reemplazar Bucket-Name por el nombre de nuestro bucket. En el caso de este tutorial, www.mars-proyect.xyz.

Nuestro Bucket Policy quedará de esta manera:

8) Configurar las propiedades del bucket www.mars-proyect.xyz.

Una vez que seleccionamos properties, hacemos scroll down hasta lo último de la página. Ahí veremos un apartado que dice Static website hosting. Hacemos clic en el botón Edit.

Aquí cambiamos los campos, de tal manera que nos quede como la imagen debajo. Luego le damos a Save changes.

9) Configurar las propiedades del bucket mars-proyect.xyz.

Al igual que en el punto anterior, luego de ingresar al bucket y darle click a Properties, hacemos scroll down hasta lo último de la página. Ahí haremos clic al botón Edit del apartado Static website hosting.

Aquí modificamos los campos para que se vean como en la imagen debajo y le daremos a Save changes. Lo que haremos con este bucket es redirigir los requests al bucket con el prefijo www.

10) Generar nuestro certificado en AWS Certificate Manager.

a) Ingresamos al servicio AWS Certificate Manager.

b) Le damos clic al botón naranja Request.

c) Al darle clic, nos aparecerán las opciones debajo. Seleccionamos Next.

d) Agregar los domain names.

Añadiremos dos domain names: www.mars-proyect.xyz y mars-proyect.xyz.

Le damos clic a Request para finalizar.

11) Validar nuestros certificados. Esto será sencillo ya que nuestro dominio está en AWS. Para ello, solo debemos ingresar al certificado y seleccionar Create records in Route 53 como se ve debajo:

Luego, nos aparecerá la siguiente pantalla. Hacemos clic en Create records y listo.

Para confirmar que fue validado, revisamos nuestra lista de certificados hasta que el status cambie a Issued.

12) Crear las distribuciones en CloudFront.

a) Ingresamos al servicio de AWS CloudFront.

b) Elegimos Create Distribution.

c) Ingresamos y esta será la primera pantalla que veamos al hacerlo:

En el campo de Origin domain, colocaremos el bucket endpoint del bucket www.mars-proyect.xyz. Para esto, ingresamos a nuestro bucket y buscamos está propiedad dentro de properties.

d) En la misma pantalla del punto c, cambiamos el protocol policy para que redireccione de http a https.

e) En el apartado de Settings de la misma pantalla de los puntos c y d, agregamos el domain name y también el certificado que generamos previamente.

f) Realizamos lo mismo para el otro bucket.

g) Una vez creadas nuestra distribuciones, podremos ver deploying en la columna Last modified. Hacemos refresh hasta que el valor de la columna cambie a una fecha.

13) Realizar el Hosting con Route53.

a) Accedemos al servicio de AWS Route53.

b) Ingresamos la Hosted Zone de nuestro dominio, mars-proyect.xyz.

c) Elegimos Create Record en el botón naranja, como se muestra en la imagen debajo.

d) Elegimos la opción Simple Routing y le damos clic a Next.

e) En la pantalla que se muestra, hacemos clic en el botón Define simple records.

f) Creamos dos A records, uno para mars-proyect.xyz y otro para www.mars-proyect.xyz. Ambos records deben apuntar a los Cloudfront distributions correspondientes.

g) Definir el record para mars-proyect.xyz.

h) Definimos el record de igual manera para www.mars-proyect.xyz, solo cambiando la distribución y agregando el subdomain www.

i) Al terminar de definir nuestros records, hacemos clic al botón naranja Create records.

14) Listo! Puedes visitar el proyecto en: https://www.mars-proyect.xyz/.

Como podemos observar, desplegar una aplicación en AWS no es complicado. Al contrario, es sencillo, barato y amigable para el desarrollador. Pero como todo en el mundo de la programación, esta manera tiene sus tradeoffs y nosotros como builders debemos tenerlas en cuenta.

Siempre debemos considerar las limitaciones de los servicios, frameworks o lenguajes que utilicemos. En este caso, la mayor limitante es el tema del SEO mencionado entre las desventajas, por lo que si te preocupa mucho el SEO te recomiendo utilizar server-side rendering junto con algún otra forma de hostear tu APP, como por ejemplo AWS Fargate.

¡Hasta la próxima!