Uno de los objetivos de nuestra web es que sea rápida. Sabemos que Google entre otros muchos factores valora la velocidad de nuestro sitio a la hora de posicionarnos. En este tutorial explicaremos cómo utilizar el CDN de Amazon CloudFront de forma básica para que aloje una copia de los ficheros multimedia y la sirva a nuestros usuarios desde sus servidores.

CloudFront es un servicio en la nube que ofrece Amazon Web Services. Lo único que necesitas para acceder es una cuenta de Amazon (gratuita). Según el volumen de tráfico que tengas podrás disfrutar de todos los servicios de AWS de forma gratuita durante un año. Consulta sus condiciones.

¿Por qué usar un CDN?

Principalmente porque repartimos la carga de recursos entre nuestro servidor y otro distinto. Además de que como podemos suponer los servidores de Amazon tienen una capacidad de transferencia muy superior a cualquier hosting web convencional. De este modo desde nuestro servidor sólo tenemos que preocuparnos de enviar el código HTML y CSS que realmente puede suponer un 10% del ancho de banda necesario para mostrar nuestra página. El otro 90% que lo conforman imágenes y el resto del contenido multimedia se encarga Amazon.

Realmente este artículo se trata de una traducción más o menos aproximada de los pasos necesarios para configurar este servicio de Amazon en WordPress publicado originalmente como How To Use Amazon S3 And Cloudfront With WordPress, añadiendo algunas notas personales.

Creación de una cuenta en AWS y configurando Amazon S3

Obviamente lo primero es crearnos un cuenta de AWS a través de la Página de acceso. una vez nos hemos validado y tengamos un usuario activo tendremos acceso a todos los servicios de AWS. Lo primero que tendremos que hacer es configurar al servicio Amazon S3.

aws-1

Deberemos crearnos un espacio o bucket en este servicio. Sería el equivalente a una carpeta dentro de la cual queremos incluir el contenido de nuestra web que queremos servir desde CloudFront.

aws-2

Cuando creemos este bucket podemos darle el nombre que queramos, aunque recomiendo poner el nombre del site del cual vamos a realizar la réplica de contenido. De este modo tendremos claramente identificados cada uno de los sites y su contenido. Por supuesto en una sola cuenta podemos tener replicados distintos sites, cada uno en su propio bucket.

aws-3

Deberemos de elegir también la ubicación geográfica del servidor en el que queremos alojar los ficheros. Debes de tener claro por un lado temas legales sobre el almacenamiento de datos y también desde dónde recibes un mayor número de visitas para optimizar la ubicación.

Un vez realizado este paso ya tenemos nuestro bucket listo para incorporar ficheros. El siguiente paso es configurar Amazon CloudFront para utilizar este espacio recién creado como CDN.

Configurar CloudFront

Como hemos explicado antes CloudFront es el servicio que ofrece Amazon para servir ficheros estáticos (imágenes, multimedia, etc) para acelerar la carga de otras páginas web. Lo que tenemos que hacer ahora es configurar la conexión entre el servicio Amazon S3 y CloudFront.

Deberás regresar a la página principal de AWS y ahora selecciona el servicio CloudFront para configurarlo. Para ello en la siguiente página pulsaremos sobre la opción Create Distribution y prodremos empezar a configurar el servicio.

aws-6

En la siguiente pantalla en el Paso 1 elegiremos cómo método de envío de nuestro contenido: Web y nos aparecerá un formulario donde lo configuraremos del siguiente modo. No nos asustemos, la mayoría de opciones deben de quedar por defecto. Lo único que deberemos de hacer es seleccionar como Origin Domain Name el bucket que hemos creado en Amazon S3.

aws-6

Una vez seleccionado el origen ya podemos ir al final del formulario y pulsar sobre Create Distribution. En sólo unos minutos veremos como aparece en el listado de ClodFront Distributions la nueva distribución activada y en status Deployed (desplegada).

Configuración de usuario y permisos de acceso

Como en cualquier sistema seguro que se precie no podemos permitir que cualquiera acceda al contenido, así que deberemos de crear un usuario, distinto del general de acceso a Amazon AWS.

aws-7

Para ello nos dirigiremos nuevamente al catálogo de servicios de Amazon AWS y seleccionaremos Identity & Access Management. Realmente permite una gestión muy completa de Grupos, usuarios, etc. Sin embargo nosotros simplemente vamos a necesitar crear un usuario al cual le daremos permisos de acceso posteriormente.

aws-8

