Cómo crear un sitio web estático con Amazon S3

Amazon Simple Storage Service (S3) es un servicio web ofrecido por Amazon Web Services (AWS) para almacenar y acceder a objetos a través de Internet. S3 ofrece a los sitios web, servicios web y aplicaciones móviles la posibilidad de subir datos y almacenarlos en sus servidores de Estados Unidos. Funciona a través de HTTP/S utilizando protocolos basados en TCP. El uso de S3 es gratuito tanto para las operaciones de put (almacenamiento) como para las peticiones GET (recuperación).

La apertura de un bucket para recibir o almacenar objetos requiere, además de una clave de cifrado especial, una clave compartida que proporciona Amazon una vez creada la cuenta. Los usuarios pueden contratar una cuenta sin coste alguno que proporciona 5 GB de espacio de almacenamiento cada mes, sin límite en cuanto a la cantidad que se puede almacenar en los buckets.

Amazon S3 ofrece una durabilidad del 99,999999999%, ya que los datos se almacenan en varias instalaciones para su redundancia. Amazon S3 utiliza la misma tecnología de replicación que utiliza Amazon para garantizar la disponibilidad de los datos de su propio sitio. El servicio pretende optimizar el rendimiento y los costes en función de la aplicación utilizada y la cantidad de datos almacenados, al tiempo que ofrece protección contra la pérdida de datos.

También hay funciones que permiten a los usuarios ver los análisis sobre la cantidad de datos que se cargan o descargan a través de S3, controlar el ancho de banda que se utiliza o aprovechar las soluciones habilitadas para móviles. Amazon S3 está disponible a través de Internet sin coste alguno para los usuarios. Las tasas de transferencia de datos son ilimitadas. Los datos se pueden recuperar desde cualquier lugar en menos de 1 segundo con baja latencia, lo que permite el acceso a los recursos casi en tiempo real. También elimina las tarifas de alojamiento y la planificación de la capacidad al proporcionar una opción alternativa de almacenamiento en la nube que no requiere una inversión de capital constante para alojar recursos.

Amazon S3 admite objetos de cualquier tipo, tamaño y formato. Los objetos pueden almacenarse en cualquier cubo, pero deben ser accesibles a través del nombre del objeto. Los usuarios pueden subir archivos y carpetas desde sistemas internos y públicos a través de HTTP o HTTPS a los buckets que soportan la integración de las características del sistema de archivos NFS (Network File System) o POSIX. Los usuarios tienen control directo sobre quién accede a sus buckets compartiendo hasta 70 GB de espacio de almacenamiento con otro usuario (creado a través de AWS) que tenga una cuenta en Amazon S3.

Crear un sitio web puede ser una tarea desalentadora. Hay tantas opciones y elecciones que hacer que es fácil sentirse abrumado. Pero, ¿y si pudieras crear un sitio web sin tener que preocuparte por el alojamiento, los nombres de dominio o la configuración de un servidor? Con Amazon S3, puedes crear fácilmente un sitio web estático utilizando únicamente tu ordenador y una conexión a Internet. En esta entrada del blog, te mostraremos cómo crear tu propio sitio web estático utilizando Amazon S3. También hablaremos de algunas de las ventajas de utilizar Amazon S3 para tu sitio web. Así que ¡comencemos!

Requisitos previos

Para crear un sitio web estático utilizando Amazon S3, necesitarás

• Una cuenta de Amazon AWS para configurar tu sitio web en Amazon S3. Esta demostración utiliza la cuenta gratuita de Amazon, que es gratuita y sólo tiene las enormes ventajas cuando se combina con un sitio web estático de Amazon S3.

¿Qué haremos?

En esta guía, crearemos y configuraremos un sencillo sitio web estático utilizando Amazon S3. También pasaremos a configurar ese sitio web estático con una página de error personalizada. Esta guía te mostrará cómo crear un sitio web en HTML, CSS y JavaScript que sea fácil de mantener y muy rentable.

Un sitio web estático es un sitio web que sólo consta de páginas estáticas. No contiene ningún lenguaje de scripting del lado del servidor como php, asp o nodejs. Sólo consta de un archivo html donde se almacenan todas las páginas web. El alojamiento de sitios web estáticos no es nuevo, sino que existe desde hace mucho tiempo.

Al utilizar un sitio estático, no tienes que preocuparte de ningún tipo de hackers y sólo necesitas la capacidad de servir páginas web. Cuando se combina con Amazon S3, el coste es minúsculo, como uno o dos dólares por sitio. Entonces puedes escalar tus páginas web para satisfacer las necesidades de tu audiencia con millones de lectores desde allí.

Para alojar un sitio web estático, creas un bucket de Amazon S3.

Y luego subes tu contenido a ese cubo.

El acceso público de lectura de tu cubo S3 debe ser intencionado. Es importante que todo el mundo pueda leer el cubo. Y esto lo discutiremos más adelante en esta guía, donde veremos la política del cubo.

El sitio web estará disponible en el punto final de AWS S3, que se parecerá a la siguiente URL.

Tenemos un enlace al repositorio de GitHub donde descargarás y utilizarás todos los archivos necesarios para completar esta guía paso a paso. ¿Estás preparado? Bien. Puedes seguir adelante e iniciar sesión en tu consola de AWS.

Crear un cubo de S3

Antes de que puedas crear tu sitio web estático, tienes que crear y configurar un cubo de S3. Cuando crees tu sitio web estático utilizando Amazon S3, tu sitio se almacenará dentro de ese cubo.

1. En tu Consola de AWS, navega al panel de S3 —> Crear cub o.

2. Proporciona un nombre de bucket único (mi-construcción-bucket-7Vftzchzw). Asegúrate de que el nombre de tu cubo es único. Los nombres de los cubos sólo pueden contener letras minúsculas, números y guiones. El nombre del cubo de S3 debe ser único en todo Amazon S3 para evitar que otra persona cree un cubo con el mismo nombre y sobrescriba tu sitio web. Además, tu ruta debe ser compatible con el DNS, ya que no puede haber dos dominios con el mismo nombre.

3. Desmarca la casillaBloquear todo el acceso público. Si quieres mantener tu sitio web privado, selecciona esta casilla. Si está seleccionada, sólo las cuentas de AWS autentificadas podrán acceder a tu sitio web. En este caso, desmarcaremos esta casilla para que nuestro ejemplo sea público. Así, cualquiera podrá recuperar nuestros archivos html del bucket de S3, y ver nuestra página web. 3. Selecciona la casillaReconozco que la configuración actual…

4. Haz clic en Crear cubo en la parte inferior de la página.

5. Obtendrás un mensaje verde que dice «Bucket creado con éxito» con los detalles de tu nuevo Bucket de S3. 6. Haz clic en el nombre de tu bucket —> Copiar ARN. El nombre de recurso de Amazon (ARN) es un identificador único para un recurso de AWS. Cuando creas un bucket de S3, Amazon genera un ARN único para el nuevo bucket. Para garantizar la seguridad de tus recursos de AWS, Amazon requiere que utilices tus propios identificadores únicos o los generados por Amazon cuando crees o modifiques recursos. Utilizarás este ARN para hacer un seguimiento de tu cubo y crear tu sitio web estático.

6. Haz clic en Subir —> Añadir archivos —> Selecciona los archivos que has descargado antes —> Subir.

Cargar tu sitio web es la parte más fácil de configurar un sitio estático utilizando Amazon S3. El proceso de carga puede tardar unos minutos en completarse. Una vez que haya finalizado, podrás ver el mensaje verde de éxito.

Habilitar el alojamiento de tu sitio web estático

Ahora que tu sitio web está subido a Amazon S3, tienes que habilitar tu sitio web para que pueda ser visto. El alojamiento de sitios web estáticos te permite servir páginas estáticas de HTML, CSS y JavaScript desde un servidor web que está diseñado para contenido estático. Es más rentable que las páginas web dinámicas (por ejemplo, PHP o ASP).

El alojamiento de sitios web estáticos puede utilizarse para servir diferentes tipos de archivos como imágenes, CSS, JS y otros archivos estáticos. Estos archivos no cambian con mucha frecuencia y son fáciles de servir a un coste realmente bajo.

1. Haz clic en Propiedades —> Alojamiento de sitios web estáticos —> Editar —> Habilitar.

2. Haz clic en Habilitar—> Elige el tipo de alojamiento como Alojamiento de un sitio web estático. 3.Rellena el documentoÍndice como index.html, el documento Error como error.html. 4. Desplázate hacia abajo y haz clic en Guardar cambios.

Cuando habilites el alojamiento de un sitio web, debes subir un documento índice. El documento índice es el primer archivo que los usuarios ven cuando acceden a tu sitio web utilizando el nombre de dominio raíz, por ejemplo, http://my-bucket.s3.amazonaws.com/.

