Publicar una web estática

Tu encargo y los archivos de partida

Vas a publicar una web ficticia sobre una jornada de herramientas para la nube. Tiene una página principal, una imagen y un documento de error. No hay formularios, bases de datos ni código que se ejecute en un servidor de tu cuenta.

Trabaja individualmente desde tu Learner Lab y con un bucket nuevo para esta web, sin conservar recursos de la página anterior. Si ya la publicaste en clase, utiliza los pasos como consulta y comprueba las rutas, el documento de error y la retirada de publicación.

Descarga los tres archivos en ZIP, extráelos y guárdalos en optativa-nube/aws-s3/sitio/ en tu equipo. También están disponibles por separado: index.html, error.html e imagen.svg. Si el navegador abre un archivo en vez de descargarlo, utiliza Guardar enlace como o guarda su contenido con el nombre exacto. No subas el ZIP sin extraer.

La imagen es el esquema del entorno que ya utilizaste en P00. Se reutiliza ese recurso; no necesitas buscar una fotografía ni descargar imágenes externas. Abre localmente index.html: deben aparecer texto e imagen, situada junto al HTML en la misma carpeta. No se instala Tailwind ni se utiliza una CDN.

Crear y cargar sin publicar todavía

1. Activa Learner Lab y abre su consola mediante el acceso AWS. Revisa saldo y tiempo; no entres con una cuenta de pago particular.
2. En S3, identifica recursos anteriores y crea un bucket aws-s3-web- con un sufijo propio de ocho caracteres aleatorios, sin datos personales.
3. Selecciona us-east-1, tipo General purpose, espacio Shared global namespace si aparece, Bucket owner enforced / ACL deshabilitadas, las cuatro BPA activas, versionado deshabilitado, SSE-S3 y Object Lock deshabilitado. No añadas replicación, KMS ni funciones adicionales.
4. En Objects → Upload → Add files, selecciona los tres archivos, no la carpeta sitio/. Deben quedar en la raíz como index.html, error.html e imagen.svg, con clase S3 Standard.
5. Comprueba sus claves exactas. Descarga index.html desde la consola y confirma que contiene el título de la jornada; la descarga autorizada no demuestra publicación pública.

Punto de control: un bucket nuevo, tres objetos y ninguna clave prefijada por sitio/. Si cargaste la carpeta completa por error, elimina solo esa carga equivocada y vuelve a subir los tres archivos a la raíz.

Activar el alojamiento y conceder lectura acotada

El servicio de alojamiento web interpreta una petición a la raíz como una solicitud al documento inicial. Subir un HTML por sí solo no configura esa función.

1. En Properties / Propiedades, localiza Static website hosting / Alojamiento de sitios web estáticos → Edit.
2. Activa Host a static website / Alojar un sitio web estático. Indica Index document: index.html y Error document: error.html, respetando mayúsculas y extensión. No configures redirección de todas las solicitudes. Guarda.
3. En Permissions → Block Public Access → Edit, conserva BlockPublicAcls e IgnorePublicAcls activas; desactiva únicamente BlockPublicPolicy y RestrictPublicBuckets en tu bucket web. Mantén las ACL deshabilitadas y guarda la confirmación solicitada.
4. Abre la política de la web. Sustituye las tres apariciones de NOMBRE_DEL_BUCKET por el nombre real del bucket. Revisa que solo autoriza s3:GetObject para index.html, error.html e imagen.svg.
5. En Bucket policy → Edit, pega el JSON adaptado y guarda. No lo subas como un cuarto objeto ni añadas permisos de escritura o listado. Si existe una política que no reconoces, revisa el recurso antes de sustituir nada.

