Desplegando una web estática en AWS desde la CLI

Hoy en día tener presencia en la red es esencial, y qué mejor manera de empezar que con una web estática. Simple, rápida y eficiente, la web estática se ha convertido en una opción popular para muchos, desde bloggers hasta pequeñas empresas. Pero, ¿cómo podemos desplegar la nuestra? Aunque puede parecer una odisea al principio, ¡no te preocupes!

En este artículo, veremos paso a paso cómo lanzar tu sitio web estático en AWS, y lo haremos como los profesionales: utilizando la línea de comandos.

Diagrama

¿Qué es lo que necesitamos?

• Un bucket de S3
• Un dominio (podéis adquirirlo a través de Amazon Route 53 o vuestro proveedor favorito. En este último caso una vez adquirido tendréis que delegarlo en Route53).
• Tener instalada última versión de AWS Command Line. En esta entrada os contamos cómo instalarlo.

¿Qué vamos a hacer?

• Crear un dominio usando Amazon Route53
• Registrar el dominio en Route53 y darlo de alta
• Crear un bucket S3
• Subir nuestra página web al bucket S3
• Habilitar la web
• Adjuntarle una policy al bucket
• Acceso a la Web

Pasos a Seguir

DISCLAIMER: Es importante señalar que aunque en el blog podamos mostrar comandos, scripts, u otros ejemplos de código como parte de las demostraciones o discusiones, estos se ofrecen únicamente con fines educativos y de entretenimiento. Utilice la información proporcionada bajo su propio riesgo.

Elegir nuestro Dominio

PASO 1: Creamos nuestro dominio utilizando Amazon Route 53.

Antes de intentar registrar un dominio, es útil verificar si el nombre de dominio deseado está disponible. Aunque la AWS CLI no proporciona una función directa para verificar la disponibilidad del dominio, puedes usar herramientas externas o la consola de AWS para hacerlo.

1. Buscamos el dominio que queremos comprar. Si está disponible lo añadimos a la cesta de la compra.
2. Seleccionamos el periodo en el que queremos tener el dominio disponible (1, 2, o hasta 10 años) y desactivamos la opción de Auto-renew (no queremos que automáticamente se autorenueve…a no ser que sea el dominio de vuestra vida).
3. Introducimos nuestros datos de contacto, aceptamos la política de términos y condiciones.

PASO 2: Registrar el Dominio s3geek.com.

Utiliza el siguiente comando para registrar un dominio:

aws route53domains register-domain --domain-name s3geeek.com --duration-in-years 2 --admin-contact file://contacto.json --registrant-contact file://contacto.json --tech-contact file://contacto.json

Donde contacto.json es un archivo que contiene los datos de contacto para el dominio en formato JSON. Por ejemplo:

{
   "FirstName": "Guillermo",
   "LastName": "Ruiz",
   "ContactType": "PERSON",
   "OrganizationName": "iaasgeek",
   "AddressLine1": "Paseo de la Castellana 259",
   "City": "Madrid",
   "State": "Madrid",
   "CountryCode": "ES",
   "ZipCode": "28054",
   "PhoneNumber": "[phone]",
   "Email": "[e-mail]"
}

Nota : Asegúrate de adaptar el archivo contacto.json con tus propios detalles (no me gustaría aparecer como la persona de contacto en todas las webs del mundo). El formato y los campos pueden variar según las necesidades y el tipo de dominio (.com, .org, .net, etc.).

PASO 3: Espera la Confirmación de Registro

Una vez que hayas enviado el comando anterior, AWS comenzará el proceso de registro del dominio. Es posible que recibas un correo electrónico de confirmación dependiendo del TLD (dominio de nivel superior, por sus siglas en inglés) que estás registrando. Es crucial seguir las instrucciones en ese correo electrónico para completar el proceso de registro.

PASO 4: Damos de alta el nuevo dominio en Route53

Una vez tengamos el dominio adquirido, vamos a configurarlo en el servicio Amazon Route53. A continuación os mostramos cómo es nuestro fichero s3domain.json:

{
   "Comment":"CREATE a record",
   "Changes": [
       {
           "Action": "CREATE",
           "ResourceRecordSet": {
               "Name": "s3geek.com.",
               "Type": "A",
               "TTL" : 300,
               "AliasTarget":{
                  "HostedZoneId": "Z7AQBSTGFYJSTF", 
                  "DNSName": "s3geek-eu-south-1.amazonaws.com.",
                  "EvaluateTargetHealth": false
               }
           }
       }
   ]
}

Nota: El valor de HostedZoneId para buckets de S3 con configuración de sitio web en distintas regiones está predefinido por AWS. Por otro lado, debes reemplazar s3geek-eu-south-1.amazonaws.com. con el endpoint adecuado para tu región. Estos valores los puedes encontrar en la documentación oficial de AWS.

Necesitaremos el ID de la zona donde hostearemos nuestro dominio. Si no conoces el ID, se puede buscar utilizando:

$ aws route53 list-hosted-zones-by-name 
{
   "ResourceRecordSetCount": 2,
   "callerReference": "xxxxxxxxx",
   "Config": {
      "Comment": "",
      "PrivateZonee": false
   },
   "Id": "hostedzone/Z05xxxxxx",  ### Este es el ID que buscamos
   "Name": "s3geek.com"
}

