Amazon CloudFront con W3 Total Cache en WordPress

Para el que no conozca exactamente lo que  es un CDN tenemos un artículo publicado anteriormente donde explicamos exactamente lo que es un CDN o Content Delivery System.
Estos sistemas sirven básicamente para servir el contenido estático a través de distintos POPs, puntos de presencia o servidores distribuidos alrededor del mundo.

Nosotros normalmente utilizamos Amazon CloudFront, pero en este caso vamos a hablar de cómo implementar Amazon CloudFront en un sitio web WordPress utilizando para ello el plugin W3 Total Cache.
La razón de utilizar el plugin W3 Total Cache es que realiza la gestión automática de los buckets S3 que van a funcionar como origen y gestiona también el correcto funcionamiento de los CNAME que redireccionan a la dirección de CloudFront.

Evidentemente antes de comenzar con la configuración de Amazon CloudFront debemos instalar W3 Total Cache, y ya que está instalado deberíamos implementar el cache, ya que así 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ás 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”:

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

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

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

Lo siguiente que tenemos que hacer es configurar Amazon AWS para obtener 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 tendremos la posibilidad de aprovechar el Free Tier de Amazon, que incluye 50 GB de tráfico en Amazon CloudFront y 2.000.000 de peticiones al mes.
Después de crear la cuenta vamos a crear los credenciales de autentificación para que nuestro WordPress pueda acceder al API de Amazon CloudFront.

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

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

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

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

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 vamos a dejar ahí para después, pero cubierta:

Nos tenemos que dirigir al panel donde controlamos el DNS del dominio para añadir varios subdominios en registros CNAME, en este caso vamos a añadir los siguientes 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, normalmente solo se crean 5 subdominios, pero en este caso se trata de un sitio web que realiza muchas peticiones al servidor, por lo que vamos a intentar paralelizar al máximo las descargas de elementos al navegador del visitante.

Al rellenar esto ahora antes de nada lo que conseguimos es que al crear la distribución automáticamente se añadan los CNAME a la lista de CNAMEs permitidos para distribuir contenido.

Lo siguiente que vamos a hacer es darle permisos a esta nueva cuenta, concretamente 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 User Policy”:

Nos aparecerá algo como esto donde debemos buscar los siguientes dos elementos y pulsar el botón “Select”:

• Amazon S3 Full Access
• CloudFront Full Access

En ambas asignaciones de permisos debemos hacerlo por separado, es decir, primero “Amazon S3 Full Access” y posteriormente “CloudFront Full Access”, una primero y después la otra, por separado, y aplicando las políticas de seguridad.
Sin este paso no podremos continuar, es decir, nos fallara la creación del bucket en S3 y la creación de la distribución en CloudFront, ya que se necesitan permisos específicos para que W3 Total Cache pueda realizar las acciones por API.

Ahora vamos a pulsar el botón “Create distribution” en W3 Total Cache y debemos esperar a que se termine de crear, la ventaja de W3 Total Cache es que creara automáticamente todo lo necesario mediante API para que no tengamos que preocuparnos de nada, tan solo de esperar.

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 usar como CDN.
Mientras que se crea la distribución nos pondrá el estatus en progreso:

Cuando finalice se cambiara el “In Progress” por “Active”.

Lo siguiente que vamos a hacer es rellenar algunos datos más en W3 Total Cache, concretamente el nombre del subdominio en CloudFront y los CNAME de nuestro dominio que se usaran como mirror y desde donde se descargaran los estáticos.

En este caso el panel de control es VestaCP, el panel de control que utilizamos en nuestros servidores VPS optimizados (de hecho se trata de uno de nuestros servidores VPS optimizados), pero los DNS se gestionan desde los DNS de CloudFlare, por lo que debemos añadir los registros CNAME en CloudFlare:

Una vez que se propaguen los cambios DNS en el dominio podremos acceder al mirror de CloudFront a través de esos subdominios.

Para comprobar 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 dará un mensaje de error en rojo si falla algo o nos dará un “Test Passed” en verde si todo funciona correctamente.
Es importante comprobar si funciona antes de activar el CDN, ya que si no dejaremos de ver el sitio web correctamente.

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

También puede significar que es necesario añadir los subdominios CNAME a la lista de CNAMEs de Amazon CloudFront para la distribución en cuestión:

Para editar la lista de CNAMEs debemos editar la distribución en cuestión desde la configuración para la distribución.

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

IMPORTAR ELEMENTOS A AMAZON S3

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

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

El proceso de importado puede tardar más o menos dependiendo del número de elementos estáticos que tenga el sitio web.

Para olvidarnos de volver a hacer la importación y que se realice de forma automática cuando el CDN esté funcionando debemos cambiar algunas opciones en la página “CDN” de W3 Total Cache, concretamente debemos cambiar las siguientes 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 específica para SSL.
• Export changed files automatically: Con esto se importaran automáticamente a Amazon S3 los archivos modificados 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 perfectamente 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 cuenta varias cosas, la primera es que W3 Total Cache en combinación con Amazon CloudFront tiene dos formas diferentes de trabajar, la primera es cogiendo los archivos estáticos directamente desde el servidor del hosting y la segunda cogiéndolos desde Amazon S3. Personalmente me gusta más la segunda forma, ya que tiene un funcionamiento mucho más fluido cuando el tráfico es alto y a la vez nos ayuda a independizar un poco el CDN del hosting o servidor donde se aloja el sitio web.

Si necesitas 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.