Creación de un sitio web estático con Amazon S3
Introducción
Amazon S3 o Amazon Simple Storage Service es un servicio ofrecido por Amazon que proporciona almacenamiento de objetos en contenedores llamados buckets.
Este servicio nos permite almacenar cualquier tipo de ficheros con una disponibilidad inmediata, además de ofrecernos control de versiones, seguridad y cifrado de los objetos.
Tutorial
Como hemos visto AWS S3 nos permite almacenar ficheros a los que podemos acceder, en este tutorial vamos a configurar un bucket para almacenar un sitio web estático.
Para el tutorial necesitaremos una página html sencilla, usaremos un fichero html, una hoja de estilos y una imagen.
Accedemos a la consola de AWS y nos identificamos.
Dentro de la consola buscamos el recurso S3.
Creamos un nuevo bucket.
Le damos un nombre único y dejamos la región por defecto.
Un sitio web es accesible por cualquier usuario por lo que debemos permitir el acceso público a nuestro bucket. Desmarcamos el bloqueo del acceso público y podemos dejar el resto de la configuración por defecto.
Los bucket no tienen herencia, por lo que permitir el acceso público al bucket no implica que sus objetos tengan acceso público. Debemos crear una política, que permita el acceso a los objetos, y asociarlo al bucket. Para ello, en la sección Permisos buscamos el apartado Política de bucket y le damos a Editar.
Copiamos el ARN del bucket (nos servirá para el siguiente paso) y le damos Generador de políticas.
Como tipo de política seleccionamos S3 Bucket Policy.
En Statement, rellenamos el campo Principal con un asterisco y seleccionamos GetObject como action.
Introducimos el ARN de nuestro bucket, si no lo copiamos en el paso anterior podemos seguir la sintaxis del mensaje de abajo para rellenarlo.
Para que afecte a todos los objetos del recurso deberemos indicarle /* al final del ARN
Le damos a Add Statement y después de ver el resumen del statement le damos a Generate Policy.
Se nos abrirá una ventana con el JSON de la política, la copiamos y volvemos a la pantalla anterior.
Pegamos el JSON de la política y lo guardamos.
Una vez configurado los permisos, procedemos a subir nuestros ficheros. Podemos arrastrar los ficheros a la zona del bucket o usar el botón cargar y seleccionar los ficheros.
Le damos a cargar y volvemos al bucket.
Si accedemos al enlace del fichero index veremos que nuestra página se muestra correctamente.
Podemos acceder a nuestra página pero aún no es un sitio web estático, lo podemos comprobar por los siguientes aspectos:
- En la url de la página de inicio vemos el nombre del fichero
- Si intentamos acceder a una página no existente nos mostrará un xml con información sobre el bucket
Para alojar nuestro sitio web deberemos buscar en la sección Propiedades el apartado Alojamiento de sitios web estáticos y darle a Editar.
Habilitamos el alojamiento, indicamos el nombre del documento que queremos que funcione como índice, y también indicamos el nombre de la página de error si la tuviéramos en el bucket.
Si queremos mostrar una página en caso de producirse error indicaríamos el nombre del fichero del bucket en Documento de error.
Guardamos los cambios y si volvemos a la sección Propiedades en el apartado Alojamiento veremos la dirección de nuestro sitio web.
Si accedemos a él, podemos comprobar que funciona correctamente y se han solucionado los problemas anteriores. Si intentamos acceder a una página no existente nos mostrará la página de error.
Conclusión
Es bastante útil poder almacenar sitios web estáticos en buckets, en este ejemplo hemos alojado una página muy sencilla pero podemos almacenar páginas más complejas y con más ficheros.
También podríamos separar los recursos y tener por ejemplo, la página en un bucket y las imágenes en otro.
Autor/a: Gerard Alexander Nina Picón
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021