Para el que no conozca exactamente lo que es un CDN tenemos un artículo publicado anteriormente donde explicamos precisamente lo que es un CDN o bien Content Delivery System.
Estos sistemas sirven esencialmente para proporcionar el contenido estático por medio de diferentes POPs, puntos de presencia o servidores distribuidos alrededor del planeta.

Nosotros generalmente empleamos Amazon CloudFront, pero en este caso hablaremos de de qué forma incorporar Amazon CloudFront en un sitios WordPress usando para ello el plugin W3 Total Cache.
La razón de emplear el plugin W3 Total Cache es que realiza la gestión automática de los buckets S3 que van a marchar como origen y gestiona también el adecuado funcionamiento de los CNAME que redireccionan a la dirección de CloudFront.

Evidentemente ya antes de iniciar con la configuración de Amazon CloudFront debemos instalar W3 Total Cache, y ya que está instalado deberíamos implementar el cache, ya que de este modo lo aprovechamos.
Si buscas un servidor VPS preparado para utilizar el cache de W3 Total Cache en Memcached puedes consultar los precios de nuestros servidores VPS optimizados con VestaCP.

Antes de nada, quizá te interese ver todo paso a paso a través del siguiente videotutorial:

CONFIGURAR W3 TOTAL CACHE

Primero vamos a dirigirnos a la sección General Settings” de W3 Total Cache, a la sección CDN”:

cloudfront wordpress

Debemos elegir Amazon CloudFront” en el bloque Origin Push” en el desplegable y pulsamos el botón azul Save all settings”, de momento no marcamos la casilla CDN” como Enable puesto que por el momento no vamos a activar CloudFront hasta tenerlo plenamente configurado.

Vamos a dirigirnos a la sección de CDN de W3 Total Cache, para esto vamos a utilizar el menú de Performance” que se colocan en el panel de WordPress cuando instalamos W3 Total Cache:

cloudfront wordpress

Ahora nos dirigimos a la sección Configuration”, donde debemos configurar los datos de autentificación de la cuenta de Amazon AWS.

cloudfront wordpress

Lo siguiente que tenemos que hacer es configurar Amazon AWS para conseguir los datos que debemos insertar en W3 Total Cache.

CONFIGURAR AMAZON CLOUDFRONT

Lo primero que vamos a hacer es crearnos una cuenta en Amazon AWS, si es una nueva cuenta vamos a tener la posibilidad de aprovechar el Free Tier de Amazon, que incluye cincuenta GB de tráfico en Amazon CloudFront y dos mil de peticiones por mes.
Después de crear la cuenta vamos a crear los credenciales de autentificación a fin de que nuestro WordPress pueda acceder al API de Amazon CloudFront.

En el panel donde se muestran todos y cada uno de los servicios de Amazon AWS nos dirigimos a IAM ya antes de nada:

cloudfront wordpress

Vamos a dirigirnos a la sección Users” y pulsamos sobre el botón Create New Users”:

cloudfront wordpress

Durante la creación del usuario nos aparecerán los nuevos credenciales de acceso para el nuevo usuario:

cloudfront wordpress

Las credenciales tachadas en la imagen anterior son las que tienes que poner en W3 Total Cache:

cloudfront wordpress

Cuando las tengamos rellenadas pulsamos sobre el botón azul Save all settings” para que se guarden las credenciales de acceso.

Ahora vamos a cubrir una parte que dejaremos ahí para después, mas cubierta:

cloudfront wordpress

Nos tenemos que dirigir al panel donde controlamos el DNS del dominio para agregar múltiples subdominios en registros CNAME, en este caso vamos a incorporar los próximos 7 subdominios de CDN:

  • cdn1.midominio.es
  • cdn2.midominio.es
  • cdn3.midominio.es
  • cdn4.midominio.es
  • cdn5.midominio.es
  • cdn6.midominio.es
  • cdn7.midominio.es

Evidentemente debemos cambiar midominio.es” por nuestro dominio, generalmente solo se crean cinco subdominios, mas en un caso así se trata de un sitios que realiza muchas solicitudes al servidor, con lo que vamos a intentar paralelizar al límite las descargas de elementos al navegador del visitante.

Al rellenar esto ahora antes de nada lo que logramos es que al crear la distribución automáticamente se agreguen los CNAME a la lista de CNAMEs tolerados para repartir contenido.

Lo próximo que haremos es darle permisos a esta nueva cuenta, específicamente vamos a darles permisos de control total en Amazon S3 y control total en Amazon CloudFront.
Para ello nos dirigimos a la sección Users” y pulsamos sobre el botón azul Attach Usuario Policy”:

cloudfront wordpress

Nos aparecerá algo como esto donde debemos buscar los próximos 2 elementos y pulsar el botón Select”:

  • Amazon S3 Full Access
  • CloudFront Full Access

cloudfront wordpress

