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 *