Creado el usuario ya aparece en el listado, por lo que al seleccionarlo entraremos en la vista detallada. Al ser un nuevo usuario comprobaremos que no tiene ningún permiso de acceso. Lo que haremos será añadirle permisos para que realice las operaciones de subir, modificar y leer ficheros en S3 para servirlos por CloudFront. Para ello pulsaremos sobre el botín AttachPolicy, y entre todo el listado buscaremos AmazonS3FullAccess y la incorporaremos a los permisos. Esta es la pantalla resultante al final del proceso.

IMPORTANTE: Estos permisos simplemente dan permiso para poder utilizar cualquier bucket desde cualquier web. Es interesante que si vas a realizar este tipo de configuraciones con frecuencia para distintas web en WordPress afines mucho más la configuración, de modo que sólo puedas utilizar un bucket desde cada web. Pero para ello deberás de tener un mayor conocimiento de la configuración y gestión de permisos en Amazon AWS.

aws-9

Como podemos ver el usuario ya tiene acceso a todo el contenido. Falta un último apartado en la configuración de AWS. Configurar el accesso por medio de claves al API, para lo cual deberemos de seguir en la misma vista detalla de usuario.

Configurar claves de acceso a la API

Ahora sólo nos queda ya configurar el acceso a la API. Estas claves son indispensables para que nuestro WordPress realice peticiones a la API de Amazon y poder subir contenido al bucket y lo pueda servir CloudFront.

Para ello en la misma página de detalle de usuario pulsando el botón Create Access Key podrás generar una Access Key y su correspondiente Secret Access Key.

aws-10

Pulsando sobre Download Credentials podrás descargar ambas claves. Conservalas a mano porque cuando pasemos a configurar su correspondiente plugin en WordPress las necesitaremos.

Hasta aquí tenemos la primera parte, que es la configuración del servicio en Amazon. Ahora deberemos instalar lso plugins que gestionan la conexión entre nuestro WordPress y los servicios AWS.

Configurando plugins de acceso a CloudFront en WordPress

Para configurar el servicio son necesarios dos plugins de WordPress. En primer lugar Amazon Web Services, que es el encargado de gestionar la conexión entre nuestra web y el API de Amazon.

aws-11

Una vez instalado tenemos dos opciones para incluir las claves del API que hemos obtenido anteriormente. Tal y como nos sugiere el propio plugin lo más seguro es incluir en nuestro wp-config.php las claves directamente:

define( 'AWS_ACCESS_KEY_ID', '********************' );
define( 'AWS_SECRET_ACCESS_KEY', '****************************************' );

Sin embargo podemos optar por una segunda opción, más insegura, que consiste en introducir en un formulario las claves directamente y almacenarlas en la Base de Datos.

aws-12

A continuación instalaremos el segundo plugin WP Offload S3. Si hemos incluido las API Keys correctamente podremos elegir el bucket que queremos utilizar para servir el contenido remoto.

IMPORTANTE: Tal y como hemos comentado anteriormente lo ideal es que sólo puedas escoger un bucket para cada instalación de página web como medida de seguridad.

Vamos a comentar cada una de las opciones de este plugin:

aws-14

Una vez seleccionado el bucket a utilizar procedamos a configurar el plugin. La misión de este plugin es gestionar el envío de ficheros al bucket de Amazon y mantener sincronizado el directorio de uploads de WordPress con la versión remota.

Copy Files to S3.

Activando esta opción el plugin se encarga de replicar los ficheros entre nuestra web y el bucket.

Rewrite File URLs.

En el momento que utilizamos CloudFront la URL de los ficheros multimedia ya no hace referencia al dominio de nuestra web, sino a una URL que apunta al servidor CloudFront de Amazon. Lo podrás observar en el momento que comiences a subir nuevos ficheros.

Configure Files URLs

Podemos personalizar esta URL, incluso configurarlo a nuestro antojo. Con unos conocimientos básicos de DNS podemos incluso configurarlo como un subdominio propio para no indicar qué CDN utilizamos. Si es una de tus primeras pruebas te recomiendo dejarlo por defecto.

Path

Simplemente le incluiremos el directorio por defecto de nuestros ficheros multimedia para que se encargue de replicarlo.

SSL

Si utilizamos certificados SSL podemos forzar la conexión, pero para evitar incidencias mejor dejarlo por defecto.

Remove Files From Server

Cuidado con esta opción o el plugin una vez subidos los ficheros a CloudFront borrará nuestros ficheros multimedia del servidor. Es conveniente no activarlo para guardar siempre una copia.

Object Versioning y Far Future Expiration Header

Si te interesa el tema de la optimización web te recomiendo dejes estas dos opciones activadas. De este modo te evitas problemas de headers y además conservarás las distintas versiones de los ficheros como copia de seguridad.

