Este artículo explica cómo implementar una configuración de AWS CloudFront "origin pull" para servir recursos estáticos (comúnmente llamados "assets") de un sitio Wordpress de forma automática y transparente desde la CDN (Content Delivery Network) de Amazon, sin necesidad de emplear un bucket S3, subir los recursos al mismo ni mantenerlos actualizados.

En esta configuración se le indica a la distribución de CloudFront el dominio del sitio Wordpress como nombre de host del origen. De esta forma, cuando se le solicita un recurso a la distribución, si no se encuentra en la CDN se busca en el sitio original y queda en la caché de la misma a partir de ese momento. Esta técnica de pull evita tener que actualizar la distribución manualmente cada vez que se crea nuevo contenido (por ejemplo se suben nuevas imágenes).

Luego sólo hace falta emplear un plugin de Wordpress que reemplace el nombre de dominio para los recursos estáticos a fin de que sean cargados desde la CDN de CloudFront en lugar de desde el propio servidor Web. Esto reducirá notablemente la carga en el servidor Web y aumentará la velocidad de carga de los recursos estáticos al servirse desde locaciones próximas al usuario (con mayor ancho de banda y menor tiempo de respuesta).

Suponiendo que el dominio donde está hospedado el sitio Wordpress es "www.linuxito.com", se definirá un nuevo nombre de host para la distribución CloudFront que servirá el contenido estático, por ejemplo "assets.linuxito.com".

Creación de un certificado SSL para la distribución

El primer paso consiste en generar un certificado SSL para el nuevo nombre de host "assets.linuxito.com" desde la consola de ACM.

Especificar el nombre de dominio "assets.linuxito.com" y validar con Route 53 (se crea un registro en la zona pública de forma automática) si la zona se encuentra hosteada en AWS.

Cabe destacar que los certificados creados para uso en otros servicios de AWS (por ejemplo CloudFront) son gratuitos.

Creación de la distribución CloudFront

Desde la consola de CloudFront se procede con la creación de una nueva distribución.

En la configuración de la misma se especifica como origen el nombre de dominio del sitio Wordpress ("www.linuxito.com") y como CNAME (nombre de dominio alternativo para la distribución) el mismo que se utilizó en la creación del certificado SSL en el paso anterior ("assets.linuxito.com"). Luego seleccionar el certificado SSL correspondiente al CNAME ingresado (opción "Custom SSL Certificate").

En la configuración de la distribución se recomienda utilizar un comentario para identificar rápidamente en la lista de distribuciones de CloudFront y dejar el resto de los parámetros por defecto:

En la configuración del origen es recomendable utilizar la política de protocolo origen "Match Viewer":

En la configuración del comportamiento de la caché, permitir HTTP y HTTPS y utilizar una configuración legacy

Configuración del registro en la zona DNS

El último paso para tener lista nuestra distribución consiste en crear el registro CNAME "assets.linuxito.com" apuntando al nombre de host de la distribución en CloudFront, el cual se obtiene en la vista general de la distribución ("Domain Name").

El registro "assets" se debe crear tanto en la zona pública (para que tengan acceso los clientes del sitio Web) como en la zona privada (para que tenga acceso Wordpress en caso de que sea necesario).

Desde la consola de Route 53, abrir cada zona y crear el registro CNAME como un registro A en modo "Alias":

Configuración de Wordpress

Con la distribución de CloudFront (CDN) configurada y en funcionamiento, sólo resta configurar al sitio Wordpress para que todos los recursos estáticos sean servidos a través de la misma en lugar de directamente a través del propio servidor Web local. A tal fin es posible utilizar alguno de los muchos plugins disponibles. Se recomienda recurrir al plugin CDN Enabler desarrollado y mantenido por KeyCDN ya que es uno de los más utilizados y confiables.

Desde el panel de administración de Wordpress, instalar el plugin "CDN Enabler". Luego habilitarlo y abrir su configuración desde el enlace "Settings".

La configuración es muy simple, basta con ingresar el nombre de host de la distribución CloudFront ("assets.linuxito.com") en el campo "CDN Hostname":

Luego agregar en la lista "CDN Inclusions" las extensiones de assets faltantes tales como ".ttf" y ".woff". Finalmente guardar los cambios y validar. Debe aparecer el mensaje "Valid CDN Hostname" en color verde en al parte superior.

Al cargar la página nuevamente es posible comprobar que los recursos estáticos provienen de CloudFront en lugar del servidor Web verificando el nombre de dominio en las solicitudes y la cabecera x-cache:

Compartí este artículo