Cómo configurar JReviews con Amazon S3 y CloudFront CDN

Cómo configurar JReviews con Amazon S3 y CloudFront CDNEl potente software para Joomla! JReviews acaba de salir con una nueva versión repleta de funciones para manejar multimedia. JReviews 2.4 ha revolucionado la manera en que la popular y poderosa extensión manipula multimedia tales como imágenes, videos, audio y adjuntos. En este tutorial te enseñaré cómo integrar JReviews con Amazon S3 y el CDN CloudFront. Una de las funciones nuevas es la integración con el servicio de almacenaje remoto Amazon S3. Los usuarios ahora pueden subir multimedia a los buckets de S3 y almacenar todos los archivos pesados ahí. Este artículo demuestra los pasos necesarios para crear una óptima integración entre JReviews, S3 y CloudFront.

Crear un Bucket en Amazon S3

Si aún no tenés una cuenta con Amazon Web Services podés crear una acá.

Iniciá sesión en tu cuenta de AWS y navegá hasta la "AWS Management Console" y hacé click en el ícono S3. Luego hacé click en "Create Bucket" y en la pantallita que aparece ingresamos un nombre y seleccionamos una región:

Crear un bucket S3

El nombre del bucket debe llevar un nombre con un formato como bucket-name. Esto es para poder acomodar tanto un CDN usando Amazon CloudFront como permitir acceso al bucket con conexiones seguras e inseguras. Nombres de buckets con períodos (como my-bucket.domain.com) no se podrán acceder con SSL. Si ya tenés un bucket cargado de multimedia o cometés un error ingresando el nombre no te preocupes. Más adelante explicaré cómo cambiar el nombre de un bucket. Respecto a la región, el almacenaje más economico se encuentra en "US Standard". Si es imprescindible que tus archivos estén servidos desde otra región podés seleccionar una región más cercana o, mejor aún, usar una CDN para servir tu contenido desde S3. Más adelante explicaré cómo configurar una CDN.

Tras crear el bucket ya estás listo. Agarrá las claves de acceso haciendo click en el enlace "Security Credentials" que se encuentra debajo de tu nombre en la parte superior-derecha de la pantalla.

Claves de acceso AWS

Ahora que configuraste la cuenta de Amazon S3, ingresá a la administración de tu sitio y navegá hasta el componente JReviews. En la barra lateral izquierda hacé click en "Media Settings" bajo el menú "CONFIGURATION". En la pestaña "Storage Settings" hay que rellenar algunos campos.

En la sección "Storage Service" tenemos la opción de elegir dónde queremos almacenar nuestra multimedia: en el servidor local o, en este caso, Amazon S3. Así que para fotos seleccionaremos "Amazon S3".

Selección de almacenaje

Tené en cuenta que audio y videos sólo se pueden almacenar en S3. Almacenaje en el disco local del servidor para estos tipos de multimedia no es una opción.

La siguiente sección es "Local Storage Settings". Acá se puede cambiar la ruta a los archivos multimedia para representar mejor el contenido de tu sitio o acomodar el uso de un idioma que no sea el inglés. Por ejemplo, se podría cambiar el URL para las imágenes de "photos" a "fotos". Tené en cuenta que aunque esta sección se refiera a almacenaje local, las rutas relativas declaradas aquí también serán utilizadas en S3 así que, de no estar a gusto con los valores de defecto, conviene cambiarlos ahora.

Seteos de almacenaje local

El último paso en el panel de control de JReviews es pegar tus claves AWS en los campos correspondientes. No se podrá subir multimedia a S3 sin rellenar los campos en este paso. Seguramente tus credenciales aún están abiertas en una de las pestañas de tu navegador, así que copiá y pegá las dos claves como demuestra la siguiente imagen. También hay que ingresar el nombre del bucket de imágenes que creamos en el comienzo de este tutorial.

Amazon S3 settings