En ambas asignaciones de permisos debemos hacerlo separadamente, o sea, primero Amazon S3 Full Access” y más tarde CloudFront Full Access”, una primero y después la otra, separadamente, y aplicando las políticas de seguridad.
Sin este paso no podremos proseguir, esto es, nos fallara la creación del bucket en S3 y la creación de la distribución en CloudFront, ya que se precisan permisos específicos a fin de que W3 Total Cache pueda efectuar las acciones por API.

Ahora vamos a pulsar el botón Create distribution” en W3 Total Cache y debemos aguardar a que se termine de crear, el beneficio de W3 Total Cache es que creara de forma automática todo lo preciso a través de API para que no tengamos que preocuparnos de nada, solo de esperar.

cloudfront wordpress

Este proceso en el que se crea el bucket en Amazon S3 y la distribución en Amazon CloudFront de forma automática, puede tardar entre 10 minutos y 25 minutos dependiendo de las localizaciones elegidas para utilizar como CDN.
Al paso que se crea la distribución nos va a poner el estatus en progreso:

cloudfront wordpress

Cuando concluya se cambiara el In Progress” por Active”.

Lo próximo que haremos es rellenar algunos datos más en W3 Total Cache, específicamente el nombre del subdominio en CloudFront y los CNAME de nuestro dominio que se usaran como mirror y lugar desde donde se descargaran los estáticos.

cloudfront wordpress

En un caso así el panel de control es VestaCP, el panel de control que usamos en nuestros servidores VPS optimizados (de hecho se trata de uno de nuestros servidores VPS optimizados), pero los DNS se administran desde los DNS de CloudFlare, por lo que debemos agregar los registros CNAME en CloudFlare:

cloudfront wordpress

En el momento en que se propaguen los cambios DNS en el dominio vamos a poder acceder al mirror de CloudFront a través de esos subdominios.

Para revisar que todo está correcto y que podemos empezar a utilizar Amazon CloudFront en nuestro WordPress, puedes pulsar el botón Test S3 upload & CloudFront distribution” esto nos va a dar un mensaje de fallo en colorado si falla algo o nos dará un Test Passed” en verde si todo marcha correctamente.
Es importante comprobar si marcha ya antes de activar el CDN, puesto que si no dejaremos de ver el sitio web apropiadamente.

Frente a un mensaje como este deberíamos aguardar a que finalizara la propagación DNS:

cloudfront wordpress

También puede representar que es preciso incorporar los subdominios CNAME a la lista de CNAMEs de Amazon CloudFront para la distribución en cuestión:

cloudfront wordpress

Para editar la lista de CNAMEs debemos editar la distribución endesde la configuración para la distribución.

Cuando la prueba nos responda con el mensaje Test Passed” en verde, vamos a poder activar el CDN en la configuración general de W3 Total Cache.

IMPORTAR ELEMENTOS A AMAZON S3

Antes que CloudFront como CDN sea el responsable de subir los archivos a la red de distribución de contenidos, debemos importar los ficheros estáticos a Amazon S3 utilizando W3 Total Cache, esta acción posteriormente la realizase de forma automática con unos cambios que haremos.

cloudfront wordpress

En la precedente foto podemos ver los elementos que podemos elegir para importar y proporcionar a través del CDN. La pantalla de importar elementos es algo como esto:

cloudfront wordpress

El proceso de importado puede tardar aproximadamente dependiendo del número de elementos estáticos que tenga el sitio.

Para olvidarnos de volver a hacer la importación y que se realice de forma automática cuando el CDN esté marchando debemos mudar algunas opciones en la página CDN” de W3 Total Cache, concretamente debemos mudar las próximas funciones:

  • Force over-writing of existing files: Con esto sobreescribiremos los archivos en Amazon S3 con los archivos actualizados de nuestra web, es recomendable tenerla marcada, aunque al tenerla marcada y activada estemos consumiendo algo más de recursos en Amazon S3.
  • Disable CDN on SSL pages: Con esto evitaremos muchos problemas, es recomendable tenerlo desactivado a no ser que realicemos la configuración concreta para SSL.
  • Export changed files automatically: Con esto se importasen automáticamente a Amazon S3 los ficheros cambiados en los artículos y páginas de WordPress, por defecto se comprobara cada 3600 segundos

Al marcar estas opciones el CDN debería funcionar de manera perfecta y en el caso de WordPress sin SSL no debería dar ningún tipo de problema.

CONCLUSIONES SOBRE W3 TOTAL CACHE Y CLOUDFRONT

Debes tener en consideración varias cosas, la primera es que W3 Total Cache en combinación con Amazon CloudFront tiene 2 formas diferentes de trabajar, la primera es cogiendo los archivos estáticos de forma directa desde el servidor del hosting y la segunda cogiéndolos desde Amazon S3. Personalmente me gusta más la segunda forma, puesto que tiene un funcionamiento mucho más fluido cuando el tráfico es alto y al unísono nos ayuda a independizar un poco el CDN del alojamiento o bien servidor donde se aloja el sitio.

Si precisas ayuda para implementar Amazon CloudFront o cualquier otro CDN en tu sitio web puedes contactar con nosotros sin compromiso y te informaremos de nuestras tarifas y nuestra disponibilidad.