Copy HiDPI (@2x) Images

En caso de utilizar el plugin WP Retina 2x te recomiendo actives esta opción.

¿Y ya está todo?

En principio y si no has tenido ningún problema en la configuración ya está todo listo para que las imágenes que subas a partir de ahora a tu página sean replicadas y servidas desde Amazon CloudFron. Desde luego si es una nueva página tienes todo listo para conseguir un sitio web rápido y confiable.

¿Pero y si es una página que ya cuenta con mucho contenido multimedia? Pues no nos va a quedar más remedio que subir el contenido anterior al bucket y cambiar los enlaces a estos ficheros. Naturalmente el plugin Offload S3 realiza esta operación en su versión de pago de forma automática.

Un pequeño truco que nos puede ayudar es utilizar un plugin como Regenerate Thumbnails que obliga a recorrer nuevamente toda la librería multimedia. De este modo el plugin S3 Offload se ve obligado a subir las imágenes al bucket.

Sin embargo con ese pequeño truco no está todo hecho. Deberemos de revisar las URL de las imágenes manualmente en los Posts o Páginas de nuestro WordPress para que apunte a CloudFront. Si no tienes demasiadas imágenes es una opción fiable.

Si queremos estar seguro de que en nuestro bucket se están almacenando las imágenes correctamente no tenemos mas que acceder al gestor de Amazon S3 y ver el estado de nuestro bucket. Si tenemos todo correctamente configurado tendremos en su correspondiente bucket una réplica de nuestro directorio /wp-content/uploads.
aws-15

Conclusión

Conseguir un sitio rápido cada vez es más sencillo y fácil de configurar sin grandes recursos. De hecho es interesante la combinación de distintas herramientas de optimización como podría ser CloudFront para imágenes y CloudFlare como herramienta de optimización de tráfico, HTML, código CSS y JavaScript. Durante un año Amazon ofrece sus servicios de forma gratuita y posteriormente el coste es ridículo. Las ventajas de cara al rendimiento son palpables, no sólo ejecutando un BenchMark de descarga de ficehros sino en el tráfico diario de usuarios.

Fuentes

How To Use Amazon S3 And Cloudfront With WordPress

Comparte si te ha gustado
  •  
  •  
  •  
  •  
  •  

Autor:
Última actualización:

4 comentarios

  1. Buenas Oscar,

    En primer lugar, gracias por este tutorial, que he seguido al pie de la letra para empezar con el S3 y me funcionó a la primera. Sólo tengo una “pequeña” pega. Cuando he visto la web en el móvil, no aparecen las imágenes (que sí aparecen correctamente cuando veo la web en el ordenador). ¿Esto es debido a que me he olvidado de marcar alguna opción? El tema es importante, lógicamente.

    1. Hola Carlos! Gracias por tu mensaje.

      Acabo de revisar mi propia web y otras con WP en las que utilizo CloudFlare y no he visto ningún problema con las imágenes que se sirven desde Amazon en móviles. En principio es indiferente del dispositivo y el navegador. Es válido para todos. Ninguna de las opciones de los plugins son “exclusivas” para funcionalidades de móviles. Comprueba en qué móviles te falla y realiza la prueba en diferentes dispositivos. Y aunque parezca obvio, comprueba que las imágenes que sirves se correspondan con el tipo y extensión del fichero correspondiente.

      En cualquier caso, como tenemos una nueva versión 4.7 WP recientemente es posible que los plugins se estén adaptando aún, y quizás existan algunos problemas con algunos user-agents. Un poco extraño pero posible. Mi consejo es que esperes unas semanas a que se adapten los plugins de AWS, pues cada poco se producen actualizaciones.

      Si tienes un backup de la BDD te recomiendo sino que la restaures, pues los cambios de las url de las imágenes las realiza en la propia BDD. Si quieres desactivarlo también es posible que puedas cambiar el nombre del dominio en la opción CloudFront or custom domain y vuelvas a incluir tu propio dominio en las rutas de las imágenes.

  2. Hola Oscar,

    Muy interesante, estoy empezando a adentrarme en el uso del AWS y estoy un poco pez…

    Tengo una duda. Si tienes un wp conectado con aws, desde hace tiempo y quieres optimizar las imágenes (reducirlas de tamaño), cómo puedes actualizar las imágenes guardadas en el AWS.

    Estoy intentándolo y no puedo. No me deja hacerlo directamente desde wordpress con un plugin tipo smushit o ewww.

    Gracias!

Deja un comentario

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