Por ahora dejá los seteos de Amazon CloudFront CDN como están. Hacé click en el botón "Save" arriba y ¡ya está! Estás listo para subir fotos utilizando el increíble subidor de multimedia de JReviews y serán almacenados en tu bucket de fotos. Tus usuarios también pueden gozar de esta maravillosa herramienta. Los visitantes al sitio pueden subir multimedia cuando agreguen un listado nuevo o una opinión y todo se va a tu(s) bucket(s) de S3. De ser necesario se puede configurar otros buckets para videos, audio y archivos adjuntos.

Entregar archivos S3 a través de una CDN

Si seguiste los pasos anteriores ya tenés una integración entre JReviews y Amazon S3. Tus archivos se almacenan en S3 y, cuando un usuario visite tu sitio, multimedia de JReviews se distribuye desde el bucket S3 correspondiente. Esto disminuye el tiempo necesario para cargar la página ya que el trabajo de entregar imágenes y otros archivos pesados recae en otro servidor. Dicho eso, el multimedia se almacena y se sirve desde la región que seleccionaste cuando creaste el bucket. Además, Amazon S3 es principalmente un servicio de almacenaje remoto. No es el lugar ideal desde donde entregar contenido a un sitio popular. Cientos o miles de pageviews por día pueden subir el costo de S3 con el paso del tiempo. No hay que preocuparse ya que AWS tiene la solución: CloudFront.

Amazon CloudFront es una content delivery network (CDN), o red de distribución de contenido. Guarda los archivos de tu sitio en cachés en varios puntos del mundo. Cuando tu sitio recibe un visitante, CloudFront entrega el contenido desde la ubicación más cercana. Además la distribución de CloudFront puede ser configurada para que almacene los archivos S3 en su caché por un largo período de tiempo. De este modo, cuando un usuario visita tu sitio, multimedia de JReviews se entrega desde el caché de la CDN. CloudFront sólo accede a tus buckets cuando se venza su caché. Configurar tu sitio de JReviews con Amazon S3 y CloudFront es la mejor combinación: JReviews para presentación, S3 para almacenaje y una CDN para entrega de multimedia. CloudFront resulta mucho más económico para servir contenido a comparación con S3. Ya basta de palabrería; ¡hagámoslo!

Crear una distribución de CloudFront para tu bucket S3

De vuelta en tu cuenta de AWS, bajo el menú "Services", encontrá el ícono de CloudFront y hacele click. Ahora hacé click en el botón "Create Distribution". Seleccioná "Download" como delivery method y hacé click en "Continue". Hacé click en el campo vacío correspondiente a "Origin Domain Name" y seleccioná el bucket desde el menú deplegable. La Origin ID se genera por Amazon y dejamos "Restrict Bucket Access" en No. Esta sección debería estar así:

CloudFront Origin Settings

Vayamos a Default Cache Behavior Settings. El único cambio necesario aquí es setear "Object Caching" a "Customize" e ingesar un valor de 31556926 para "Minimum TTL". Lo que estamos haciendo acá es instruirle a la CDN almacenar el multimedia en su caché por un año, o 31.556.926 segundos. Podrías hasta ingresar un valor de diez años. La manera en que JReviews genera nombres de archivos y ajusta los tamaños de las imágenes y pestañas según los seteos de la administración significa que nunca tendrás que preocuparte por in archivo viejo cacheado siendo entregado a tus usuarios. Cualquier cambio al multimedia de JReviews resulta en la generación de nuevos archivos y nombres de archivos en el acto. Esta sección de tu distribución debería parecerse a esto:

Default cache behavior settings

Finalmente, la última sección de la creación de la distribución "Distribution Settings" DEBÉS ingresar, en "Alternate Domain Names (CNAMEs)", el nombre exacto de tu dominio enmascarado preferido. Un CNAME es un DNS alternativo que se usa para enmascarar los URL de CloudFront en tu sitio. Usando nuestro ejemplo del bucket de fotos, deberías ingresar fotos.dominio.com como el CNAME.

Distribution Settings deberían parecerse a esto:

Distribution Settings

