Como configurar el CDN Amazon CloudFront en WordPress

Actualmente como ya hemos dicho en varias ocasiones en los últimos meses, el uso de servicios CDN se está extendiendo a todo tipo de webs, ya no solo es un servicio reservado para sitios web con mucho tráfico que realmente lo usan para reducir la carga sobre el servidor principal que sirve las peticiones.

Existen muchos servicios de CDN en internet que puedes usar para tu web, en un artículo hemos listado 22 servicios de CDN, en otro caso también hablamos de como configurar Amazon CloudFront con W3 Total Cache sobre WordPress, en este caso vamos a hablar de algo similar, la utilización de Amazon CloudFront en WordPress usando un plugin llamado Domain Sharding.

amazon cloudfront

Lo primero que debemos tener es una cuenta en Amazon AWS, si registras una ahora mismo tendras a tu disposición el “free tier”, lo que quiere decir que si tu tráfico no es mucho, el uso de Amazon CloudFront te saldrá gratis.

Volviendo al tema, Amazon CloudFront es una excelente opción como CDN, ya que es uno de los más rápidos y además cuenta con la fama de los servicios de Amazon AWS, la cual es buena y por lo tanto es un CDN que ofrece garantías.
Amazon CloudFront puede trabajar de dos formas completamente diferentes:

  • Carga de contenidos desde el servidor de origen: Los contenidos se cargan desde el servidor web que aloja la web, es el método más simple, más barato y más recomendable para la mayoría de sitios web.
  • Carga de contenidos mediante Amazon S3: Los contenidos primero se cargan en Amazon S3 y posteriormente desde ahí se sirven a los visitantes a través de Amazon CloudFront.

En este artículo vamos a hablar del primer método mencionado, es decir, los contenidos se le proporcionarán a Amazon CloudFront a través del servidor de hosting que aloja el sitio web.

Antes de nada, te dejamos este video de todo el proceso para que puedas ver de forma más gráfica como se hace todo el proceso:

Pero como también nos gusta hacer guías por escrito para los que no lo entiendan bien y quieran ir paso a paso, también vamos a explicar el proceso paso por paso.

Lo primero que vamos a hacer es autentificarnos en Amazon AWS, para ello vamos a dirigirnos a esta pantalla de autentificación: https://portal.aws.amazon.com/gp/aws/developer/registration/

amazon cloudfront

Si no tenemos cuenta, la creamos y posteriormente volvemos a esta pantalla para continuar el proceso de implementación de Amazon CloudFront, en caso de tener ya cuenta, seguimos el proceso de implementación desde aquí.

Una vez que entramos con los datos a Amazon AWS, si son correctos, al no tener ningún servicio previamente configurado en AWS nos saldrá una ventana como esta:

amazon cloudfront

Ahora vamos a pulsar sobre el botón de arriba a la izquierda que pone “SERVICES” y podremos ver un desplegable similar a este:

amazon cloudfront

Ahora estaremos en la pantalla del servicio CloudFront, esta al ser una cuenta completamente vacía que no tiene ninguna distribución de Amazon CloudFront activa, presenta la siguiente apariencia:

amazon cloudfront

Evidentemente pulsamos el botón azul “Create Distribution” para comenzar el proceso de creación de una distribución para que nuestra web funcione con el CDN.

Lo siguiente que podremos ver es una pantalla como esta:

amazon cloudfront

Debemos pulsar sobre el botón azul “Get Started” de la sección “Web”, rodeada con un recuadro rojo en la imagen anterior.

Ahora nos aparecerá una pantalla como esta donde debemos definir algunos valores para nuestro sitio web:

cloudfront wordpress

En el video que hemos publicado al inicio de este artículo podrás ver como configurar mejor esta parte, por lo que si no lo has visto aun, te recomendamos verlo, pero aun así vamos a intentar hacer un resumen de como configurar esta parte.

En la sección “Origin Settings” rellenamos lo siguiente:

  • Origin Domain Name: Introduce el dominio de tu web SIN WWW, solo el dominio, por ejemplo tudominio.com
  • Origin Path: Podemos dejarlo vacío de forma predeterminada, en el 99% de los casos suele funcionar.
  • Origin ID: Es un valor personalizable que auto rellena la interfaz de Amazon CloudFront, puedes dejarlo por defecto sin problema.
  • HTTP Port: Déjalo por defecto en el 80.
  • HTTPS Port: Déjalo por defecto en el 443.

La sección “Default Cache Behavior Settings” la dejamos de forma predeterminada a no ser que sepamos exactamente lo que tocamos.

