Configurar un CDN para WordPress con AWS

El otro día configuré un CDN para la página. No es que realmente lo necesite, dado que no tengo demasiadas visitas, pero quería probarlo para ver el funcionamiento, además de que gracias al CDN la carga en el servidor se ve reducida porque todas las imágenes que subo a la página web se sirven desde el CDN. Así que en esta entrada indicaré los pasos que seguí para configurar el CDN utilizando la plataforma Amazon Web Services (AWS), concretamente S3 y Cloudfront.

Qué es un CDN

Un CDN (Content Delivery Network o Red de Entrega de Contenidos) es una red de servidores colocados normalmente en diferentes países, que contienen copias de datos, de forma que dependiendo desde dónde se acceda a un sitio web, este muestre los datos del servidor más cercano, para reducir ancho de banda y aumentar la velocidad de carga.

Algunos beneficios importantes de un CDN son por ejemplo un menor tiempo de respuesta, una disminución de la carga de red y el 100% de disponibilidad de la información en caso de caída de uno de los servidores.

Pasos para configurar un CDN para WordPress

Para poder utilizar un CDN con WordPress yo elegí utilizar la plataforma Amazon Web Services (AWS), principalmente por los precios, que no son fijos, sino que se calculan dependiendo del uso, y como esta página web no tiene miles y miles de visitas, apenas notaré el precio, y si finalmente decido prescindir del CDN, no habré gastado media fortuna.

La verdad es que el procedimiento no es complicado y se divide principalmente en los siguientes puntos:

  1. Crear un Bucket en S3.
  2. Crear una Distribución en Cloudfront.
  3. Creación de un Usuario IAM con acceso al S3.
  4. (Opcional) Creación de un dominio o subdominio.
  5. Instalación y configuración de los dos plugins necesarios en WordPress.

Empezemos!

Crear un Bucket en S3

Para crear un Bucket en S3 nos dirigimos a http://aws.amazon.com/es/ y nos registramos en caso de no estarlo todavía. Una vez que estemos registrados y hayamos iniciado sesión accedemos a la Consola AWS, buscamos el servicio S3 y allí creamos un Bucket nuevo. Nos pedirá que introduzcamos un nombre (recomiendo no usar nada demasiado complicado) y elegir una región. Los precios varían dependiendo de la región que elijamos. Yo personalmente creo que lo más lógico es elegir la región más cercana a la mayoría de los visitantes que visiten la página web.

Una vez hecho esto, ya tendremos un Bucket creado en S3 y podremos seguir con el siguiente paso.

Crear una Distribución en Cloudfront

Este es el paso más largo de todo el proceso. Primero, nos dirigimos a la Consola AWS y buscamos el servicio Cloudfront (está en la categoría “Storage & Content Delivery). Pulsamos sobre Create Distribution y nos darán dos métodos de entrega entre los que elegir. Elegiremos el método Web.

Ahora lo primero que haremos será configurar el origen de de la información, es decir, el origen desde el cual se mostrará el contenido. Si hacemos click sobre el campo de texto de Origin Domain Name desplegará una lista en la que aparecerá el Bucket en S3 que hemos configurado anteriormente. Lo seleccionamos y se generará también el Origin ID. Para que los datos no sean accesibles de forma pública, sino que requieran pasar por la distribución Cloudfront, seleccionamos “Yes” en Restrict Bucket Access. Ahora necesitamos una identidad de acceso, y actualizar las políticas de nuestro Bucket, y para que Amazon lo haga por nosotros seleccionamos “Create a New Identity” en Origin Access Identity y “Yes, Update Bucket Policy” en Grant Read Permissions on Bucket.

Nueva Distribucion 3

A continuación el en el apartado Default Cache Behavior Settings no he realizado ningún cambio, lo he dejado todo como estaba por defecto, pero más abajo, en Distribution Settings sí he realizado algunas modificaciones. En Price Class he seleccionado “Use all Edge Locations” porque las variaciones de precio en estos momentos básicamente no me afectan (los precios varían dependiendo de la clase que se escoja).

El siguiente apartado es importante. En Alternate Domain Names (CNAMES) podemos especificar un subdominio (o subdominios) personales con el cual accederemos al Bucket. Dado que Cloudfront nos proporciona un dominio largo formado por una combinación de números y letras, yo preferí poder un subdominio personal que me fuera más fácil de usar.