Ahora podés hacer click en el botón "Create Distribution". Serás devuelto a la página de distribuciones de CloudFront y la nueva CDN aparecerá con estrellitas girando mientras Amazon recoja el multimedia de S3 y lo distribuya a través de su red. Este proceso generalmente tarda unos quince minutos. Mientras esperás, seleccioná el Domain Name con tu mouse y copialo. El dominio es algo así como wxyz1234.cloudfront.net.

Asignar un CNAME a la distribución CloudFront

El dominio oficial para la CDN de tu bucket es algo así como wxyz1234.cloudfront.net. El URL de CloudFront debe reescribirse editando los DNS de tu dominio. Esto se hace fácilmente en CPanel. Iniciá sesión en tu CPanel, bajá hasta encontrar "Domains" y hacé click en "Simple DNS Zone Editor". Hay que agregar un CNAME record cuyo nombre sea idéntico tanto al nombre del bucket como el CNAME que declaraste en la distribución CloudFront. En nuestro ejemplo de un bucket de fotos el Name sería fotos.dominio.com. En el campo CNAME hay que pegar el dominio de Amazon CloudFront que es algo como wxyz1234.cloudfront.net. Debería verse así:

Agregar un record CNAME

Hacé click en el botón "Add CNAME Record" y el nuevo CNAME debería aparecer en el fondo, bajo "User-Defined Records". Lo que hicimos acá convertirá cualquier pedido por wxyz1234.cloudfront.net a un URL mucho más digerible como fotos.dominio.com. Volvé a tu cuenta de AWS y verificá si las estrellitas siguen girando o no. Cuando la distribución se haya desplegado, tu multimedia se servirá desde la CDN en vez del bucket de S3.

Si tu host no provee CPanel en tu cuenta, el proceso para otros tipos de paneles de control es parecido. Si no encontrás dónde editar los DNS Records hacé una búsqueda con las palabras claves "nombre-de-tu-panel-de-control cname".

Una distribución única de CloudFront se puede crear para cada bucket S3 bucket. Alternativamente se puede colocar toda la multimedia de Jreviews dentro de una sola distribución de CloudFront agregando todos los buckets como origins en el panel de control de la distribución en AWS.

Ya añadido el CNAME y completada la distribución, el último paso es volver al panel de control de JReviews y activar la CDN para el bucket elegido, en este caso photos:

Activar Amazon CloudFront CDN en JReviews

Jreviews v2.4.12.2 ha agregado dos campos para los CDN: seguro e inseguro. Debés pegar el dominio completo incluyendo el protocolo http. Así que tendrás algo como estos dos nombres de dominios para conexiones seguras e inseguras:

http://mycoolpics.domain.com

https://12345abcde.cloudfront.net

Es necesario usar el dominio de CloudFront con conexiones con SSL porque el protocolo https nos se puede usar con CNAMEs, al menos que no le pagues $600 por mes a Amazon para agregar un certificado propio a tu cuenta de AWS.

¿Ya tenés buckets con multimedia? O ¿empezaste con multimedia JReviews local y ahora querés usar S3?

Así que ¿instalaste o actualizaste a JReviews 2.4 hace semanas o meses, elegiste un nombre como misbuenasfotos para el bucket y subiste a él miles de imágenes? Y ahora querés entregar las imágenes a través de una CDN de CloudFront? No hay problema. Si bien AWS no permite cambiar el nombre de un bucket, sí se puede crear uno nuevo y copiar o subir carpetas enteras a él. Como JReviews genera los URLs que apuntan al contenido del bucket que son relativos al nombre del mismo, sólo hay que crear un bucket nuevo misbuenasfotos.dominio.com y copiar el contenido del bucket original a éste nuevo.

Hacé click en el bucket que querés copiar en tu cuenta de S3. Seleccioná las dos carpetas y hacé click en "Copy" bajo el menú "Actions":

Copiar S3 bucket

