Cómo crear una web estática en AWS

Análisis de Datos

Una página web estática se utiliza exclusivamente para imágenes, HTML, CSS y otros archivos estáticos. Estos archivos se alojan directamente sin necesidad de un servidor, utilizando diversos servicios de Amazon, como S3 para el almacenamiento de los elementos estáticos, CloudFront como servicio CDN, Certificate Manager para la implementación de certificados HTTPS, y Route53 como servidor DNS, encargado de dirigir las solicitudes de dominio hacia CloudFront.

Para inicia, primero debemos ir a la página de AWS, crear una cuenta o entrar si ya tenemos una vamos a al apartado de servicios y seguimos los siguientes pasos:

1. Crear bucket de S3

En la pagina de AWS buscamos el servicio S3 y le damos a crear uno nuevo. En la página del nuevo bucket, le colocaremos la región (en nuestro caso estamos en España y colocaremos Irlanda) y un nombre, recomendamos poner el nombre de la web.

A continuación se encuentra el nivel de propiedades. Aquí, asegurate de deshabilitar el ACL y de que el acceso público a este bucket no esté permitido. Solo deberíamos poder visualizar esto a través del servicio de CloudFront. El resto de las opciones las dejaremos tal como están, por defecto.

Una vez creado, ya podemos comenzar a subir los archivos de nuestra web. Para ello, accederíamos al bucket que acabamos de crear y dentro de la sección de objetos es donde podemos cargar los archivos que deseamos.

Cuando seleccionemos la opción de cargar, tendremos la posibilidad de elegir, arrastrar o buscar una carpeta o múltiples archivos para subirlos.

Al hacer clic en el botón de cargar, se mostrará el estado y automáticamente identificará el tipo de archivo que hemos seleccionado. Aquí no debemos hacer nada más que verificar que se haya cargado correctamente y cerrar la ventana.

Ya hemos completado el proceso y ya tenemos nuestro bucket creado, ahora continuemos con crear el certificado.

2. AWS Certificate Manager, crear certificado https 

El servicio de «AWS Certificate Manager» nos permite obtener certificados HTTPS firmados por Amazon como entidad certificadora. Esto garantiza la autenticidad y la seguridad de nuestros sitios web o aplicaciones alojadas en la nube de Amazon Web Services (AWS).

Así que iniciemos, primero buscamos el servicio de certificate manager, y le damos a crear y solicitar un certificado público, ya que se va a utilizar en internet

Luego, seleccionamos el dominio anteriormente elegido (paso 1), igualmente podemos agregar todos los subdominios que necesitemos, con un asterisco podemos hacer que el certificado sirva para todos los subdominios.

3. Validar certificado HTTPS mediante DNS

Ahora, te preguntarás cómo Amazon, en este caso, la empresa certificadora, sabe que este dominio nos pertenece y cómo lo validamos para evitar fraudes y asegurarnos de que nadie más pueda usarlo. En este caso, utilizaremos una validación a través de DNS, que es la más recomendada. Esto se debe a que si tienes acceso al servidor DNS, puedes agregar el registro necesario para validar la propiedad del dominio.

Una vez que hayamos hecho clic en «solicitar», el certificado estará en estado pendiente de validación. En nuestro lado, necesitamos configurar las reglas que aparecen al hacer clic en el certificado en nuestros servidores DNS.

Al hacer clic en el certificado que hemos creado, debemos establecer las reglas solicitadas, en este caso, de tipo CNAME. Aquí tienes dos opciones: si estás utilizando todo dentro de Amazon, te brinda la facilidad de crear los registros en el servidor Route53 automáticamente. Si no estás utilizando Amazon como servidor DNS, tendrías que acceder al panel de control del servidor de hosting y crear este registro manualmente.

4. Route53, crear regla

