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”:

cloudfront wordpress

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:

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 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:

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

cloudfront wordpress

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”:

cloudfront wordpress

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

cloudfront wordpress

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.

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

cloudfront wordpress

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.

cloudfront wordpress

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:

cloudfront wordpress

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:

cloudfront wordpress

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:

cloudfront wordpress

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.

cloudfront wordpress

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:

cloudfront wordpress

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.

Share on twitter
Compartir en Twitter
Share on facebook
Compartir en Facebook
Share on pinterest
Compartir en Pinterest

¿Te gusta el blog?

Apúntate al boletín y te enviaremos los mejores artículos una vez al mes.

¿Te ayudamos?

Escríbenos si tienes dudas o necesitas una solución específica. Nuestros expertos te ayudarán en todo lo posible.

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 32 comentarios en

"Amazon CloudFront con W3 Total Cache en WordPress"

32 respuestas

  1. Hola, muy bueno el tutorial, me lo he implementado en dos blogs, pero tengo un par de problemas, luego de hacerlo todo en un blog me han desaparecido todas las imagenes destacadas, las imagenes dentro de los articulos si se ven, pero las miniaturas o imagenes destacadas no se visualizan, solo aparece un mensaje en blanco, cuando voy a pindong y doy click en la imagen que me marca en amarillo me aparece este mensaje:

    AccessDenied

    Access Denied

    055C01AC7368E6EA

    4pZi8kUm+zZhwr807bV/ATdJmt+wMm1DI++G7U9oPvzgXxW0gxhacB8wmYJiggwR

    Si puediera ayudarme le estare muy agradecido, necesito poner a funcionar esto pronto.

    En el otro blog el problema es que los atachtment no cargan, osea las imagenes, se queda en procesing y nunca terminan de cargarse, las demas carpetas si cargaron

    1. Hola Javier, la razón de tu problema es que no te esta subiendo las imágenes correspondientes, tienes que añadirlas a la seccion «Custom File List» en la seccion CDN de W3 Total Cache.
      Como podras ver en el listado de carpetas y archivos incluida por defecto en W3 en ese campo, puedes usar variables para componer las ruta.

      Un saludo.

      1. Muchas gracias por la respuesta, la estaba esperando ansioso

        Dejame ver si entendi:

        En custom file list aparece esto (entre otras cosas

        favicon.ico
        {wp_content_dir}/gallery/*
        {wp_content_dir}/uploads/avatars/*
        {plugins_dir}/wordpress-seo/css/xml-sitemap.xsl
        {plugins_dir}/wp-minify/min*
        {plugins_dir}/*.js
        {plugins_dir}/*.css
        {plugins_dir}/*.gif
        {plugins_dir}/*.jpg
        {plugins_dir}/*.png

        Eso significa que solo se subieron los avatares, en el caso de que quiera subir las carpetas con las imagenes deberia poner esto en custom files list?

        {wp_content_dir}/uploads/2013/*

        {wp_content_dir}/uploads/214/*

        {wp_content_dir}/uploads/2015/*

        Para que sera el * al final?

        1. Hola Javier, el * al final es para indicar que coja todos los elementos y los suba.
          Ten cuidado con esto:

          {wp_content_dir}/uploads/2013/*

          {wp_content_dir}/uploads/214/*

          {wp_content_dir}/uploads/2015/*

          Lo anterior, si tienes marcada la opcion de sobrescribir puede subirte mucho los costes de CloudFront y S3.

          Un saludo.

          1. Jejeje, efectivamente, era ese el problema, al subirse los archivos había dejado fuera una carpeta que le daba toda la configuración al theme, y pues si, cometí el error de tener marcada la opción de sobreescribir. Pues como dicen por allí, pagare mi novatada muy cara jejeje, por lo menos aprendi y ya para la próxima no lo haré. Gracias por tu pronta respuesta, me has salvado.

  2. Hola buen día tengo un problemilla, no logro hacer que me carguen las fuentes, ya cheque lo cors pero me sigue sin funcionar.

      1. Si se subieron porque puedo acceder directamente desde la url del cdn (http://cdn1.esbrillante.mx/… Pero en la consola del navegador dice «Solicitud desde origen distinto bloqueada: la política de mismo origen impide leer el recurso remoto…

  3. Que tal Alvaro, por igual a mi no me cargan la fuente «Awesome», ya estan cargados todos los archivos, la extension del archivo es .woff, tendrá algo que ver?

  4. Hola!, muy bueno el articulo.
    Ahora bien, soy bien nuevo en esto de wordpress, segui la guia completa y creo que quedo bien, el tema es que cuando hago el test de la pagina en la version movil si me dice que que saca de static1.xxx.com
    pero en la version normal no.
    Tenes idea que puede ser?

    De todos modos me voy a poner en contacto con ustedes para que me hagan un presupuesto de lo que necesitaria yo.

  5. He seguido el Tutorial al pie de la letra, Me da el Test passed en verde, todo Bien hasta que activo entonces cuando voy a la web, solo me cargan los textos no me carga mas nada. ya revise si todos los archivos del tema se cargan y si estan cargados correctamente pero no sucede nada. alguien podria decirme por que? gracias

  6. Hola Alvaro, seguí en su día el tutorial y me fue perfecto.. ¡Gracias! Pero en la web que tenemos (www.agente-k.com con Amazon Cloudfront + S3 + Cloudflare), si las fotos no están en el servidor, éstas no se muestran. En su defecto aparece el alt text y si haces clic sobre ellas, entonces sí aparece el lightbox con la imagen correcta y la url de Amazon. Puedes ver este comportamiento en la propia home, haciendo scroll y cargando thumbnails anteriores a diciembre de 2015. ¿Sabes de qué se puede tratar?

  7. Hola amigo, lo primero de todo, agradecerte de todo corazón por este estupendo tutorial muy bien explicado. He seguido paso a paso el tuto y todo bien, salvo que al cargar la página cuando activo el CDN ésta sale en blanco, no carga el theme, que puede estar pasando o que debo añadir a parte de todo lo que explicas en el vídeo y aquí para que cargue el theme? Aprovecho para hacerte otra pregunta, en mi web subo una media de 15.000 fotos al mes (realizo reportajes fotográficos deportivos e las carreras populares http://picrun.es) si consigo que funciones todo, las fotos las podría subir directamente al S3 y luego con un plugins de galería, como por ejemplo Next Gallery las podría mostrar?

  8. Hola Alvaro, antes que nada muchas gracias por esta publicación. Después de hacer todo me sigue saliendo este mensajes: Error: Distribution for origin «tunegocio.co.s3.amazonaws.com» not found.

    ¿Es posible que me falte algo? este es el domino: tunegocio.co

  9. Hola Alvaro, quería hacerte una consulta, si buena parte del contenido va a cargar desde los servicios de Amazon, ¿Sigue teniendo sentido contratar un hosting más los servicios de Amazon? ¿No sería más conveniente realizar directamente la instalación de wordpress en S3 + Cloudfront? Quizás por mi falta de conocimiento me confundo pero me da la impresión de que estaría contratando 2 servicios de hospedaje con un conseguiente doble gasto. Agradecido de antemano por tu atención.

    1. Hola Ramon, perdona la tardanza en contestar, he estado de viaje.

      Te cuento, son servicios diferentes, no vas a poder instalar un WordPress o una web «normal» en S3, para eso necesitas un hosting, S3 solo te deja almacenar cosas, y CloudFront te deja distribuir esas cosas por POPs de todo el mundo.

      Un saludo.

      1. Gracias Alavaro por tu respuesta.

        ¿Este proceso es fácilmente reversible? Es decir, si al probarlo los costos me resultaran prohibitivos podría fácilmente dejar de usar este CDN con W3 total Caché?

        1. Hola Ramon, es tan simple como desactivar el CDN desde el back-end de WordPress, en la configuración general de W3 Total Cache.

          Un saludo.

          1. Gracias sinceras Álvaro por tu disponer de valioso tiempo para responder mis dudas sobre Amazon Cloud Front con WordPress.

    1. El problema viene por el CSS, con algunos themes debes desactivar la carga de CSS desde el CDN.

      También puede ser un problema de CORS, es difícil detectarlo sin conocer el caso.

      Un saludo.

  10. Hola, muchas gracias por tu guía, muy buena. La seguí al pie de la letra pero solamente usando s3, sin cloudfront, todo va bien y el sitio puede subir archivos al bucket y todo, pero al cargar el sitio este no carga nada desde el cdn, sabes por que puede ser esto? muchas gracias.

    1. La razón es que tienes que usar CloudFront, ya que S3 no esta pensado para trabajar de esa forma, el CDN es CloudFront, no S3.

      Un saludo.

Deja un comentario

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

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies
covid19

#FrenarLaCurva