Introducción

En la era digital actual, tener un sitio web funcional y bien estructurado es imprescindible para cualquier empresa o individuo que busque mantener una presencia en línea. En este blog, te guiaremos a través del proceso de alojamiento de un sitio web estático en un depósito de Amazon S3 y el uso de CloudFront para Content Delivery Network (CDN). Empecemos.

Esta guía asume que tienes un conocimiento básico de AWS y que tienes el código fuente de tu sitio web listo para ser utilizado.

Construiremos el código fuente con el framework Astro.

¿Por qué elegí alojar mi sitio web en un depósito S3? Porque esta es una solución flexible y de bajo mantenimiento en comparación con alojarlo en un servidor. Una vez que la configuración está completa, la actualización del sitio web solo requiere cargar una carpeta en un depósito. También es una solución muy económica, dependiendo del número de visitas, comenzando desde unos pocos centavos al mes en mi caso, para un sitio web personal con tráfico muy bajo.

Guía paso a paso

Los requisitos para esta guía:

• el código fuente de un sitio web estático
• una cuenta de AWS
• un DNS alojado en Route 53 (o el proveedor de su elección), nombre de dominio como your.website.url en este tutorial
• nombre del depósito como mi-nombre-del-depósito en este tutorial

1. Preparando el código fuente de su sitio web

Primero que todo, necesitaremos los archivos fuente para nuestro sitio web estático, construido con el marco de tu elección, o en HTML/JS/CSS básico si lo prefieres.

En mi caso, estoy desarrollando mi sitio web con el framework Astro con función de sitio estático.

npm install
npm run build

Esta línea de comando instala todas las dependencias de Nodejs necesarias y crea el código fuente final para el sitio web estático. Por defecto las fuentes se generan en la carpeta dist/. Este contenido se cargará en nuestro depósito S3 para alojarlo como un sitio web.

Es importante tener las siguientes páginas en la raíz de su sitio web.

• /index.html, la página de inicio de su sitio web
• /error.html, la página de error predeterminada, en el siguiente ejemplo también tengo una página 404.html, para redirecciones de error 404 no encontradas.

2. Configurar un sitio web estático en Amazon S3

Una vez que el código fuente del sitio web está preparado y las fuentes finales están construidas, el siguiente paso es crear un depósito en Amazon S3 y cargar los archivos fuente preparados. Este proceso implica configurar el depósito S3, habilitar el alojamiento del sitio web estático, ajustar los permisos y configurar la redirección de errores.

Configurar el depósito S3

Navega hasta Gestión de depósitos de Amazon S3 y crea un nuevo depósito:

• Nombre del depósito: mi-nombre-del-depósito
• Región de AWS de su elección
• Desmarca la opción “Bloquear todo el acceso público”, esto configura el depósito como público.
• Asegúrate de reconocer la configuración de seguridad y mantener las configuraciones predeterminadas.
• Una vez creado el depósito, carga los archivos fuente del paso 1

Consulta las mejores prácticas de nomenclatura de depósitos de AWS S3

Habilitación del alojamiento de sitios web estáticos

A continuación, habilita el alojamiento de sitios web estáticos en las propiedades del depósito.

• Ve a tu depósito, luego en la pestaña Propiedades
• Edita el alojamiento del sitio web estático y habilita.
• Tipo de alojamiento: “Alojar un sitio web estático”
• Índice del documento: index.html (o el nombre de su página de inicio en los archivos fuente)
• Documento de error: error.html (o su página de error específica en los archivos fuente) Guarda los cambios realizados.

Encontrarás la URL del sitio web estático para su depósito en la pestaña Propiedades, sección Alojamiento de sitios web estáticos

Encuentra más información útil en la documentación de AWS S3: Habilitación del alojamiento de sitios web

Ajustar permisos

En esta etapa, al navegar a la URL del sitio web, puedes encontrar un error “403 Forbidden with code : AccessDenied”. Resolveremos este problema ajustando los permisos en la edición del depósito.