Ahora hacé click en "All Buckets" y después hacé click en el nuevo bucket vacío. Seleccioná "Paste" y S3 comenzará el proceso de transferencia. El bucket original quedará sin cambios. Cuando se termine la transferencia, ingresá al panel de control de JReviews y cambiá el nombre del bucket al nuevo. Ahora estás trabajando con un bucket con nuevo nombre y el mismo contenido que el anterior. Como JReviews utiliza la misma ruta relativa para acceder a los archivos no habrá problema encontrar el multimedia en el nuevo bucket siempre y cuando ingresaste el nombre correcto en administración.

Si estuviste usando almacenaje local y querés empezar a usar S3 hay que bajar tus carpetas de multimedia de tu sitio web a tu computadora usando FTP u otro gestor de archivos. La ruta por defecto a tus imágenes es /media/reviews/photos. Dentro de la carpeta verás las dos carpetas que hay que bajar: original y thumbnails. También hay que configurar S3 y JReviews como explica anteriormente este tutorial. Una vez que tengas los archivos en tu computadora, andá al panel de control de S3 y hacé click en el bucket al que querés subir. Hacé click en el botón azul "Upload". Aparecerá el popup del subidor de S3. Primero hacé click en "Enable Enhanced Uploader". Esto habilita la subida de carpetas en vez de archivos singulares:

Subir carpetas locales a S3

Cuando se haya inicializado el applet podés hacer click en "Add Files". Seleccioná las dos carpetas (original and thumbnails) en tu computadora. Verás esto:

Las dos carpetas a subir

Antes de subir las carpetas deberás tomar un momento para agregar cache control y expires metadata a los archivos. Esto es importante para mejorar el performance de tu sitio y reducir la frequencia que se accede a tu bucket de S3 y también significa una gran mejora en el Page Speed rank. Hacé click en Set Details -> Set Permissions -> Set Metadata. Aquí agregamos los dos ítems de metadata para que sean asignados a todos los archivos a ser subidos. Asigné un cache control de un año (31556926 segundos) y expires como una fecha más o menos a diez años del momento que estoy escribiendo esto. Un año para expires es suficiente así que podés escoger una fecha al azar. Sólo asegurate de que la fecha no sea menor a un año y que tenga una fecha correcta, inluyendo el día, mes y año.

Cuando termines hacé click en "Start Upload".

Agregar metadata a archivos a subir a S3

Cuando se termine la subida tendrás un bucket que es un reflejo exacto del multimedia de tu sitio de JReviews. Para instruir a JRevews que comience a usar Amazon S3 ingresá a la administración y cambiá "Storage Service for photos" de Local a Amazon S3 y hacé click en "Save". Tu sitio JReviews ya está integrado con S3! Repetí el proceso para otros tipos de multimedia (videos, adjuntos y/o audio) de ser necesario.

 Tras subir archivos a S3 los podrías encontrar "bajo llave" o privado. Para hacerles visibles a tu sitio y usuarios hacé click derecho sobre la carpeta y seleccioná "Make Public".

Con buckets grandes la sesión de AWS podría caducarse. Se puede usar BucketExplorer para superar este problema, o crear un bucket policy para hacer todos los archivos públicos. Hay que pegar este código en la póliza del bucket reemplazando my-bucket con tu nombre de bucket.

{"Version": "2008-10-17", "Statement": [ { "Sid": "AllowPublicRead", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::ma-fotos/*" } ] }

Algunas palabras sobre metadata de S3

JReviews le asigna cache-control de un año y expires metadata de un año a los archivos que se suban a S3. Esto brinda un importante aumento en la velocidad de la página reduciendo el número de pedidos http a tus buckets. Esta característica se introdujo en Marzo de 2013 con JReviews 2.4.6.1. Si tu bucket de S3 tiene archivos subidos con anterioridad a esa fecha se sugiere el uso de una herramienta como Bucket Explorer para agregar metadata en masa a tus buckets.

Bucket Explorer también us útil para la gestión de tus buckets S3 y te permite bajar en masa buckets enteros, útil para guardar backups locales.