13 minutos

de lectura

Cómo usar Cloudflare R2 con WordPress

Cuando buscamos descargar los archivos estáticos de un sitio web a un almacenamiento externo en la nube, el servicio por defecto para realizar ello es Amazon S3 (no vamos a hablar de MinIO, ya que de ello hablaremos en otro post). Y si pensamos en alternativas, pues podemos encontrar a Digital Ocean Spaces, Google Cloud Storage o Wasabi. Sin embargo, Cloudflare R2 es una alternativa interesante para la descarga de archivos estáticos de un sitio web. Y en este post veremos cómo usar Cloudflare R2 en un sitio web hecho con WordPress.

¿Qué es Cloudflare R2?

Cloudflare R2 es un servicio de almacenamiento, o storage, en la nube lanzado por Cloudflare que se presenta como una alternativa a Amazon S3, pero con algunas diferencias clave. R2 se destaca principalmente por no cobrar tarifas por la salida de datos (egress fees), lo que significa que los usuarios pueden recuperar sus datos sin incurrir en costos adicionales, una ventaja significativa en comparación con otros proveedores de almacenamiento en la nube.

Estas son algunas de sus características principales:

  1. Sin tarifas por salida de datos: Una de las características más atractivas de R2 es que no cobra por la salida de datos, lo que puede reducir significativamente los costos para empresas que necesitan transferir grandes cantidades de datos.
  2. Compatible con S3: R2 es compatible con la API de Amazon S3, lo que facilita a los usuarios la migración de aplicaciones o datos desde S3 a R2 sin necesidad de hacer cambios significativos en su código.
  3. Integración con la red de Cloudflare: R2 está integrado con la vasta red de Cloudflare, ello permite que los datos almacenados sean servidos rápidamente a usuarios en cualquier parte del mundo, aprovechando la red global de Cloudflare.
  4. Almacenamiento escalable: Como la mayoría de los servicios de almacenamiento en la nube, R2 ofrece almacenamiento escalable, lo que permite a las empresas crecer sin preocuparse por las limitaciones de espacio.

Cloudflare R2 se orienta hacia empresas y desarrolladores que buscan una solución de almacenamiento en la nube económica y eficiente, especialmente cuando necesitan distribuir contenido o manejar grandes volúmenes de datos.

¿Por qué usar Cloudflare R2?

Cloudflare R2 ofrece varias ventajas que lo hacen atractivo para diferentes tipos de usuarios, especialmente aquellos que buscan optimizar costos y mejorar la eficiencia en la distribución de contenido y almacenamiento de datos. Estas son algunas razones para usar Cloudflare R2:

1. Ahorro en costos por salida de datos (egress fees)

  • Sin tarifas de salida: Una de las principales razones para elegir R2 es que no cobra tarifas por la salida de datos. Otros proveedores de almacenamiento en la nube, como Amazon S3, suelen cobrar tarifas significativas por transferir datos fuera de sus plataformas, lo que puede acumularse rápidamente si tienes un gran volumen de datos o usuarios distribuidos globalmente.

2. Compatibilidad con la API de Amazon S3

  • Facilidad de migración: R2 es compatible con la API de S3, lo que significa que puedes migrar fácilmente aplicaciones y datos desde S3 a R2 sin necesidad de reescribir código o hacer ajustes técnicos importantes. Esto hace que la transición sea más sencilla y menos costosa en términos de tiempo y recursos.

3. Rendimiento y escalabilidad

  • Red global de Cloudflare: Al estar integrado con la red global de Cloudflare, R2 permite que los datos sean servidos rápidamente a usuarios en cualquier parte del mundo. Esto es especialmente útil para empresas que necesitan entregar contenido a una audiencia global con baja latencia.
  • Almacenamiento escalable: R2 ofrece almacenamiento escalable, permitiendo que crezcas sin preocuparte por las limitaciones de espacio o rendimiento.

4. Simplicidad y eficiencia operativa

  • Gestión simplificada: Con R2, Cloudflare ofrece una solución unificada para almacenamiento y entrega de contenido, simplificando la gestión y reduciendo la necesidad de integrar múltiples servicios.
  • Menor complejidad en la facturación: Al eliminar las tarifas de salida, Cloudflare R2 también reduce la complejidad en la facturación, permitiéndote predecir costos con mayor precisión.

5. Ideal para casos de uso específicos

  • Distribución de contenido: Si tu aplicación o servicio implica la entrega de grandes cantidades de datos (como videos, imágenes, archivos de gran tamaño) a usuarios finales, R2 puede ser especialmente beneficioso.

