Como configurar el CDN Amazon CloudFront en WordPress

Autor: | 2017-04-10T12:50:45+00:00 Fecha: 21/12/2015|Categorías: WordPress|Comentarios: 35 comentarios

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.

[Total: 14 Promedio: 3.4]
Mi nombre es Alvaro Fontela, soy consultor Wordpress y blogger activo desde hace años. Co-Fundador de Raiola Networks, escribiendo sobre Wordpress en este blog día tras día.

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