Bajamos hasta la sección “Distribution Settings” y configuramos lo siguiente:

  • Price Class: Debemos elegir que POPs del CDN queremos usar, podemos elegir entre solo usar los de un continente especifico o todos los del mundo, evidentemente cuantos más usemos más caro nos va a ser el servicio, pero lo más recomendable es usar todos los POPs para obtener la máxima eficiencia de CloudFront.
  • AWS WAF Web ACL: Este campo los dejamos por defecto.
  • Alternate Domain Names (CNAMEs): En este campo debemos introducir varios CNAME o subdominios que vamos a usar para cargar el contenido externo a través de Amazon CloudFront. Puedes introducir un CNAME en cada línea, aunque no los tengas creados, añádelos, ya que después tendrás la oportunidad de crearlos en el panel de control de tu hosting y apuntarlos a un host que te dará Amazon.
    Ejemplo: cdn1.midominio.com, cdn2.midominio.com, cdn3.midominio.com, cdn4.midominio.com, cdn5.midominio.com, etc…
  • SSL Certificate: Esta opción solo es importante si tu web usa un certificado SSL para servir datos mediante HTTPS, puedes usar el SSL de CloudFront o el de tu dominio.

El resto de opciones las dejamos por defecto y pulsamos el botón “Create Distribution” al final de la página de configuración.

Con esto, la nueva distribución se añadirá al listado en la interfaz de Amazon CloudFront, pero tardará un rato en crearse:

cloudfront wordpress

Mientras que se crea la nueva distribución (puede tardar fácilmente media hora), vamos a crear unos CNAMES apuntando a Amazon CloudFront.
Vamos a pulsar sobre el ID rodeado con un cuadro rojo en la imagen anterior, en la ventana que nos aparece podremos ver el nombre del host a donde tenemos que apuntar los CNAME:

cloudfront wordpress

Aquí el proceso es muy variable, debemos crear los CNAMEs (rodeados en verde) y apuntarlos al HOST (rodeado en rojo), el proceso depende sea cual sea nuestro DNS, no es lo mismo si usamos un servidor cPanel como DNS que si usamos CloudFlare como DNS.

La cuestión es que una vez creados los CNAME, tienen que estar apuntando a Amazon CloudFront.

Debemos esperar a que termine la creación de la distribución y cuando finalice podremos ver que el “Status” ya no pone “In Progress” y pone “Deployed”:

cloudfront wordpress

Ahora tenemos que preparar WordPress, el proceso no es difícil, en este caso solo debemos instalar un plugin, un plugin que muy pocos conoce y muy pocos usan, pero que es imprescindible para implementar carga paralela de elementos estáticos en WordPress.

El plugin que vamos a instalar en WordPress se llama Domain Sharding y podemos encontrarlo de forma totalmente gratuita en el repositorio de plugins de WordPress.
Puedes descargar y obtener más información acerca de Domain Sharding para WordPress en la siguiente dirección URL:

Una vez instalado Domain Sharding tendremos un nuevo menú en “Ajustes” que nos permitirá configurar Domain Sharding:

cloudfront wordpress

Vamos a configurar todas las opciones para que el plugin pueda funcionar:

  • Domain: En este caso yo voy a poner “http://cdn#.claudioinacio.com”, como puedes ver, la estructura que vamos a crear es cdn1, cdn2, cdn3, etc… Por lo que debemos poner los subdominios que hemos creado, pero sustituirmos el numero por #.
  • Max Domains: Ponemos el número de CNAMEs que hemos creado, en este caso del 1 al 5, por lo que pongo 5.
  • Redirect if the http host is not the blog domain: Marcamos esta casilla para proteger el SEO de contenido duplicado, con esto todos los subdominios redireccionarán al principal si un visitante intenta entrar.

Finalmente, tras configurarlo, en este ejemplo la configuración se queda así:

cloudfront wordpress

En la misma pantalla de configuración abajo hay un botón llamado “Verify domains”, si lo pulsamos podremos ver que nos da unos “errores”:

cloudfront wordpress

Esto es normal, ya que este plugin ha sido desarrollado para implementar carga paralela dentro del mismo servidor, por lo que intenta detectar que todos los subdominios apunten al mismo servidor, y al no ser así da error, pero no es un error para nada.

Ahora vamos a probar si el CDN está funcionando, para ello, si tenemos un plugin de cache, vaciamos cache y posteriormente vamos a usar PingDom Tools para probar si los elementos estáticos se cargan desde el CDN y la web se carga bien: http://tools.pingdom.com/fpt/

 

Como nota final también quiero decir que lo mismo que se hace con Domain Sharding también podemos hacerlo usando el plugin WP Rocket del que tanto hemos hablado, ya que tiene un módulo de CDN bastante potente que te ayudara a implementar la carga desde los subdominios incluso permitiéndonos elegir lo que se carga desde cada subdominio.

Finalmente tengo que agradecer a Claudio por dejarnos su blog claudioinacio.com para hacer el proceso de esta guía en un entorno real.

Si buscas a alguien para implementar un CDN en tu sitio web o para implementar Amazon CloudFront en tu web, puedes contactar con nosotros sin compromiso y te informaremos sobre 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 28 comentarios en

"Como configurar el CDN Amazon CloudFront en WordPress"