6. Mejor relación costo-beneficio

  • Costos previsibles: La eliminación de las tarifas de salida permite a las empresas planificar mejor sus presupuestos y evitar sorpresas desagradables al final del mes.

Si todavía tienes dudas en relación a si vale la pena usar R2 frente a Amazon S3, te recomiendo usar la calculadora de precios de R2 y también darle una mirada a su capa gratuita.

Cloudflare R2 y el WPO

Cuando se habla del WPO (Web Performance Optimization), una de los factores que se consideran son las imágenes y los videos. Y en relación a ello una de las prácticas recomendadas es la descarga de estos recursos en servicios externos. Ello con la finalidad de quitar la carga de las imágenes del servidor y entregársela a un servicio especializado en ello que sea más rápido.

En otro post veremos las mejores opciones para descargar los videos de los Medios de WordPress.

Pero para descargar las imágenes, Cloudflare R2 es la mejor alternativa. Si lo comparamos con Amazon S3, es posible observar un incremento de entre 20% y 40% de rapidez en la entrega de imágenes usando Cloudflare R2. Puedes revisar este artículo de Cloudflare con data comparativa que demuestra que la entrega de imágenes es más rápida a través de un bucket de Cloudflare R2 que usando uno de Amazon S3. Sin embargo, considera que no hay mejor forma de comprobarlo que probando y usándolo uno mismo.

¿Funciona Cloudflare R2 con WordPress?

La respuesta corta es sí. Cloudflare R2 puede integrarse con WordPress para almacenar y servir contenido de manera eficiente. Esta integración es útil especialmente si manejas un sitio web con gran cantidad de archivos multimedia, como imágenes, videos, o documentos, y quieres aprovechar las ventajas de Cloudflare R2, como la reducción de costos por salida de datos y la distribución rápida de contenido a nivel global.

Puedes integrar WordPress con Cloudflare R2 de tres diferentes formas: 1) usando un plugin, 2) con una integración a medida y 3) usando los Cloudflare Workers.

  1. Usando un plugin:
    • Plugins S3 para WordPress: Como R2 es compatible con la API de S3, puedes usar cualquier plugin de WordPress que soporte S3. Algunos plugins que puedes usar son: S3 Uploads, WP Offload Media, Media Cloud o Advance Media Offloader. No menciono otros plugins, porque no se encuentran en el repositorio oficial de WordPress o no han sido desarrollados por organizaciones conocidas en el ecosistema de WordPress. Estos plugins permiten que tus archivos multimedia sean subidos directamente a R2 y servidos desde allí.
  2. Integración a medida:
    • API de R2: Si tienes experiencia con desarrollo, puedes usar la S3 API de R2 directamente para personalizar cómo tu sitio WordPress maneja la subida y la entrega de archivos. Esto puede incluir scripts para cargar archivos a R2 automáticamente cuando se suben a la biblioteca de medios de WordPress, o para servir esos archivos directamente desde R2.
  3. Usar Cloudflare Workers:
    • Automatización con Workers: Puedes utilizar Cloudflare Workers para interceptar solicitudes de medios en tu sitio de WordPress y redirigirlas a R2. Esto te permite mantener tus archivos almacenados en R2 y servirlos directamente desde allí, mientras que tus visitantes acceden a ellos sin cambios visibles en la experiencia de usuario.

Alternativas de plugins

Plugins del repositorio

Existen dos plugins en el repositorio de WordPress que sirven para integrar los medios con R2. Son estos:

  1. Advance Media Offloader
    Advance Media Offloader es un plugin nuevo que permite descargar los medios de WordPress en un bucket de R2. Sin embargo, no lo considero porque incluso teniendo la eliminación de las imágenes de la carpeta uploads luego de ser descargadas en el bucket de R2 activada, la imagen original se mantiene en el servidor. Y digo la imagen original, porque los imágenes creadas por WordPress a partir de la imagen original sí son eliminadas. Pero al tener esta funcionalidad con esa particularidad, no cumple con los requerimientos que demando de un plugin de descarga de imágenes. Realmente no es necesario tener las imágenes originales en el servidor, incluso con fines de copia de seguridad. Pero sí es un plugin al que hay que tenerlo en la mira al tener soporte nativo de R2 y MinIO.
  2. Media Cloud
    Media Cloud es una alternativa muy interesante, porque permite integrar Amazon S3, así como una larga lista de proveedores compatibles con S3: Cloudflare R2, Google Cloud Storage, MinIO, Backblaze, DigitalOcean Spaces, Wasabi y más. El problema desde mi punto de vista es que incluso la versión gratuita utiliza el SDK de Freemius. Y personalmente, por problemas de seguridad que ha tenido anteriormente Freemius, prefiero no incluir plugins que tengan el SDK de Freemius en sitios web productivos.

