Despliegue de una web estática con un 99,9 % de uptime usando Cloudflare y AWS S3

Bienvenido a esta guía sencilla para quienes buscan un 99,9 % de uptime y una solución de despliegue casi gratuita para sus webs estáticas, sin tener que configurar ni mantener un servidor propio. En este artículo lo haremos con Cloudflare como CDN y AWS S3 como almacenamiento de archivos.

Cloudflare tiene más de 150 centros de datos repartidos por todo el mundo, y su plan Basic (gratuito) es más que suficiente para la mayoría de webs. Aunque sus funciones son básicas, tendrás igualmente un 99,9 % de uptime, certificado SSL gratuito, protección DDoS, compresión Brotli, minificación automática de JS/CSS, ocultación de la IP de tu servidor de destino y una configuración de cache adecuada.

Decidimos escribir este artículo porque la mayoría de guías que hay en internet abruman con ajustes superfluos que no tienen ningún sentido y que parecen copiados de otras webs.

Requisitos previos

• Cuenta de AWS
• Cuenta de Cloudflare con tus NS ya migrados

La migración a Cloudflare es muy sencilla, porque tiene una UI/UX muy cuidada. Analiza tus registros DNS y te sugiere añadir los que ya existen.

Ventajas e inconvenientes

✅ CDN de alto rendimiento gratis;

✅ 99,9 % de uptime;

✅ Certificado SSL gratuito;

✅ Configuración y uso sencillos;

❌ No se puede usar S3 con Cloudflare si el nombre de tu web ya está en uso como nombre de bucket (lo explicamos más abajo);

❌ En el plan gratuito, las webs con https solo son compatibles con subdominios de primer nivel.

1. Crear el bucket de S3

Entra en S3 desde la consola de AWS y haz clic en «Create bucket».

En la siguiente pantalla, elige el nombre del bucket y la región. El nombre del bucket debe coincidir con el nombre de tu web. Es un requisito de AWS y, si no lo cumples, no podrás acceder a tu web a través de Cloudflare. La región da igual, porque Cloudflare cachea la web de todos modos.

A partir de esa pantalla, haz clic en «Next» hasta crear el bucket. No hace falta cambiar nada en estos ajustes. Nota: si en este paso te aparece el mensaje «Bucket name already exists», consulta la sección «Solución de problemas» al final del artículo.

2. Crear el usuario de IAM

Primero hay que instalar la herramienta de línea de comandos de AWS siguiendo este enlace. Cuando la tengas lista, ve a la pestaña IAM de AWS, luego a Users y a Add user. Asegúrate de marcar Programmatic access, porque este usuario no necesita más permisos que los de publicar el contenido de la web.

Por defecto, el usuario se crea sin permisos adicionales. Solo tienes que hacer clic en «Next» hasta llegar a la página «Success» con las credenciales del usuario

Descarga el .csv y guárdalo en un lugar seguro. Necesitarás estos datos para AWS CLI.

3. Asignar los permisos adecuados al usuario

Una vez creado el usuario, haz clic en él y, en la pestaña de permisos, pulsa «Add inline policy».

Verás la página del generador de políticas, con los siguientes ajustes:

Actions: en la sección Write, PutObject y DeleteObject; en la sección Permissions, PutObjectAcl

Resources: el ARN de tu bucket, que tiene este aspecto: arn:aws:s3:::test.example.com/*

En la vista JSON debería quedar así

Revisa la política y ponle un nombre. Con esto ya están configurados los permisos y puedes configurar aws-cli para subir tu web.

4. Desplegar con AWS CLI

Abre la terminal y ejecuta aws configure. Te pedirá las credenciales del archivo .csv que descargaste al crear el usuario de IAM. Introduce tu Access Key ID y tu Secret Access Key. El resto de campos son opcionales y basta con pulsar «Enter».

Y ya puedes desplegar tu web con AWS CLI. Ve a la carpeta de tu web, que debería contener index.html y el resto de archivos. Después ejecuta:

Ejemplo real:

Con este comando copiamos la carpeta al bucket remoto de S3.

• — recursive copia todas las carpetas anidadas;
• con — exclude puedes definir listas de archivos que no hace falta copiar, como archivos temporales, del IDE o del sistema operativo;
• — acl public-read es necesario para que tu web sea accesible.

Usamos copy en lugar de sync porque sync no funciona como cabría esperar y algunos archivos no llegan a copiarse al bucket aunque se hayan modificado.

5. Publicar la web

Para publicar por fin la web, ve a la lista de buckets de S3, haz clic en el tuyo y abre la pestaña Properties. Activa el alojamiento de sitios web estáticos e indica index.html como documento de índice. Copia la URL de la web y haz clic en «Save».

El último paso es ir a la configuración DNS de Cloudflare y añadir un nuevo registro CNAME. Como decíamos antes, el nombre del bucket tiene que coincidir con el CNAME. En el campo del nombre de dominio de Cloudflare, pon el enlace a tu web en S3 sin «http» ni «/», así: test.example.com.s3-website-us-east-1.amazonaws.com. En el campo del nombre, pon el nombre de tu web sin el dominio. Por ejemplo, para «test.example.com», el nombre sería solo «test».

Y ya está. Tu web debería estar accesible desde el dominio que hayas elegido.

Solución de problemas

• Comprueba que tienes activado el modo «Flexible» en la sección SSL de Cloudflare; si no, podrías tener problemas con el certificado SSL.
• Para redirigir del dominio con www al dominio sin www, asegúrate de hacerlo como subdominio de primer nivel (limitaciones de Cloudflare). Puedes hacerlo desde la sección Page Rules de Cloudflare o creando un nuevo bucket con una regla de redirección en S3.
• Si al crear el bucket te aparece el error «Bucket name already exists», esta solución no te sirve, porque en ese caso no podrás usar Cloudflare.