Dicho lo anterior, damos click en «Route53». Los registros en Route53 son esenciales para dirigir el tráfico web a tu sitio en AWS. Permiten traducir nombres de dominio a direcciones IP, gestionar el tráfico entre diferentes recursos, garantizar la disponibilidad y redundancia del sitio, configurar redirecciones y monitorear la salud del tráfico. En resumen, son clave para que tu sitio web sea accesible, confiable y de alto rendimiento.

Al hacer clic en «crear registro», el sistema generará automáticamente el certificado.

5. CloudFront, crear distribución

Ahora, pasamos a otro servicio de AWS llamado CloudFront, que es una red de distribución de contenido. Consiste en una serie de servidores distribuidos en las principales ciudades del mundo, lo que permite una entrega más rápida de contenido.

Cuando un usuario accede a una página web, imagen o contenido, el sistema identifica el nodo más cercano a su ubicación, reduciendo así la latencia. Esto significa que, aunque mi servidor esté en Estados Unidos, si mi usuario está en Madrid, será dirigido al nodo más cercano, lo que mejora significativamente el tiempo de carga.

Ahora, vamos a crear en este caso una nueva distribución donde dice «Create a CloudFront distribution», aquí usaremos CloudFront no solo para imágenes sino para servir una web

Al crear, nos saldrán muchos parámetros, la mayoría se dejaran por defecto, los mas importantes que tienes que configurar son:

  • Origen de datos: Aquí seleccionaremos el bucket que creamos el en paso 1
  • Nombre
  • Origen: Usar el recomendado, que este cerrado al publico
  • Policy: Redireccionar HTTP o HTTPS
  • Alternate domain name: Aquí colocamos el subdominio que configuramos en el certificado

Es crucial tener presente que, al momento de crear el Certificate Manager, debemos seleccionar la región adecuada. En este caso, hemos elegido «North Virginia»; por ende, el certificado residirá allí. Es importante destacar que servicios como Route53 y CloudFront son globales, lo que significa que no es necesario seleccionar una región para ellos.

Continuando, en la default root object predeterminado, debemos considerar cuál será el objeto que se cargará al acceder a la raíz del dominio (en este caso, academy.wheelhub.es). Especificamos a qué archivo queremos acceder y agregamos el archivo previamente cargado index.html.

6. Crear la configuración de control

Una vez que hemos hecho clic en crear, el bucket que hemos creado, el cual solo tendrá acceso el servicio de cloudfront, nos indicará los permisos necesarios. Podemos hacerlo haciendo clic en:

Al crear la distribución, se muestra un banner recordatorio de que es necesario modificar la política del bucket de S3. Para esto, hacemos clic en copiar y continuamos avanzando.

Luego nos dirigimos al bucket y, en la sección de permisos, buscamos la opción de política y hacemos clic en editar.

Finalmente, pegamos la política recomendada por la distribución de CloudFront, que en esencia significa: «permite al servicio de CloudFront realizar operaciones de GetObject sobre el bucket».

Una vez creado la distribución utilizando la URL que nos dio CloudFront ya vemos que esta cargando ese index.html en la raíz

7. Apuntar dominio al CloudFront

Ahora, debemos ir al Route53 y configurar el CNAME, un nuevo registro para decirle que el subdomino que hemos creado haga una redirección al dominio que nos da CloudFront

Y al crear el registro, ya tenemos nuestra URL como la necesitamos.

Conclusiones Finales

Una página web estática no tiene una base de datos ni código de servidor como PHP o Node.js. Es simplemente HTML puro. Esto puede ser útil si deseas separar el frontend y el backend. El frontend consistiría en una página web estática creada con frameworks como React, Nest, Vue, etc. Estos frameworks tienen un módulo «singlepage» que genera todos los archivos estáticos que luego puedes alojar en un servicio de almacenamiento como S3, sin necesidad de un servidor HTTP como Apache.

Este enfoque es ideal para sitios web muy simples, como páginas de aterrizaje, o para su uso en webs más complejas, donde puedes presentar la capa de presentación frontend y la de backend de forma independiente.

¿Hablamos?
Escríbenos