La política limita los archivos públicos; no es necesario usar /* para todo el bucket. La publicación de nuevos archivos exigiría revisar conscientemente ese alcance. Los controles de cuenta u organización pueden impedir una política pública aunque cambies el bloqueo del bucket: si ocurre, registra el mensaje y detente, sin intentar alterar esos controles.

Comprobar el sitio desde fuera de la consola

En Properties → Static website hosting, copia el Bucket website endpoint real que muestra AWS. No lo construyas a mano ni lo confundas con la Object URL de index.html.

El endpoint web directo de S3 funciona por HTTP, no por HTTPS. Si el navegador fuerza HTTPS, comprueba el esquema de la dirección para esta prueba ficticia; no introduzcas datos sensibles. CloudFront con HTTPS sería una arquitectura posterior, no una opción que aparezca automáticamente por subir los archivos.

Abre una ventana privada y realiza estas pruebas:

Petición	Qué debes comprobar
Endpoint del sitio, sin añadir un archivo	Se sirve la página principal gracias a index.html configurado como documento inicial.
El mismo endpoint seguido de /index.html	Obtienes la misma página y el título previsto.
Imagen dentro de la página	Se carga imagen.svg mediante su ruta relativa y su permiso de lectura.
Endpoint seguido de /no-existe.html	Se produce una respuesta de error; si se sirve el documento personalizado, reconoces su texto.
Enlace «Volver a la página principal» desde ese error en la raíz	Regresas a index.html del mismo sitio.

El documento de error no es una redirección automática a /error.html. Puede ser el cuerpo de la respuesta de error manteniendo la dirección solicitada. Anota el mensaje y, si sabes consultarlo en las herramientas de red, el estado HTTP; no exijas que todos los navegadores muestren la misma pantalla. Algunos sustituyen el documento por una página propia. Abrir directamente /error.html comprueba que el archivo es legible, pero no demuestra por sí solo que esté configurado como documento de error.

Reto: actualizar y diagnosticar

Modifica localmente el título visible y cambia «Revisión del sitio: 1» por «Revisión del sitio: 2». Carga de nuevo solo index.html con la misma clave. No actives versionado para este reto. Comprueba el nuevo contenido mediante una petición nueva, descartando caché o una pestaña antigua.

Después explica qué revisarías si el texto aparece pero la imagen no. Comprueba clave y extensión del archivo, ruta src="imagen.svg", permisos del recurso y que no lo cargaste en una subcarpeta. No resuelvas el problema concediendo acceso público a todos los archivos de tu cuenta.

Síntoma	Revisión útil
Se descarga HTML en vez de mostrarse	Comprueba endpoint web frente a URL de objeto y Content-Type. En los metadatos del objeto HTML debe corresponder text/html; el SVG, image/svg+xml.
La raíz no abre	Revisa alojamiento habilitado, nombre del documento inicial y raíz de carga.
AccessDenied o Forbidden	Revisa clave, política acotada y controles BPA efectivos; no habilites ACL ni modifiques IAM.
No aparece tu documento de error	Confirma error.html, su permiso y la respuesta de una petición inexistente; diferencia navegador, configuración y acceso directo al archivo.
Ves la revisión antigua	Asegúrate de cargar el archivo correcto y realizar una petición nueva sin reutilizar la copia anterior.

Retirar la publicación y limpiar

1. Guarda resultados y recortes sin datos de cuenta. Identifica tu bucket y sus tres objetos; no selecciones recursos de otros trabajos.
2. Elimina la política pública que añadiste y reactiva las cuatro BPA en ese bucket. Deshabilita también el alojamiento estático desde Properties.
3. Haz una nueva petición fuera de caché: el contenido ya no debe quedar disponible mediante ese endpoint de práctica. Un archivo que ya descargaste o una página previamente abierta pueden seguir mostrándose localmente.
4. Vacía únicamente tu bucket. Comprueba el resultado, vuelve a Buckets y elimínalo confirmando su nombre. Este bucket tiene versionado deshabilitado y no contiene versiones históricas previstas.
5. Actualiza el inventario, confirma que desapareció y revisa el saldo o su actualización pendiente. Pulsa End Lab cuando hayas terminado de usar el laboratorio. Si el borrado falla, registra qué recurso queda antes de salir; End Lab no lo elimina.

A entregar

Añade a tu bitácora la tabla de las cinco peticiones, el cambio de revisión y una explicación breve de URL de objeto frente a website endpoint. Registra la retirada de publicación y la ausencia del bucket. Incluye como máximo dos recortes útiles: sitio funcionando y prueba de error o cierre, sin barra de cuenta. Una copia del HTML modificado puede acompañar al registro.

Fuentes: alojamiento estático, endpoints, permisos y documentos de error.