28 respuestas

  1. Hola amigo, soy Christian el de Youtube, pues justamente quería lo contrario, quiero subir todos las fotos a amazon s3 y que cloudfront las sirva desde ahí, que es lo que hice con tu anterior tutorial, pero no me carga el theme de la página no se por que, me podrías orientar por favor a que puede ser debido?

    1. Hola, es muy posible que tu tema sea complejo y requiera configurar algunas exclusiones. Mi recomendación es que te vayas a la sección CDN y desactives la carga de CSS y JS desde el CDN.

      Un saludo.

      1. He desactivado lo que me dices (CSS y JS) y se ve pero sin imágenes, desactivé Host attachments y ahí si me muestra la web bien.
        Estoy muy confundido, te ruego me orientes un poco:

        Si marco las opción Host attachments, al subir un archivo (en mi caso fotos) se van a ir directamente a S3 o crea una copia en el servidor y en S3?
        Por qué no me muestra las imágenes al marcar Host attachments?, si a darle al tes upload me marca bien (aquí screenshot : http://postimg.org/image/80… )

        Hay algún plugin que me recomiendes que haga el siguiente cometido: Cuando suba una imagen a mi blog, esa imagen quiero que se almacene directamente en S3 para no llenar el disco del server, o WP TOAL CHACE también realiza esto?

        Te rogaría me ayudes por favor, quiero configurar el poder subir las fotos a S3 para poder liarme con lo de la galería. Ya he hablado con tu socio y le he dicho que en cuanto termine la permanencia con 1and1 me voy con vosotros sin pensármelo. Ahora necesito salir de este cuello de botella para adelantar algunas cosas que quiero hacer en el blog y así, tenerlo configurado. Mil gracias por ayuda amigo, que sepáis que os voy a recomendar a todos mis contactos.

  2. Al final me doy por vencido, no quiero liarla. Lo que hice fue instalar el plugins WP Offload S3 y marcar la opción «borrar archivos del servidor» así los elimino del disco duro y sólo los tengo en S3. Gracias de todas formas.

  3. Gracias Álvaro, al final entre el vídeo del w3 donde ponías los CNAME en cloudflare, éste artículo y uno más en inglés para ponerlo con WP SUpercache parece que todo funciona bien. Ha valido la pena las horas de lectura y las agallas a poderla liarla xD. ¡Muchas gracias!

  4. Buenas tardes, segui parte de tu tutorial dado que no me estaba dando resultado el setear aws y el crear los cdns. Ahora bien, pude, anda mejor, pero tengo un pequeño problema al cual aún no pude encontrarle solución. Por ej el logo de la página no carga (apacere como imagen rota). Y si ingreso a view source y saco el link del logo, lo pongo en el navegador, me indica «página no encontrada», incluso pasa con otras imagenes (slider del home). Sabrías que puede llegar a ser? si quieres indicame a donde y te envió un mail con info de la url de la página y todo lo que pude ver.

    Gracias por los tutoriales!

    1. Hola Matt, con tan pocos datos no puedo decirte nada, pero en la mayoría de las ocasiones es un problema de URL querys o de algún tipo de problema de codificación.
      Si solo te ocurre en algunas imágenes, el problema posiblemente se encuentre ahí.

      Un saludo.

      1. Hola, gracias por la respuesta!

        No, es con todos los links.

        Estuve haciendo pruebas, y por ej con WP Super Cache si me toma los archivos desde el cname y mejora la velocidad, pero no me toma algunos css. Estoy tratando de ver porque algunos linkeos a los css estan mal hechos. Por ej: la imagen, muestra unos cuantos linkeos a css de couldfront, lo cual no esta bien linkeado, https://uploads.disquscdn.c

        Asimismo haciendo pruebar con W3TC, tenia un error en functions.php sobre gzip, que no pude solucionar, por eso decidi probar con WPSC. Ahora seguire con las pruebas.

  5. Gracias Alvaro por el excelente tutorial. Tengo una duda, en el caso de usar https, ¿cómo sería la configuración?

    Un saludo,

    1. Hola Tomás, la configuración es mas o menos similar, lo unico que debes instalar un SSL wildcard o varios SSD en CloudFront en caso de que vayas a usar CNAMEs, sino para que funcione debes usar el subdominio de CloudFront.

      Un saludo.

  6. Buenas amigo me sale este error? de que se debe.

    com.amazonaws.services.cloudfront.model.CNAMEAlreadyExistsException: One or more of the CNAMEs you provided are already associated with a different resource. (Service:

  7. Hola, como estas ? una consulta, ya cree todo, no tuve problemas.
    Si quisiera una web común, como me debería conectar para subir mi pagina,
    En realidad es una web de login genérico, eso se conecta a API rest, que también tengo todo en amazon.

    O sea, para que se entienda, quiero subir mi pagina web, a este cloudFront Distributions

    Saludos
    Eduardo

    1. Hola Eduardo, no entiendo bien tu pregunta, pero si quieres implementar CloudFront como CDN en tu web, esta guia te ayudara.

  8. Saludos,

    De la configuración de esta guía cuales son las opciones que debo configurar para HTTPS?

    Gracias de antemano.

    1. Exactamente igual, pero vas a tener que instalar el certificado SSL en CloudFront para los subdominios que crees, así que te recomiendo tener un wildcard.

      Un saludo.

Deja una respuesta

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