El resto de opciones las dejé por defecto.

Nueva Distribucion 4

Pulsamos sobre Create Distribution  y ya tendremos otro paso completado!

En caso de no especificar un subdominio personal, para saber el dominio que Cloudfront ha generado, en el panel principal de las distribuciones pulsamos sobre el ID de nuestra distribución y nos aparecerán los datos y la configuración de la misma. Ahí, en la primera pestaña (general) veremos el Domain Name.

Nueva Distribucion 5

Creación de un usuario IAM con acceso al S3

Volvemos a la Consola AWS y buscamos el servicio IAM, nos dirigimos a Users y pulsamos sobre Create New Users. Nos pedirá que introduzcamos un nombre usuario y a continuación nos darán las credenciales del usuario creado. Es muy importante que guardemos esas credenciales, dado que es el único momento en el que Amazon nos las proporcionará. Podemos copiarlas, o darle a Descargar.

Ahora que tenemos el usuario creado hay que asignarle unas Políticas. IAM nos ofrece una gran variedad entre las que elegir, pero encontré una por Internet y decidí utilizar esa. Para asignar una Politica al usuario pulsamos sobre el y en Permissions hacemos click sobre Attach User Policy. A continuación en mi caso seleccioné Custom Policy y le di un nombre (en mi caso CDN-Policy), pegué la política en el recuadro y pulsé sobre Apply Policy.

La política en concreto que utilicé yo fue la siguiente:

{
 "Statement": [
 {
 "Effect": "Allow",
 "Action": [
 "s3:ListBucket",
 "s3:GetBucketLocation",
 "s3:ListBucketMultipartUploads"
 ],
 "Resource": "arn:aws:s3:::NOMBRE-DE-NUESTRO-BUCKET",
 "Condition": {}
 },
 {
 "Action": [
 "s3:AbortMultipartUpload",
 "s3:DeleteObject*",
 "s3:GetObject*",
 "s3:PutObject*"
 ],
 "Effect": "Allow",
 "Resource": [
 "arn:aws:s3:::NOMBRE-DE-NUESTRO-BUCKET/*"
 ]
 },
 {
 "Effect": "Allow",
 "Action": "s3:ListAllMyBuckets",
 "Resource": "*",
 "Condition": {}
 }
 ]
 }

NOMBRE-DE-NUESTRO-BUCKET efectivamente se cambia por el nombre real que le hemos dado a nuestro Bucket en S3.

(Opcional) Creación de un dominio o subdominio.

Este paso es opcional dependiendo de si hemos especificado o no un subdominio personal en nuestra distribución. Simplemente crear un CNAME de nuestro subdominio al dominio que Cloudfront nos ha generado. En mi caso

.cdn CNAME xxxxxxxxxxxxxx.cloudfront.com

Instalación y configuración de los dos plugins necesarios en WordPress.

Y ya solamente nos queda el último paso para terminar! Instalar los plugins necesarios en WordPress y configurarlos! Así que nos dirigimos al buscador de plugins y buscamos Amazon Web Services. Este es el primer plugin que instalaremos dado que es requisito para que funcione el segundo. Una vez instalado, nos pedirá que peguemos en el archivo “wp-config.php” dos lineas para definir las credenciales de usuario que hemos creado antes en IAM. Cuando hayamos realizado esto, volvermos al instalador de plugins, buscamos Amazon S3 and CloudFront y lo instalamos. Hecho esto vamos a configurarlo.

Si hemos especificado correctamente las credenciales en el archivo “wp-config.php” podremos elegir de un desplegable nuestro Bucket en S3. En las opciones de Cloudfront especificaremos el dominio que nos proporciona Cloudfront o el subdominio (CNAME) que hemos creado para ello. De las opciones inferiores, yo personalmente he seleccionado las dos primeras, para que los archivos nuevos que suba a la librería de medios se copien al S3 y para que la web utilice el enlace a los mismos en vez de usar los alojados en mi servidor (para reducir carga en mi servidor). También he seleccionado la última opción, para copiar imágenes HiDPI en caso de subir alguna.

plugin

También podemos hacer que el plugin elimine los archivos de nuestro servidor (local) una vez subidos a al S3, pero yo prefiero no utilizar esta opción por si decido prescindir del CDN en algún momento.

Y ya tenemos WordPress configurado con un CDN en AWS!