Publicar un sitio estático en Amazon S3

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á:

{
    "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:

<!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:

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