fbpx Saltar al contenido
AWS

¿Cómo alojar una web GRATIS en AWS (casi 😜)?

23/01/2021
alojar web aws gratis

La nube pública de AWS tiene muchos servicios. A fecha de este post (Enero 2021) cerca de 200. Pero sin duda, el mas usado de ellos es S3. Gracias a este servicio te voy a enseñar cómo alojar una web gratis en AWS. Bueno, gratis del todo no, pero como dice un compañero mío, virtualmente gratis sí.

Puedes ver el vídeo de este artículo aquí

¿Cómo almacenar una web en AWS?

El servicio de almacenamiento de AWS se llama Simple Storage Service o S3 para sus amigos. En este servicio podemos guardar ficheros de cualquier tipo, incluidos los que componen una web.

¿Qué es un bucket de S3?

En S3 podemos crear buckets. Un bucket es recurso que nos provee AWS para que almacenemos datos. Podemos tener varios buckets en nuestra cuenta si queremos segmentar nuestra información.

Una de las particularidades de los buckets de S3 es que podemos activar una opción para que se conviertan en un servidor de páginas web. Esto es un gran beneficio, pero ojo, solo sirve páginas estáticas, es decir, que si quieres alojar una web hecha en PHP o Django por ejemplo no te vale esta solución. Tenemos otras formas que veremos en otros artículos.

¿Cómo crear un bucket de S3?

Lo primero y más importante es tener cuenta en AWS. Si no tienes puedes crearla haciendo click en este enlace.

Una vez tengas la cuenta, entramos en la consola de AWS. Dentro hay que buscar el servicio de S3 o puedes seguir directamente este enlace.

Esta es la página que encontrarás.

AWS S3

Pincha en Create Bucket.

Indica el nombre del bucket. Este nombre debe ser único en todo AWS así que es posible que pongas un nombre y que te digan que ya existe. Si es así prueba con otro.

En la región pon la que este mas cerca de donde vayan a estar tus usuarios. Esto influye en el tiempo de carga por la latencia que hay entre el servidor donde está alojada la web y el ordenador de quién lo esta viendo.

Configuración del bucket de AWS S3

Lo siguiente es desactivar el bloque de acceso público. Si no se desactiva no se podrán ver los objetos que se suban desde internet.

Desactivar bloqueo de acceso público en S3

En las demás opciones, la configuración por defecto te vale.

Configuración bucket S3

Pincha en Create bucket y ya tendrás creado tu primer bucket en S3

Crear bucket en S3

Lo puedes ver en la lista de buckets en la consola de S3

Buckets de S3

¿Cómo hacer que un bucket S3 pueda alojar una web?

Entra en el bucket. Para ello sólo tienes que pinchar en el nombre del mismo.

Contenido bucket S3

Pincha en la pestaña Properties.

Propiedas bucket S3

Desplázate hasta abajo del todo a la seccion Static website hosting y pinche Edit.

S3 Static website hosting

Tienes que poner en Enabled la opción Static website hosting para convertir tu bucket a un sitio web.

Habilitar Static website hosting

En la caja de Index document pon index.html que será el fichero que subiremos luego. En la caja de Error document puedes poner cualquier otra página de error para cuando no se encuentre la ruta de un archivo. En este caso vamos a poner lo mismo de antes, index.html.

Truco: Si estás haciendo una web en React con react-router tienes que poner index.html en Error document para que funcione correctamente.

Después pincha en Save changes.

Página principal y de error del sitio

¿Cómo subir ficheros a un bucket S3?

Una vez que está habilitado el servidor de páginas estáticas en el bucket hay que subir nuestra página principal.

Te dejo el código del fichero index.html que vamos a subir.

<!DOCTYPE html>
<html>
  <body>
    <h1>Hola desde AWS S3</h1>
  </body>
</html>

Para subir el fichero dentro de nuestro bucket es tan sencillo como pinchar en el nombre del bucket y dentro de las pestañas ir a Objects. Ahora pinchamos en Upload.

Pestaña Objects del bucket

En la siguiente ventana pinchamos en Add files y se nos abrirá la ventana del navegador para seleccionar el fichero de nuestro equipo.

Pantalla de subida de archivos en S3

Una vez seleccionado lo veremos en la pantalla en Files and folders.

Fichero subido al bucket S3

En las opciones de Destination no vamos a cambiar nada y lo único que haremos es pinchar en Upload.

Subir el fichero a S3

Si todo ha ido bien verás el fichero en la lista de objetos del bucket.

Lista de objetos en S3

Pincha sobre el fichero para abrir sus propiedades. Verás la URL de la página en Object URL.

Propiedades del objeto en S3

Ahora viene una parte en la que los más novatos en AWS siempre tienen problemas. Te habrás dado cuenta de que si pinchas en el enlace de Object URL de las propiedades te dará un error como este.

Error bucket S3 static hosting

Esto es porque aunque hayas activado que los objetos sean públicos y que quieres servirlos como una web estática, AWS no deja acceder a ellos desde fuera. Parece ilógico pero es como funciona la seguridad en AWS.

¿Cómo acceder a objetos de S3 desde internet?

Tenemos que dar permisos desde internet para que se pueda acceder a los objetos del bucket. Para ello pincha en la pestaña Permissions de tu bucket.

Pestaña Permissions del bucket S3

Ve a la parte de Bucket policy y pincha Edit.

Bucket policy en el bucket S3

Las Policies en AWS son la forma en la que se configuran los permisos de los distintos servicios y quién puede usarlos. En este caso la Policy que hay que crear es una que deje sólo que se puedan leer los objetos del bucket S3 que estamos configurando. Esta es la sintaxis.

{
    "Version": "2012-10-17",
    "Id": "S3PublicAccess",
    "Statement": [
        {
            "Sid": "AllowAll",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::rubenjgarciacloud-freeweb/*"
        }
    ]
}

Copia este código en la caja de Policy dentro de Edit bucket policy y pincha en Save changes.

Bucket Policy del bucket S3

Una vez grabado los cambios los verás en la pestaña de Permissions del bucket.

Permission del bucket con Bucket Policy

Si te das cuenta ahora veras debajo del nombre de tu bucket una advertencia que pone Publicly accessible. Esto es para que sepas que tu bucket es accesible desde el exterior y que lo tengas en cuenta.

Bucket con la leyenda Publicly accessible

Ahora si vas a la URL de antes podrás ver en tu navegador el texto de nuestra página.

Contenido de la página estática en S3

¿Cuánto cuesta alojar la web en S3?

El titular del post dice que es GRATIS o al menos casi, alojar una web en S3. Vamos a ver cuánto cuesta.

Si vas a la página de precios de S3 puedes ver que en la región de Irlanda, alojar objetos en S3 cuesta $0.023 por cada GB al mes.

Pongamos una web que tiene bastantes imágenes, CSS y código. Vamos a suponer un tamaño de 5 MB. El precio de este alojamiento es de $0.0001123046875. Seguramente AWS te cobraría $0.01 al mes.

Tenemos que tener en cuenta también el número de peticiones que vamos a tener ya que en AWS se cobran a $0.0004 por cada 1000 que se hagan.

Pongamos que para cargar tu web hacen falta 20 peticiones entre imágenes, CSS, Javascript, etc… El coste por cada visita sería de $0,000008. Si tienes al mes 5000 visitas tendrás un coste de $0.04.

Y por último, la transferencia de datos. El primer GB al mes de transferencia que tengas te lo regala AWS y a partir de ahí cobra $0.09 por GB.

Usando las mismas 5000 visitas al mes de antes y multiplicando por los 5MB de la web nos da 25000 MB, más o menos, 25 GB. Como te regalan el primer GB, por las 24 GB restantes te cobrarán $2.16.

Si sumamos todo tenemos $0.01 + $0.04 + $2.16 = $2.21.

Por poco más de $2 puedes tener una web estática alojada en AWS sin tener que montar tu servidor, sin preocuparte si se cae o no, y sin tener que estar atento a ciber ataques ya que AWS se encarga de todo eso. No sé cómo lo verás tú, pero para mí esto es GRATIS.

Además puedes redirigir un dominio que ya hayas comprado para que sirva la página de S3 desde una URL mas amigable.