S3 Uploads

S3 Uploads es un plugin desarrollado por Human Made, una de las agencias más influyentes en el ecosistema de WordPress. Y actualmente es una de las alternativas más ligeras para integrar los medios de WordPress con Amazon S3 y servicios compatibles con S3.

Nativamente no es posible integrar S3 Uploads con Cloudflare R2. Sin embargo, en el issue #576 del repositorio del plugin en Github, Tedy Warsitha sugiere una forma de hacerlo agregando un filtro que permite agregar la constante del endpoint de R2.

Esa solución funciona perfectamente, pero con la última versión del instalador manual, que data de mayo de 2023, que se puede descargar desde la sección de releases. ¿Por qué menciono esto? Porque desde junio de 2024 se hizo obsoleta la instalación manual de S3 Uploads. Si queremos usar la última versión, la 3.0.8, ya realizando la instalación con composer, la solución propuesta por Tedy Warsitha genera un error en WordPress, que habría que revisar, solucionar y abrir un PR.

Pero teniendo en cuenta que Ryan McCue, de Human Made, ha comunicado en el mismo issue, que no tienen planes de dar soporte a R2, no vale la pena seguir usando S3 Uploads para integrar Cloudflare R2 a un sitio en WordPress. Y no solo por eso. También por el hecho de haber dado como obsoleta la instalación manual, para nuevos usuarios la instalación con composer puede ser compleja.

De todas formas, Cloudflare R2 funciona con S3 Uploads, pero con la última versión de la instalación manual publicada en los releases del repositorio.

WP Offload Media

WP Offload Media es un plugin de Delicious Brains, quienes compraron Advanced Custom Fields, y quienes a su vez fueron comprados por WP Engine. El plugin tiene una versión gratuita y una de pago. Y con ambas se puede integrar Cloudflare R2.

WP Offload Media permite la integración nativamente Amazon S3, Digital Ocean Spaces y Google Cloud Storage. Pero también se puede integrar con Wasabi, Vultr Spaces y MinIO utilizando WP Offload Media Tweaks. Este plugin, también desarrollado por ellos, podría decirse que es un child plugin de WP Offload Media, que permite extender su funcionalidad para integrarlo con servicios no soportados nativamente.

Pero yo buscaba usar Cloudflare R2, así que en mi agencia de desarrollo, Carnaval Studio, realizamos un fork de WP Offload Media Tweaks: WP Offload Media Tweaks for R2, el cual permite integrar WP Offload Media con el almacenamiento de Cloudflare R2. Y en este tutorial lo utilizaremos para configurar R2 en WordPress.

Configurando Cloudflare R2

Requisitos previos

Image
  • Acceso al directorio de WordPress para editar el wp-config.php y amazon-s3-and-cloudfront-tweaks.php
  • Cuenta de Cloudflare con acceso al servicio de R2
  • Tener disponible un subdominio para la distribución. Por ejemplo, cdn.dominio.com, static.dominio.com o media.dominio.com

Configuración

Instalar plugins

Subimos e instalamos el plugin WP Offload Media en nuestro sitio en WordPress.

Image

Y también subimos e instalamos WP Offload Media Tweaks for R2.

Image

Crear bucket

Image

Configurar un dominio en el bucket

En los settings del bucket, agregamos un subdominio sobre el que queremos que realice la distribución.

Image

En Cloudflare solo necesitamos agregar el dominio. Y automáticamente se crea un certificado SSL via Let’s Encrypt para el subdominio, se configura el bucket bajo el subdominio y se activa el proxy.

Crear token de API

Image

Modificar el wp-config.php

En el wp-config.php agregamos el Access Key ID y el Secret Access Key en el lugar de los asteriscos (***) dentro de los apóstrofos (”).

define( 'AS3CF_SETTINGS', serialize( array(
	'provider' => 'aws',
	'access-key-id' => '********************',
	'secret-access-key' => '**************************************',
) ) );

/* That's all, stop editing! Happy publishing. */
PHP

