Lección 3 de 411 min
Cloudflare y su CDN
Qué es una CDN, cómo Cloudflare se coloca delante de tu web y cómo decide qué guardar en caché.
Tu servidor está en Virginia y una usuaria abre tu web desde Madrid. Cada imagen, cada hoja de estilos y cada script cruza el Atlántico de ida y vuelta: alrededor de 90 milisegundos solo de viaje, que se repiten con cada archivo y cada apretón de manos. Y si mañana tu web sale en las noticias, ese único servidor tendrá que atender a todo el mundo a la vez.
Una CDN resuelve las dos cosas guardando copias de tus archivos en servidores repartidos por el mundo. Cloudflare es una de las más usadas, y además se coloca delante de tu web como escudo y como plataforma para ejecutar código. En esta lección verás cómo funciona, qué guarda y qué no, y la configuración de HTTPS que más problemas causa.
Qué es una CDN y cómo se coloca Cloudflare delante
Qué es una CDN
Una red de servidores cerca de tus usuarios que guarda copias de tus archivos.
- PoP:
- Punto de presencia
- Origen:
- Tu servidor
Una CDN (Content Delivery Network, red de distribución de contenidos) tiene servidores en muchas ciudades, agrupados en PoPs (puntos de presencia). Cada usuario se conecta al PoP más cercano. Si ese PoP ya tiene una copia del archivo, responde al momento: es un HIT. Si no, la pide a tu servidor, al que se llama origen, la entrega y se la guarda para los siguientes: es un MISS.
La ganancia es doble. Baja la latencia, porque la señal tarda en recorrer la fibra y un PoP a 20 km responde mucho antes que un origen a 6000 km. Y baja la carga del origen, porque miles de peticiones del mismo archivo se convierten en una sola por PoP.
Cada PoP tiene su propia caché: que el archivo esté en Madrid no significa que esté en Tokio. Por eso la primera petición en cada ciudad suele ser un MISS.
Úsalo cuando
En casi cualquier web pública: imágenes, CSS, JavaScript, fuentes y descargas se benefician sin cambiar tu código.
Ten en cuenta
Una CDN no acelera lo que no puede guardar: una respuesta personalizada (tu carrito, tu perfil) sigue yendo al origen en cada petición. Y como hay copias repartidas, tras desplegar puedes ver versiones antiguas: se resuelve con nombres de archivo con hash o purgando la caché.
# Pide el mismo archivo dos veces y mira la cabecera de caché
curl -s -o /dev/null -D - https://ejemplo.com/logo.png | grep -i cf-cache-status
# cf-cache-status: MISS ← el PoP no lo tenía: fue al origen
curl -s -o /dev/null -D - https://ejemplo.com/logo.png | grep -i cf-cache-status
# cf-cache-status: HIT ← servido desde la copia del PoPCloudflare delante de tu web
Un proxy inverso global: los visitantes hablan con Cloudflare y Cloudflare, con tu servidor.
- Nube naranja:
- Proxied
- Nube gris:
- Solo DNS
Para usar Cloudflare cambias los servidores de nombres (nameservers) de tu dominio por los suyos, como viste en la lección de DNS, y desde entonces Cloudflare responde las consultas DNS. Cada registro tiene una nube: naranja (proxied) significa que el DNS devuelve direcciones IP de Cloudflare en lugar de la de tu servidor; gris (solo DNS) devuelve tu IP real y Cloudflare no interviene.
Con la nube naranja, Cloudflare actúa como proxy inverso: recibe cada petición, la filtra (ataques, bots), sirve desde caché lo que puede y reenvía el resto a tu origen. Usa anycast: las mismas direcciones IP se anuncian desde todos sus centros de datos, y el propio enrutamiento de Internet lleva a cada usuario al más cercano.
Úsalo cuando
Cuando quieres CDN, protección frente a ataques DDoS y HTTPS gestionado sin tocar tu servidor. El plan gratuito ya incluye lo esencial.
Ten en cuenta
El proxy solo funciona con HTTP y HTTPS en ciertos puertos: los registros de correo o de SSH deben quedarse en gris. Si tu IP real se conoce (registros antiguos, cabeceras de correo), un atacante puede saltarse Cloudflare: configura el cortafuegos del origen para aceptar solo las IP de Cloudflare.
ejemplo.com. A 203.0.113.42 ; naranja: se responde con IPs de Cloudflare
www.ejemplo.com. CNAME ejemplo.com. ; naranja
mail.ejemplo.com. A 203.0.113.50 ; gris: el correo no pasa por el proxy
ejemplo.com. MX 10 mail.ejemplo.com.¿Sabías que…?
Anycast es la razón por la que el resolvedor DNS público de Cloudflare, 1.1.1.1, responde rápido desde casi cualquier país: no hay un único servidor con esa dirección, sino cientos de centros de datos que la anuncian a la vez.
La caché de Cloudflare
Cloudflare no lo guarda todo: por defecto es prudente, porque cachear la página equivocada podría mostrar a un usuario los datos de otro. Prueba el simulador del final para ver cuánto cambia el tiempo de respuesta entre un MISS y un HIT.
Qué cachea Cloudflare por defecto
Archivos estáticos por su extensión, sí; HTML y JSON, no, salvo que tú lo indiques.
- Cabecera:
- cf-cache-status
- HTML por defecto:
- No se cachea
Sin configurar nada, Cloudflare guarda en caché los archivos con extensiones de contenido estático: imágenes (.png, .jpg, .svg, .webp), hojas de estilo, JavaScript, fuentes, PDF, vídeos y otras. El HTML y el JSON no se cachean por defecto: Cloudflare no puede saber si la página es igual para todos o si muestra el nombre del usuario conectado.
Respeta las cabeceras de tu origen: Cache-Control: max-age=86400 le dice cuánto tiempo puede guardar el archivo, y private o no-store le prohíben guardarlo. Cada respuesta lleva la cabecera cf-cache-status con el resultado: HIT, MISS, EXPIRED, BYPASS o DYNAMIC, que significa que esa respuesta no era apta para caché.
Úsalo cuando
Para entender por qué tu web «no va más rápida» tras activar Cloudflare: mira cf-cache-status; si dice DYNAMIC, esa respuesta no se está guardando.
Ten en cuenta
Lo que cuenta es la extensión de la ruta, no la cabecera Content-Type. Y si el origen responde con Cache-Control: private o no-store, Cloudflare no lo guardará aunque la extensión sea estática.
# Archivo con hash en el nombre: nunca cambia, guárdalo un año
GET /assets/app.3f9a1c.js
Cache-Control: public, max-age=31536000, immutable
cf-cache-status: HIT
# Página personal: que nadie la guarde
GET /mi-cuenta
Cache-Control: private, no-store
cf-cache-status: DYNAMICCache Rules, purga y Tiered Cache
Decide qué se guarda y cuánto tiempo, borra copias al desplegar y protege el origen.
- Purga:
- Por URL o completa
- Tiered Cache:
- Caché en dos niveles
Las Cache Rules cambian el comportamiento por defecto con condiciones sobre la URL, el host o las cabeceras: «las páginas de /blog/ son aptas para caché durante una hora» o «no cachees nunca /api/». En el panel actual sustituyen a las antiguas Page Rules para estos usos.
Cuando publicas una versión nueva, purgar borra las copias para que la siguiente petición vaya al origen. Puedes purgar URLs concretas o todo el sitio y, según el plan, también por prefijo, host o etiqueta. Purgarlo todo es tentador, pero deja vacíos todos los PoPs y el origen recibe de golpe todas las peticiones.
Con Tiered Cache, a un PoP que no tiene un archivo no le hace falta ir directo a tu origen: primero pregunta a unos pocos centros de datos «superiores» que hacen de caché intermedia. Así, un MISS en Sídney puede resolverse dentro de la red de Cloudflare, sin tocar tu servidor.
Úsalo cuando
Cache Rules para cachear HTML que es igual para todos (un blog, una documentación); purga en tu pipeline de despliegue; Tiered Cache cuando tu origen está lejos de la mayoría de tus usuarios o sufre con los picos.
Ten en cuenta
Cachear HTML de usuarios con sesión puede servir a alguien la página de otro: excluye las rutas privadas o las peticiones que llevan cookie de sesión. Mejor que purgar a menudo: nombres de archivo con hash (app.3f9a1c.js), que cambian solos en cada build.
# Purga dos URLs tras un despliegue, con la API de Cloudflare
curl -X POST "https://api.cloudflare.com/client/v4/zones/$ZONA_ID/purge_cache" \
-H "Authorization: Bearer $CF_API_TOKEN" \
-H "Content-Type: application/json" \
--data '{"files": ["https://ejemplo.com/", "https://ejemplo.com/logo.png"]}'Interactivo
El viaje de /logo.png con y sin CDN
Elige desde dónde navegas y dónde está tu servidor, activa o desactiva la CDN y pide el mismo archivo varias veces.
Tú
Madrid
PoP de la CDN
Madrid
Origen
Virginia (EE. UU.)
Últimas peticiones
Aún no has pedido nada.
¿Qué PoPs tienen copia?
- Madrid: vacío
- Ciudad de México: vacío
- Buenos Aires: vacío
- Tokio: vacío
- Sídney: vacío
Pulsa «Pedir /logo.png» varias veces y compara la primera petición con las siguientes.
Tiempos de ida y vuelta aproximados, sin contar la conexión TCP y TLS (que, con CDN, también se negocia con el PoP cercano).
HTTPS y la plataforma para desarrolladores
Modos SSL/TLS: Flexible, Full y Full (strict)
Cómo viaja el tráfico entre Cloudflare y tu origen, y por qué «Flexible» es una trampa.
- Recomendado:
- Full (strict)
- Origin CA:
- Gratuito, válido solo para Cloudflare
Con el proxy activo hay dos conexiones: del navegador a Cloudflare y de Cloudflare a tu origen. Cloudflare siempre presenta al visitante un certificado válido, así que el candado aparece en cualquier caso; el modo SSL/TLS decide qué pasa en el segundo tramo.
En Flexible, Cloudflare habla con tu origen por HTTP, sin cifrar. En Full, usa HTTPS pero acepta cualquier certificado, incluso caducado o autofirmado. En Full (strict), exige un certificado válido: uno público, como los gratuitos de Let's Encrypt, o un certificado Origin CA de Cloudflare, gratuito y de confianza solo para Cloudflare.
Flexible es una trampa por dos razones. El candado engaña: los datos, contraseñas incluidas, viajan en claro por Internet entre Cloudflare y tu servidor. Y si tu servidor redirige HTTP a HTTPS, entra en un bucle de redirecciones infinito (ERR_TOO_MANY_REDIRECTS).
Úsalo cuando
Siempre Full (strict). Si tu servidor aún no tiene certificado, instala un Origin CA de Cloudflare en unos minutos: no hay motivo para quedarse en Flexible.
Ten en cuenta
Full sin «strict» cifra, pero no comprueba con quién habla: alguien que intercepte el camino podría hacerse pasar por tu origen. Revisa el modo si heredas una zona antigua: muchos sitios se configuraron en Flexible hace años y nadie lo cambió.
# Origen preparado para Full (strict) con un certificado Origin CA
server {
listen 443 ssl;
server_name ejemplo.com;
ssl_certificate /etc/ssl/cloudflare/origen.pem;
ssl_certificate_key /etc/ssl/cloudflare/origen.key;
location / {
proxy_pass http://127.0.0.1:3000;
}
}La plataforma para desarrolladores
Workers, Pages, R2, D1 y KV: ejecutar código y guardar datos en la red de Cloudflare.
- R2:
- Compatible con S3, sin egress
- D1:
- SQLite
- KV:
- Clave-valor global
Cloudflare no es solo una CDN. Workers ejecuta tu JavaScript o TypeScript en sus centros de datos, cerca del usuario y sin servidores que gestionar, como viste en la lección de Cloudflare Workers. Pages publica webs estáticas y frontends desde Git, aunque en los últimos tiempos Cloudflare orienta cada vez más los proyectos nuevos hacia Workers con archivos estáticos.
Para datos, R2 es almacenamiento de objetos compatible con la API de S3 y sin tarifas de salida (egress): no pagas por los datos que se descargan, algo que en S3 puede pesar mucho. D1 es una base de datos SQL basada en SQLite, y KV, un almacén clave-valor global pensado para lecturas muy rápidas y escrituras poco frecuentes.
Todos se conectan a un Worker mediante bindings: propiedades de env que dan acceso al recurso sin claves ni URLs.
Úsalo cuando
Para lógica cerca del usuario (redirecciones, pruebas A/B, comprobar una sesión), APIs ligeras y archivos que se descargan mucho, donde R2 ahorra la transferencia.
Ten en cuenta
KV es eventualmente consistente: un cambio puede tardar en verse en otros lugares, así que no sirve para contadores ni saldos. D1 tiene límites de tamaño por base de datos, pensados para muchas bases pequeñas. Y los Workers no son un Node.js completo: algunos paquetes de npm necesitan el modo de compatibilidad con Node o no funcionan.
// Un Worker que sirve fotos desde un bucket de R2
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const clave = new URL(request.url).pathname.slice(1); // "fotos/gato.jpg"
const objeto = await env.FOTOS.get(clave); // FOTOS: binding al bucket de R2
if (!objeto) return new Response("No encontrado", { status: 404 });
const cabeceras = new Headers();
objeto.writeHttpMetadata(cabeceras); // Content-Type, Cache-Control…
return new Response(objeto.body, { headers: cabeceras });
},
};Interactivo
Modos SSL/TLS cara a cara
El tramo del navegador a Cloudflare siempre va cifrado; lo que cambia es el segundo tramo.
| Característica | Flexible | Full | Full (strict) |
|---|---|---|---|
| Navegador → Cloudflare | HTTPS | HTTPS | HTTPS |
| Cloudflare → origen | HTTP, sin cifrar | HTTPS | HTTPS |
| Certificado en el origen | No hace falta | Cualquiera, incluso autofirmado o caducado | Válido: público o de Origin CA |
| Comprueba la identidad del origen | No | No | Sí |
| Veredicto | Evítalo: el candado engaña | Mejor que Flexible, pero incompleto | El que debes usar |
Ponlo en práctica
Saber qué es cada cosa es la mitad del trabajo. La otra mitad es reconocer cuándo usarla.
Interactivo
¿Qué usarías?
Lee cada situación y elige la opción que mejor la resuelve. Fallar aquí no cuenta: es para practicar.
Tienes un blog alojado en un servidor en Fráncfort y los lectores de México y Argentina se quejan de que las fotos tardan mucho en cargar.
Para recordar
- Una CDN acerca copias de tus archivos a los usuarios: menos latencia y menos carga para el origen. Cada PoP tiene su propia caché.
- Con la nube naranja, Cloudflare es un proxy inverso delante de tu servidor; protege también el origen para que nadie llegue a él directamente.
- Por defecto se cachean los archivos estáticos, no el HTML; la cabecera
cf-cache-statuste dice qué ha pasado con cada respuesta. - Usa siempre Full (strict): Flexible muestra un candado mientras tus datos viajan en claro.
- Workers, R2, D1 y KV convierten la red de Cloudflare en un lugar donde ejecutar código y guardar datos.
Comprueba lo aprendido
Cuestionario
Responde las 5 preguntas para completar la lección.
1.Un usuario de Tokio pide
/logo.png, que ya se ha pedido mil veces desde Madrid. Sin Tiered Cache, ¿qué es lo más probable en el PoP de Tokio?2.¿Qué significa la nube naranja en un registro DNS de Cloudflare?
3.¿Por qué el modo SSL/TLS Flexible es peligroso?
4.Sin configurar nada, ¿qué guarda Cloudflare en caché?
5.Despliegas una versión nueva y purgas toda la caché justo en la hora de más tráfico. ¿Qué riesgo corres?