Si no tienes zona donde hostear tu dominio, deberás crear una zona de hosting:

aws route53 create-hosted-zone --name s3geek.com --caller-reference fecha-y-hora-unicas

La referencia del caller debe ser una cadena única que ayuda a identificar esta solicitud específica (puedes usar la fecha y hora actuales). La respuesta incluirá un conjunto de servidores de nombres (NS) para la zona hosted. Guarda esta información.

Una vez lo tengamos, creamos un registro del tipo A que apunte el bucket.

$ aws route53 change-resource-record-sets --hosted-zone-id Z05xxxxxx --change-batchfile://s3domain.json

{
   "ChangeInfo": {
      "Status": "PENDING",
      "Comment": "CREATE a record ",
      "SubmittedAt": "2023-07-10T09:42:00.299Z",
      "Id": "/change/C037728401GNPSS54MBST"
   }
}

Verificamos si se ha realizado el cambio (fijaros en el parámetro Status). Si está INSYNC nos indica que los cambios se han propagado a todos los servidores Route53. En caso contrario (Pending) el cambio aún se estará propagando.

$ aws route53 get-change --id /change/C037728401GNPSS54MBST
{
   "ChangeInfo": {
       "Status": "INSYNC", ## Este es el estado que buscamos
       "Comment": "CREATE a record",
       "SubmittedAt": "2023-07-10T09:42:00.299Z",
       "Id": "/change/C037728401GNPSS54MBST"
   }
}

Ya tenemos nuestro dominio s3geek.com dado de alta. Vayamos al siguiente paso.

Creamos un bucket de S3

PASO 5: Creamos un bucket llamado s3website donde alojaremos nuestra web estática.

$ aws s3api create-bucket --bucket s3website --region eu-south-1
{
  "Location": "/s3website"
}

PASO 6: Verificamos que nuestro bucket está vacío:

$ aws s3 ls s3://s3website

$

Habilitamos la web statica en S3

PASO 7: Activación del Hosting Web Estático: Con el siguiente comando, activaremos el hosting web en el bucket:

aws s3 website s3://s3website/ --index-document index.html --error-document error.html

Subimos nuestra página web al bucket S3

PASO 8: Es hora de subimos nuestra página web al bucket que hemos creado. Lo podemos hacer con dos comandos cp o sync.

$ aws s3 cp "/user/s3web.html" s3://s3website

$ aws s3 sync ./user/s3web.html s3://s3website

PASO 9: Comprobamos que tenemos nuestra web en el bucket:

$ aws s3 ls s3://s3website
2023-10-09 13:30:23    72 s3web.html
$

Adjuntamos policy al bucket S3

PASO 10: Para hacer que el contenido sea público, configuraremos una política de bucket que permita el acceso público:

$ aws s3api put-bucket-policy --bucket s3website --policy file://politica.json

Donde politica.json es un archivo que contiene la política deseada (ejemplo de acceso público completo):

{
   "Version":"2012-10-17",
   "Statement":[{
     "Sid":"PublicRead",
         "Effect":"Allow",
   "Principal": "*",
       "Action":[
           "s3:GetObject"
           "s3:GetObjectVersion"
       ],
       "Resource":["arn:aws:s3:::s3website/*"
       ]
     }
   ]
 }

Acceso a la Web

Después de configurar el bucket y subir nuestros archivos, podemos acceder a nuestro sitio web a través de la URL:

http://s3website.s3-website-eu-south-1.amazonaws.com/

Por defecto, nuestra web en estos momentos usará un dominio de AWS. Para utilizar el dominio que hemos registrado y dado de alta anteriormente (s3geek.com) debemos esperar la propagación y una vez propagado deberías poder acceder a tu sitio web en S3 usando tu dominio personalizado.

http://s3geek.com/

Limitaciones

• Funcionalidad Básica : S3 es para hosting estático, por lo que no puedes ejecutar aplicaciones web basadas en servidores, como las escritas en Node.js, PHP, etc.
• No dispones de HTTPS por defecto : Para servir tu sitio con HTTPS, necesitarás usar servicios adicionales como AWS Certificate Manager y CloudFront.
• Límites de Almacenamiento y Transferencia : Aunque S3 puede manejar una gran cantidad de datos, no es ilimitado y estarás sujeto a los costes y limitaciones del servicio.
• Sin Compresión Automática : A diferencia de algunos servidores web tradicionales, S3 no ofrece compresión GZIP de tus archivos de forma predeterminada.

Conclusiones

Desplegar un sitio web estático con Amazon S3 y AWS CLI es un proceso sencillo y eficiente. Empezamos creando un bucket en S3, al que luego configuramos como un sitio web, y subimos todos nuestros archivos estáticos. Es importante garantizar que estos archivos sean públicamente accesibles, lo que logramos estableciendo las políticas de acceso necesarias. Una vez lo tenemos todo listo, obtenemos una URL amigable proporcionada por AWS para nuestro sitio. Y para aquellos que buscan un toque más profesional, integramos un dominio personalizado (s3geek.com) mediante Route 53. Con estos pasos, prácticamente cualquier persona puede tener una página web en poco tiempo.

Nos vemos en la siguiente!