• Ve a tu depósito y luego a la pestaña Permisos.
• Desplázate hasta la Política del depósito y edita
• Pega la siguiente política y configure tu depósito como recurso (reemplaza my-bucket-name con el nombre de tu depósito)
• Finalmente guarda los cambios.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket-name/*"
        }
    ]
}

Consulta la documentación de AWS S3: Configuración de permisos para el acceso al sitio web

Configuración de la redirección de errores (opcional)

Para brindar una mejor experiencia de usuario, puedes configurar la redirección automática a una página personalizada para páginas no existentes (error 404). Este proceso implica configurar reglas de redireccionamiento en la configuración de alojamiento de sitios web estáticos de tu depósito.

• Ve a tu depósito y luego en la pestaña Propiedades
• Edita la configuración de alojamiento de sitios web estáticos
• Pega la siguiente regla de redirección, adáptala según su configuración (reemplaza my-bucket-name.s3-website.eu-west-3.amazonaws.com con el host del sitio web de tu depósito S3)

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "my-bucket-name.s3-website.eu-west-3.amazonaws.com",
            "ReplaceKeyWith": "404.html"
        }
    }
]

Este paso es opcional. Consulta las posibles reglas de redireccionamiento en la documentación de AWS S3: Configuración de un redireccionamiento de página web

3. Configuración del certificado SSL y CDN

Después de configurar el sitio web estático en Amazon S3, el siguiente paso es proteger su dominio con un certificado SSL y configurar una red de entrega de contenido (CDN) utilizando Amazon CloudFront.

Solicitando un certificado SSL

Navega hasta el Administrador de certificados y solicita un nuevo certificado para tu dominio.

• Recuerda que el certificado debe estar en la región us-east-1, este es un requisito de Cloudfront por ahora (noviembre 2023)
• Solicita un certificado público
• Nombre de dominio: tu.sitio web.url
• Elige el método de validación que más te convenga (DNS o correo electrónico)
• Una vez solicitado el certificado el estado es “Pendiente de validación”

Sigue las instrucciones para el proceso de validación según el método elegido, por correo electrónico o DNS

Validación de certificado por Ruta 53

Si su DNS no está alojado en AWS Route 53, consulta la documentación de tu proveedor de DNS. Necesitarás el nombre CNAME y el valor en la página del certificado SSL

• Ve a la Ruta 53 bajo su DNS
• crea un nuevo tipo de registro CNAME
• copia el nombre y el valor del certificado SSL en el paso anterior

El proceso de validación puede tardar unos minutos en completarse.

4. Configuración de CDN y DNS para tu sitio web

Ahora que tenemos nuestro sitio web ejecutándose en nuestro depósito S3 y que tenemos un certificado SSL para nuestro DNS personalizado, podemos completar la configuración de Cloudfront CDN y finalmente configurar el nombre de dominio del sitio web. El nombre de dominio redirigirá a la distribución de Cloudfront.

Crea tu distribución Cloudfront

• Navega a CloudFront y crea una nueva distribución.
• En el dominio de origen, pega el host del sitio web de su depósito S3: my-bucket-name.s3-website.eu-west-3.amazonaws.com (reemplaza con el host del sitio web de su depósito S3)
• Elige redireccionamientos de solicitudes de HTTP a HTTPS
• Elige el certificado que acabas de validar
• Agrega un dominio alternativo, apuntando tu DNS your.website.url

Si no ves el certificado, podría ser una de las siguientes razones:

• Intenta actualizar la página o haz clic en el botón de actualización junto a la selección de certificados.
• ¿Es válido el certificado SSL?
• ¿Es el certificado SSL en la región correcta requerido por Cloudfront (us-east-1 a partir de noviembre de 2023)?

Configuración del nombre de dominio para la distribución de CloudFront

Si tu DNS no está alojado en AWS Route 53, consulta la documentación de tu proveedor de DNS. Redireccionarás tu nombre de dominio personalizado al nombre de dominio de la distribución de CloudFront que se encuentra en la pestaña Distribución y en la sección General. El nombre de dominio se verá algo así : <dsitribution ID>.cloudfront.net

Ruta 53

El último paso es configurar tu dominio para que apunte a la distribución de Cloudfront. -Ve a la Ruta 53

• Crea un nuevo registro
• El nombre es tu dominio personalizado your.website.url
• Selecciona Alias ​​y elige Alias ​​para distribución de CloudFront.
• Elige su distribución creada

Después de unos minutos, tu sitio web estará disponible a través de su dominio personalizado con el certificado SSL adecuado.

Otros proveedores de DNS

• Ve a tu proveedor de DNS
• Crea un nuevo registro A
• El nombre es tu dominio personalizado your.website.url
• El valor es el host de distribución CDN: <dsitribution ID>.cloudfront.net

Conclusión

En conclusión, alojar un sitio web estático en Amazon S3 es un método práctico, eficiente y de bajo costo para mantener una presencia en línea. El proceso implica crear el código fuente del sitio web, configurar el sitio web estático en Amazon S3, proteger el dominio con un certificado SSL y configurar una CDN con Amazon CloudFront.

Esta guía cubrió cada uno de estos pasos en detalle, desde configurar el depósito S3 y habilitar el alojamiento de sitios web estáticos, hasta ajustar los permisos y configurar la redirección de errores. Además, se refirió a los pasos para proteger su dominio, solicitar un certificado SSL y configurar una CDN. Finalmente, destacó la importancia de finalizar la configuración de DNS para garantizar que su sitio web esté disponible con el certificado SSL adecuado.