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

¿Qué vamos a hacer?

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 en Estados Unidos. Funciona a través de HTTP/S utilizando protocolos basados en TCP. El uso de S3 es gratuito tanto para las operaciones 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 de cantidad en los buckets.

Amazon S3 ofrece una durabilidad del 99,999999999%, ya que los datos se almacenan en múltiples instalaciones para su redundancia. Amazon S3 utiliza la misma tecnología de replicación que Amazon emplea 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 pueden recuperarse 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 los 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.

La creación de un sitio web puede ser una tarea desalentadora. Hay tantas opciones y elecciones que es fácil sentirse abrumado. Pero, ¿y si pudiera crear un sitio web sin tener que preocuparse por el alojamiento, los nombres de dominio o la configuración de un servidor? Con Amazon S3, puede crear fácilmente un sitio web estático utilizando únicamente su ordenador y una conexión a Internet. En esta entrada del blog, le mostraremos cómo configurar su propio sitio web estático utilizando Amazon S3. También discutiremos algunos de los beneficios de usar Amazon S3 para su sitio web. Así que, ¡comencemos!

Requisitos previos

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

  • Una cuenta de Amazon AWS para configurar su sitio web en Amazon S3. Esta demo utiliza la cuenta gratuita de Amazon, que es gratuita y sólo tiene los enormes beneficios cuando se combina con un sitio web estático de Amazon S3.

¿Qué vamos a hacer?

En esta guía, crearemos y configuraremos un sitio web estático simple utilizando Amazon S3. También vamos a ir a través de la configuración de ese sitio web estático con una página de error personalizada. Esta guía le mostrará cómo crear un sitio web HTML, CSS, JavaScript que es 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 consiste en un archivo html donde se almacenan todas las páginas web. El alojamiento de sitios web estáticos no es nuevo, ha existido durante mucho tiempo.

Al usar un sitio estático, no tienes que preocuparte por 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í.

¿Qué vamos a hacer?

Para alojar un sitio web estático, se crea un cubo de Amazon S3.

¿Qué vamos a hacer?

Y luego subir su contenido a ese cubo.

¿Qué vamos a hacer?

El acceso público de lectura de su cubo S3 debe ser intencional. 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.

¿Qué vamos a hacer?

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

¿Qué vamos a hacer?

Tenemos un enlace al GitHub repositorio donde descargarás y utilizarás todos los archivos necesarios para completar esta guía paso a paso. ¿Está listo? Bien. Usted puede seguir adelante y entrar en su AWS Console.Advertisement

¿Qué vamos a hacer?

Creación de un cubo S3

Antes de crear su sitio web estático, debe crear y configurar un bucket de S3. Cuando cree su sitio web estático utilizando Amazon S3, su sitio se almacenará dentro de ese bucket.

1. En su Consola AWS, navegue a S3 salpicadero —> Crear cubo.

navegar a S3

Creación de un cubo S3

2. Proporcionar un único Nombre del cubo (mi-cubo de forja-7Vftzchzw). Asegúrese de que el nombre de su cubo es único. Los nombres de los buckets pueden contener sólo 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 su sitio web. Además, su ruta debe ser compatible con DNS, ya que no puede haber dos dominios con el mismo nombre.

Creación de un cubo de S3

3. Deseleccione el Bloquear todo el acceso público casilla de verificación. Si desea mantener su sitio web privado, seleccione esta casilla. Si está seleccionada, sólo las cuentas de AWS autenticadas podrán acceder a su 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. Selecciona la casilla Reconozco que la configuración actual… casilla de verificación.

Creación de un cubo S3

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

Crear cubo

5. Obtendrá un mensaje verde que dice «Cubo creado con éxito» con los detalles de su nuevo S3 Bucket. 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 crea un bucket de S3, Amazon genera un ARN único para el nuevo bucket. Para asegurarse de que sus recursos de AWS son seguros, Amazon le exige que utilice sus propios identificadores únicos o los generados por Amazon cuando cree o modifique recursos. Utilizarás este ARN para hacer un seguimiento de tu cubo y crear tu sitio web estático.

Creación de un bucket S3

6. Haga clic en Cargar —> Añadir archivos —> Seleccione los archivos que descargó anteriormente —> Cargar.

Anuncio

Creación de un cubo S3

La carga de su 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á ver el símbolo verde Realizado mensaje.

Creación de un cubo S3

Habilitación del alojamiento de su sitio web estático