Modificar amazon-s3-and-cloudfront-tweaks.php

Y en el archivo amazon-s3-and-cloudfront-tweaks.php del fork del plugin WP Offload Media Tweaks, agregamos el account ID de Cloudflare, el cual está disponible en la URL del dashboard de Cloudflare o en la lista de buckets de R2.

Image

Configurar WP Offload Media

Ahora solo tenemos que configurar plugin WP Offload Media desde el wp-admin.

Como proveedor seleccionamos Amazon S3 e ingresamos el nombre del bucket.

Image

La configuración del plugin depende de cada uso. Pero es importante tener en cuenta que contamos con la funcionalidad de borrar los archivos una vez subidos al bucket y la de agregar prefijos al bucket. Esto último es super útil si varios sitios web van a usar el mismo bucket.

Image

Finalmente configuramos la distribución via Cloudflare a través del subdominio que agregamos al bucket. Esta configuración determinará finalmente la URL que tendrán los archivos en los Medios de WordPress.

Image

Prueba de subida al bucket

Una vez con todo configurado solo queda probar que los medios se suban al bucket. Ello se puede comprobar de dos maneras:

  • Subiendo un archivo en los Medios de WordPress y comprobando visualmente que esté en el bucket de R2.
  • Y abriendo el archivo en los Medios de WordPress y verificando que este tenga la URL configurada en los ajustes de distribución. Así pues una imagen debería tener, siguiendo el ejemplo, la url de https://cdn.dominio.com/sitio1/example.jpg.

Solucionando problemas

Si tienes problemas para cargar archivos después de haber realizado la configuración, hay algunas cosas que puedes hacer para solucionarlos. Ten en cuenta que esta no es una lista definitiva, solo algunos indicios de qué revisar.

  • Comprueba que el Access Key ID y el Secret Access Key que has agregado en el wp-config.php sean los que generaste y estén puestos de manera correcta.
  • Comprueba que el Account ID esté bien puesto y sea el que figura en tu cuenta de Cloudflare.
  • Comprueba la consola de desarrollador para ver si hay alguna indicación de lo que podría estar fallando. Por ejemplo, podría haber algún problema debido a una cabecera de seguridad.

Comentarios

4 respuestas a «Cómo usar Cloudflare R2 con WordPress»

  1. Edwar Javier

    Esta información es demasiado útil.

    ¿Podrías ampliar un poco acerca de los beneficios de usar R2 para que la web vaya más ligera? Es decir, en temas de optimización.

    Gracias Oscar!
    Excelente aporte para la comunidad.

    1. Oscar Hugo Paz

      Hola, Edwar. He ampliado un poco sobre las ventajas de usar R2 frente a S3 desde la perspectiva del WPO: https://oscarhugopaz.com/como-usar-cloudflare-r2-con-wordpress/#cloudflare-r2-y-el-wpo. He dejado vinculado un artículo de Cloudflare en el que explora con más detalle una comparación entre R2 y S3 desde el punto de vista de la velocidad de entrega de imágenes. Espero que te sea de utilidad.

  2. Cha

    Hola, tengo un problema de error al conectar el bucket en el plugin, no puede obtener obtener el bucket region.

    Estaba en AWS, y migre todo y funcionan los accesos, pero no puedo conectarlo en conectarlo. Ya revisé los settings de tu setup y están de acuerdo a ello. ¿Sabes por que tengo este error?

    Error Getting Bucket Region — There was an error attempting to get the region of the bucket media: Error executing “GetBucketLocation” on “https://xxxxxxxxxx.r2.cloudflarestorage.com/media?location”; AWS HTTP error: Client error: `GET https://xxxxxxxxxx.r2.cloudflarestorage.com/media?location` resulted in a `401 Unauthorized` response: UnauthorizedUnauthorized Unauthorized (client): Unauthorized – UnauthorizedUnauthorized

    1. Oscar Hugo Paz

      Hola. En primer lugar revisaría que el token que está configurado en el wp-config.php sea el mismo generado en Cloudflare y que esté puesto como en el ejemplo, dentro de los apóstrofos (”). En segundo lugar, que el token tenga permisos de lectura y escritura (Object Read & Write) para el bucket. Finalmente, coméntame en qué región está creado tu bucket. En la configuración de las regiones del plugin WP Offload Media Tweaks, están configuradas las 5 regiones de R2 de Cloudflare y la región de “Eastern North America” como la principal.

Deja una respuesta

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