Si no creas un documento índice, o si lo eliminas posteriormente, Amazon S3 devuelve una página de error 404 o un archivo índice por defecto. El archivo de índice por defecto puede mostrar el nombre del cubo, la fecha del último acceso y otra información genérica. El nombre del documento de índice distingue entre mayúsculas y minúsculas y debe coincidir exactamente con el nombre del documento de índice que subes a la raíz del sitio, así que asegúrate de que el nombre de tu documento de índice está escrito correctamente.

El documento de error es la página que los usuarios ven si se produce un error al intentar acceder a tu sitio web. Este archivo es opcional pero se recomienda. Si no subes tu propio documento de error personalizado, Amazon S3 devuelve una página de error 404 por defecto o el documento índice, si existe. El nombre del documento de error también distingue entre mayúsculas y minúsculas, así que asegúrate de que el nombre del documento de error que subas esté bien escrito.

3. Cuando habilites el alojamiento de sitios web estáticos para tu bucket con éxito, aparecerá un mensaje verde de Alojamiento de sitios web estáticos editado con éxito en el panel de AWS S3. También verás el punto final del bucket de tu sitio. Es el nombre de tu cubo, seguido de s3.website.yourregion.amazonaws.com.

4 . Si abres esa URL en tu navegador favorito, obtendrás un mensaje de 403 Prohibido. Eso es porque no se ha asignado la política adecuada. En el siguiente paso estableceremos una política adecuada para acceder a tu cubo.

Configurar la política adecuada para el cubo

Ahora que has habilitado el alojamiento de tu sitio web en Amazon S3, necesitas establecer una política de bucket para acceder a él. Una política de cubo es un conjunto de permisos para acceder a un cubo de Amazon S3. Para poder acceder a tu sitio web desde el público, tendrás que añadir una Política de Cubos para permitir el acceso público a tu cubo.

1. En tu panel de control de S3, haz clic en la pestaña Permisos —> Editar.

2. Copia y pega las líneas de este archivo JSON en el editor JSON. Sustituye <BUCKET_ARN> por el ARN real que has guardado antes.

• Versión: 2012-10-17 es la versión de la política del cubo.
• Declaración: PublicReadGetObject es la acción que se debe realizar en todos los objetos del cubo especificado.
• Principal: El elemento Principal especifica la cuenta de AWS, el usuario IAM o el grupo que está autorizado a realizar la acción especificada en el objeto. Si hay varios mandantes identificados en la declaración, debes especificar cuál de ellos puede «Realizar la acción» estableciendo el elemento Acción como Permitir o Denegar.
• Acción: El elemento Acción especifica el tipo de acceso permitido.
• Recurso: El elemento Recurso especifica el objeto al que se aplican los permisos.
• En este caso, configuramos una reglaPublicReadGetObject que permite a todo el mundo acceder a tu cubo y recoger cualquier objeto (s3:GetObject) del cubo. De ahí el asterisco * en la línea Principal. El asterisco * en la línea Recurso especifican que la Política de Cubos S3 se aplica a todos los objetos del cubo. Asegúrate de que después de editar la política, el asterisco debe estar al final como se muestra.

3. Haz clic en Guardar cambios cuando hayas terminado.

Ahora tu cubo es de acceso público, como se muestra a continuación. Puedes ver que tu política entra en vigor inmediatamente.

Probando tu página web estática

Ahora que has configurado tu política de cubos, puedes acceder a tus páginas web estáticas abriendo la URL del punto final en tu navegador.

1. Navega de nuevo a tu navegador donde abriste antes la URL del punto final del cubo S3. 2. Vuelve a cargar la URL del punto final del cubo de S3, y esta vez deberías ver que el error 404 ha desaparecido. Si ves el error 404 significa que algo está mal en la política de tu cubo. Tus páginas web estáticas se mostrarán en el navegador, como se muestra a continuación. Ahora deberías ver una versión HTML bien formateada de tu página.

2. También puedes probar la página web de error yendo a una URL inexistente, debería aparecer la página web de error que subiste anteriormente, como se muestra a continuación.

En esta guía, hemos cubierto cómo alojar tus sitios web estáticos en Amazon S3 de forma gratuita. Esta guía también ha cubierto todo el proceso de subir el sitio web, configurar la política de cubos adecuada y habilitar el alojamiento de sitios web estáticos. Esta guía es una forma sencilla de alojar un sitio web gratis a bajo coste. El coste que cobra Amazon S3 es muy bajo en comparación con otros servicios.