Ahora que su sitio web está cargado en Amazon S3, necesita habilitar su sitio web para que pueda ser visto. El hospedaje de sitios web estáticos le permite servir páginas HTML, CSS y JavaScript estáticas 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 páginas web estáticas 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 costo realmente bajo.

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

Creación de un cubo S3

Habilitar el alojamiento de sitios web estáticos

2. Haga clic en Habilitar —>Elija Hospedaje tipo como Alojar un sitio web estático. Rellene el Documento índice como index.html, Documento de error como error.html. Desplácese hacia abajo y haga clic en Guardar cambios.

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

Si no creas un documento de índice, o si lo eliminas después, Amazon S3 devuelve una página de error 404 o un archivo de índice por defecto. El archivo de índice predeterminado 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 su 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úrese de que el nombre del documento de error que suba esté escrito correctamente.

Habilitar el alojamiento de sitios web estáticos

Habilitar el alojamiento de sitios web estáticos

3. Obtendrá un mensaje verde Editado con éxito el alojamiento de sitios web estáticos en el panel de AWS S3 cuando habilita el alojamiento de sitios web estáticos para su bucket con éxito. También puedes ver el punto final del bucket de tu sitio. Es el nombre de su cubo, seguido de s3.website.yourregion.amazonaws.com.

Habilitar el alojamiento de sitios web estáticos

4. Abra esa URL en su navegador favorito, obtendrá un 403 Prohibido mensaje. Esto se debe a que no se ha asignado la política adecuada. En el siguiente paso estableceremos una política adecuada para acceder a su cubo.

Habilitar el alojamiento de sitios web estáticos

Configurar la política de cubos adecuada

Ahora que ha habilitado el alojamiento de su sitio web en Amazon S3, necesita establecer una política de cubos 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 su sitio web desde el público, tendrá que añadir una política de cubo para permitir el acceso público a su cubo.

1. En su panel de control S3, haga clic en el botón Permisos ficha —> Editar.

Configuración de la política de cubos adecuada

2. Copie y pegue las líneas de este JSON archivo en el editor JSON. Reemplazar <BUCKET_ARN> con el ARN real que guardaste antes.

  • Versión: 2012-10-17 es la versión de la política de cubos.
  • Declaración: PublicReadGetObject es la acción que se va a realizar en todos los objetos del cubo especificado.
  • Principal: El elemento Principal especifica la cuenta de AWS, el usuario de IAM o el grupo al que se le permite realizar la acción especificada en el objeto. Si hay varios principales identificados en la declaración, entonces debe especificar cuál puede ‘Tomar 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 Resource especifica el objeto al que se aplican los permisos.
  • En este caso, establecemos un PublicReadGetObject regla que permite a todo el mundo acceder a su cubo y recoger cualquier objeto(s3:GetObject) en el cubo. De ahí el asterisco * en el Principal línea. El asterisco * en el Recurso especifique que la política del cubo S3 se aplica a todos los objetos del cubo. Asegúrese de que después de editar la política, el asterisco debe estar al final como se muestra.

Configuración de la política de cubos adecuada

3. Haga clic en Guardar cambios cuando haya terminado.

Configuración de la política de cubos adecuada

Ahora su cubo es públicamente accesible, como se muestra a continuación. Puede ver que su política entra en vigor inmediatamente.

Configuración de la política de cubos adecuada

Probando su página web estática

Ahora que ha configurado su política de cubos, puede acceder a sus páginas web estáticas abriendo la URL del punto final en su navegador.

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

Probando su página web estática

2. También puede probar la página web de error yendo a una URL no existente, la página web de error que cargó previamente debería mostrarse, como se muestra a continuación.

Probando su página web estática

Conclusión

En esta guía, hemos cubierto cómo alojar sus sitios web estáticos en Amazon S3 de forma gratuita. Esta guía también cubrió todo el proceso de carga del sitio web, la configuración de la política de cubo adecuada y la habilitación del alojamiento de sitios web estáticos. Esta guía es una forma sencilla de alojar un sitio web de forma gratuita a un bajo costo. El coste que cobra Amazon S3 es muy bajo en comparación con otros servicios.

¿Te ha ayudado este artículo? ¿Fue fácil de entender? Puedes compartir tu opinión dejando un comentario a continuación. Con este nuevo conocimiento en tu haber, ahora puedes automatizar el despliegue de sitios web estáticos en Amazon S3.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *