Configurar Strapi 5 para subir imágenes a AWS S3

Autor: rioyi | Lectura: 4 minutos | Oct 30, 2024

Paso a paso para integrar AWS S3 en Strapi 5 y mejorar la gestión de imágenes en tu aplicación web.

Configurar Strapi 5 para subir imágenes a AWS S3

EL PRINCIPIO Y PROBLEMA

He empezado a usar Strapi 5. Está muy bueno; hicieron grandes mejoras comparado con la versión 4. El lanzamiento de la versión 5 fue a mediados de año, pero hay una ley de vida muy importante que obvié: "Al igual que cuando sale la primera versión de una consola de videojuegos, siempre te vas a encontrar con los primeros errores y, al final, con el tiempo, refinarán la fórmula y sacarán versiones mejoradas". Con esta premisa, empecé a usar Strapi 5 muy emocionado. La documentación oficial aún está actualizándose, pero hay mucha documentación antigua y en internet hay muchas soluciones, aunque solo para la versión 4. Tenía una necesidad de subir las imágenes de la aplicación a AWS S3, y me empecé primero a leer la documentación oficial. Empecé a leer el contenido de este enlace: https://docs.strapi.io/cloud/advanced/upload

Seguí el paso a paso y no funcionó. En la configuración del plugin tenía esta configuración:

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        baseUrl: env('CDN_URL'),
        rootPath: env('CDN_ROOT_PATH'),
        s3Options: {
          ///// <-- CREDENCIALES ///////
          accessKeyId: env('AWS_ACCESS_KEY_ID'),
          secretAccessKey: env('AWS_ACCESS_SECRET'),
          //// <-- CREDENCIALES  ////
          region: env('AWS_REGION'),
          params: {
            ACL: env('AWS_ACL', 'public-read'),
            signedUrlExpires: env('AWS_SIGNED_URL_EXPIRES', 15 * 60),
            Bucket: env('AWS_BUCKET'),
          },
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  // ...
});

No parecía nada fuera de lo común, pero no me funcionaba y no podía entender por qué. Luego leí mucho en Stack Overflow y en muchos chats en internet, pero nada me funcionaba.

Quédate con la parte de "//// <-- CREDENCIALES ////"

LA SOLUCIÓN

Me dispuse a entrar en el Marketplace de Strapi en este enlace: https://market.strapi.io/providers/@strapi-provider-upload-aws-s3 y me dije: "Vamos a ver el npm de la librería". Lo encontré en este enlace: https://www.npmjs.com/package/@strapi/provider-upload-aws-s3 y encontré una actualización en la documentación. Había un cambio ligero pero crucial.

upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
      //// <-- CAMBIO IMPORTANTE  ////
        rootPath: "img-strapi/"
        credentials: {
          accessKeyId: env('AWS_ACCESS_KEY_ID'),
          secretAccessKey: env('AWS_ACCESS_SECRET'),
        },
      ////  <-- CAMBIO IMPORTANTE  ////
        region: env('AWS_REGION'),
        params: {
          ACL: 'private', // <== set ACL to private
          signedUrlExpires: env('AWS_SIGNED_URL_EXPIRES', 15 * 60),
          Bucket: env('AWS_BUCKET'),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },

Veamos estos cambios importantes dentro de "//// <-- CAMBIO IMPORTANTE ////". A continuación, listaré las propiedades y su uso:

credentials: En esta propiedad se agregan las credenciales del bucket S3 de AWS.
rootPath: En esta propiedad se puede agregar la carpeta donde queremos que estén las imágenes; en este caso, es img-strapi/. Debe terminar en /. Si la carpeta no existe, cuando subes la primera imagen se crea la carpeta.

Tuve un final feliz: logré configurar el bucket para subir mis imágenes y agregar una carpeta dentro del bucket para no tenerlas tiradas en el root.

CONCLUSIÓN

Configurar Strapi 5 para subir imágenes a AWS S3 puede presentar ciertos desafíos, especialmente cuando se trata de versiones nuevas que aún están en desarrollo activo. Sin embargo, siguiendo una metodología de investigación y aprovechando recursos como la documentación oficial actualizada y el soporte de la comunidad, es posible superar estos obstáculos y lograr una integración exitosa.

Mi experiencia con Strapi 5 me ha mostrado que, aunque la documentación inicial puede estar desactualizada o incompleta, la perseverancia y la búsqueda de soluciones específicas son clave para resolver problemas técnicos. Al implementar los cambios necesarios en la configuración del plugin de AWS S3, no solo logré subir mis imágenes de manera eficiente, sino que también organicé mejor mi almacenamiento creando carpetas específicas dentro del bucket.

Para quienes estén iniciando con Strapi 5, les recomiendo mantenerse al día con las actualizaciones oficiales, participar en comunidades y no temer experimentar con las configuraciones. Las herramientas y plataformas en constante evolución como Strapi ofrecen grandes beneficios una vez que superamos las primeras dificultades.

Espero que esta guía te haya sido útil y te inspire a seguir explorando las capacidades de Strapi 5. Si encuentras otros desafíos o tienes soluciones adicionales, no dudes en compartir tu experiencia para que juntos podamos construir una comunidad más sólida y colaborativa.

¡Éxito en tus proyectos con Strapi y AWS S3!

¿Disfrutas mi contenido?

¡Considera invitarme un café para apoyarme a manter los servidores!

Strapi AWS