Tutorial CDN Gratis de AWS CloudFront para WordPress con LiteSpeed Caché

Tutorial CDN Gratis de AWS CloudFront para WordPress

En este tutorial explicamos como configurar la CDN de Amazon Web Services, CloudFront, en WordPress con el plugin de LiteSpeed Caché.

CloudFront es uno de los servicios de la Capa Gratuita de AWS, que puedes aprovechar para acelerar la velocidad de carga de tu sitio web WordPress prácticamente gratis, si tu sitio web es relativamente pequeño, con bajo o medio tráfico.

Paso a paso para configurar la CDN de Amazon en WordPress con LiteSpeed Caché

Preparación antes de iniciar la configuración en tu WordPress:

  • Crear una cuenta en AWS.
  • Tener el dominio configurado en CloudFlare o Route 53.
  • Tener instalado el plugin de LiteSpeed Caché.
1. Crear un certificado SSL/TLS en AWS:

Inicia sesión en la consola de AWS e ingresa a:

AWS Certificate Manager (ACM) > Solicitar un Certificado > Solicitar un certificado público.

Colocar el dominio precedido de un «asterisco» y un «punto» para que cubra subdominios: *.dominio.com.

Instalar Certificado SSL-TLS en AWS

Una vez solicitado el certificado, se debe validar por medio de un registro CNAME, que se debe copiar y pegar en el proveedor DNS, sea CloudFlare (Recomendado), Route 53 u otro.

Autenticar el dominio con un CNAME
insertar CNAME en CloudFlare
2. Crear Distribución en CloudFront:

Para crear una distribución en tu cuenta de AWS, debes ingresar a:

CloudFront > Distributions > Crear.

Lo más importante en este paso, será colocar nuestro dominio como Origen:

Crear distribución en CloudFront

En esta misma sección, se deben hacer 4 pasos adicionales:

  1. Seleccionar o configurar la Política de Caché.
  2. Definir la configuración de firewall (WAF).
  3. Crear el dominio alternativo de la distribución con nuestro dominio, por ejemplo: cdn.dominio.com.
  4. Seleccionar el Certificado creado en Certificate Manager.

En la política de caché, se recomienda configurar así:

  • Cache policy: CachingOptimized.
  • Origin request policy: CORS-CustomOrigin.
  • Response headers policy: SecurityHeadersPolicy.
Política de Caché de la distribución CloudFront CDN para WordPress

Posteriormente, seleccionamos la configuración de Firewall:

política de Firewall CloudFront para WordPress

Tutorial CDN Gratis de AWS CloudFront para WordPress LSCache

Por último, se configura el dominio alternativo para la CDN, en este caso, utilizamos el subdominio cdn.dominio.com, y se selecciona el certificado anteriormente creado:

crear dominio alternativo para la cdn en CloudFront y Certificado SSL

Una vez se crea la distribución, se procede a configurar el dominio alternativo en el proveedor DNS con la URL de la distribución:

Configurar el dominio alternativo de la CDN en CloudFlare
3. Configurar la CDN en WordPress con LiteSpeed Caché

Una vez hemos creado la distribución en CloudFront y configurado un dominio alternativo como cdn.dominio.com, se procede a realizar la comprobación y verificar que todo esté funcionando correctamente, así que se debe escribir la URL del dominio alternativo en el navegador y esta debe de redirigir al dominio, por ejemplo:

https://cdn.dominio.com debe redireccionar a https://dominio.com.

Después de esta comprobación, debemos insertar esta URL en el plugin de LiteSpeed Caché.

Ingresar a WordPress > LiteSpeed Caché > CDN:

cdn LiteSpeed Cache

En este paso, se activa el mapeo de CDN y se pueden seleccionar qué tipo de archivos y formatos se deben cargar desde la CDN:

  • Imágenes.
  • Archivos CSS.
  • Archivos JS.
  • Formatos como: .jpg, .mp4, etc.

Para finalizar, es muy importante configurar las URLs originales, donde se coloca el dominio de la siguiente forma:

//*.dominio.com/

urls originales y urls excluidas de la CDN

También, hay una sección donde se pueden excluir rutas que no queremos que se carguen desde la CDN.

Comprobar el funcionamiento de la CDN:

Para comprobar el funcionamiento de la CDN y verificar que los archivos y diferentes recursos del sitio web estén servidos desde CloudFront, debemos navegar el sitio web en un navegador como Chrome o Edge para que se suban todos los recursos con las primeras peticiones a la Distribución.

Cerramos la ventana, y abrimos el sitio web en una ventana de incógnito, le damos Clic derecho > Inspeccionar > Red (refrescar navegador) y seleccionamos los recursos que queremos verificar:

Comprobar que los recursos se carguen desde CloudFront

En conclusión, configurar una CDN para el sitio web puede ser beneficioso en varios aspectos:

  • Mejora considerablemente la velocidad de carga del sitio web.
  • Mejora la experiencia de los usuarios, sin importar su ubicación geográfica.
  • Ayuda a ahorrar recursos del servidor.
  • Ideal para sitios web de Alto Tráfico.

También, recomendamos el tutorial Iniciando con Impreza, uno de los mejores temas de WordPress donde puedes aprender a configurar un sitio web desde cero con un Tema superpotente, veloz, pero simple a la vez.

En el tutorial CDN Gratis de AWS CloudFront para WordPress, se responden algunas preguntas comunes:

  1. ¿Cómo configurar CloudFront en WordPress?
  2. ¿Cómo configurar una CDN en WordPress?
  3. ¿Cómo configurar CloudFront en LiteSpeed caché de WordPress?
  4. ¿Cuál es la mejor CDN gratis para WordPress?
  5. ¿Qué se una CDN?
  6. ¿Cómo configurar la CDN en LiteSpeed Caché de WordPress?
  7. ¿Cómo instalar un certificado SSL en AWS para mi dominio?
  8. ¿Cómo crear una distribución en CloudFront?
  9. ¿Cómo configurar mi página web como origen en CloudFront?
  10. ¿Cómo solucionar error Cors en CloudFront?
  11. ¿Cómo personalizar la URL de CloudFront con mi dominio?
Compartir en:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Rellena este campo

Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.
Tienes que aprobar los términos para continuar

Abrir Chat
¿Necesitas ayuda?
Hola 👋
¿Cómo podemos ayudarle?