DEV Community: Jehiel Martinez

Building a Scalable Serverless Image Processing Pipeline with AWS SQS and Lambda

Jehiel Martinez — Fri, 13 Dec 2024 20:22:00 +0000

Image-intensive applications need efficient ways to process images as soon as they are uploaded. Direct processing can overload servers and create bottlenecks. A distributed, scalable approach is necessary to handle varying workloads without sacrificing performance.

Click aquí para la version en español

Architecture Overview

The solution uses a serverless, event-driven architecture that ensures scalability and resilience:

Images are uploaded to an S3 input bucket.
Upload events trigger a Lambda function.
Lambda pushes metadata to an SQS queue.
Processing Lambda consumes messages from the SQS queue.
Thumbnails are generated and stored in the output bucket.

This approach decouples the image upload and processing stages, allowing the system to handle spikes in uploads efficiently.

AWS Services Used

Amazon S3: Acts as both the source for original images and the destination for processed thumbnails.
Amazon SQS: Serves as a message broker to decouple upload and processing stages.
AWS Lambda: Provides serverless compute for event handling and image processing.
AWS IAM: Manages permissions and ensures secure access to AWS resources.

Technical Implementation

Image Upload Flow

A user uploads an image to the input S3 bucket.
An S3 event notification triggers the first Lambda function.
This Lambda function constructs a message containing the image's metadata (e.g., bucket name, object key).
The metadata is published to an SQS queue.

Processing Flow

A second Lambda function continuously polls the SQS queue for new messages.
Upon receiving a message, the Lambda function:
- Downloads the image from the input bucket.
- Processes the image using the Sharp library to generate a thumbnail.
- Uploads the thumbnail to the output bucket.
Once the process is successful, the corresponding SQS message is deleted.

Error Handling

Dead Letter Queue (DLQ): Messages that fail processing after retries are moved to a DLQ for further analysis.
CloudWatch Logs: Logs capture detailed processing steps and error information for debugging.
Automatic Retries: Transient errors trigger automatic retries based on SQS policies.

Infrastructure as Code with AWS CDK

Let's break down the core infrastructure implementation in our AWS CDK stack:

S3 Bucket Setup

const bucket = new Bucket(this, 'AwsSqsThumbnailGeneratorBucket', {
      bucketName: 'sqs-thumbnail-generator-bucket',
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
      versioned: true
    });

We create an S3 bucket with versioning enabled to store original images and generated thumbnails. The bucket is configured for automatic object deletion to simplify cleanup.

Queue Configuration

const dlq = new Queue(this, 'AwsSqsThumbnailGeneratorDeadLetterQueue', {
  queueName: 'thumbnail-generator-dlq',
  retentionPeriod: cdk.Duration.days(10)
});

const queue = new Queue(this, 'AwsSqsThumbnailGeneratorQueue', {
  queueName: 'thumbnail-generator-queue',
  visibilityTimeout: cdk.Duration.seconds(60),
  deadLetterQueue: {
    queue: dlq,
    maxReceiveCount: 3
  } 
});

We set up two queues:

A main queue for processing images
A Dead Letter Queue (DLQ) for handling failed processing attempts
Messages are moved to DLQ after 3 failed attempts

S3 to SQS Integration

bucket.addEventNotification(
  EventType.OBJECT_CREATED, 
  new SqsDestination(queue), 
  {prefix: 'uploads/'}
);

This configuration automatically sends a message to our SQS queue whenever a new file is uploaded to the 'uploads/' directory in our S3 bucket.

Sharp Layer

const sharpLayer = new LayerVersion(this, 'SharpLayer', {
      code: Code.fromAsset(path.join(__dirname, './layers/sharp.zip')),
      compatibleRuntimes: [Runtime.NODEJS_LATEST],
      compatibleArchitectures: [Architecture.ARM_64]
    });

We need the Sharp library to process images. We create a Lambda Layer with the library and attach it to our processing Lambda function. This ensures that the library is available to the function at runtime.

This specific layer is built for ARM64 architecture, which is the architecture used by AWS Graviton2 processors. It's optimized for performance and cost savings. Sharp Layer Source

Thumbnail Generator Lambda

  const generator = new NodejsFunction(this, 'AwsSqsThumbnailGeneratorProcessor', {
      functionName: 'thumbnail-generator-processor',
      runtime: Runtime.NODEJS_LATEST,
      handler: 'handler',
      entry: path.join(__dirname, './functions/thumbnail-generator.ts'),
      layers: [sharpLayer],
      architecture: Architecture.ARM_64,
      timeout: cdk.Duration.seconds(60),
      environment: {
        QUEUE_URL: queue.queueUrl
      }
    });

    generator.addEventSource(new SqsEventSource(queue));

We define a Lambda function that processes messages from the SQS queue. The function is triggered by new messages in the queue and generates thumbnails using the Sharp library.

The function code is defined in the thumbnail-generator.ts file, which is responsible for downloading, processing, and uploading images.

IAM Policies

  queue.addToResourcePolicy(new PolicyStatement({
      effect: Effect.ALLOW,
      principals: [new ServicePrincipal('s3.amazonaws.com')],
      actions: ['sqs:SendMessage'],
      resources: [queue.queueArn],
      conditions: {
        ArnLike: {
          'aws:SourceArn': bucket.bucketArn,
        },
      },
    }));
  bucket.grantReadWrite(generator);
  queue.grantConsumeMessages(generator);

We define IAM policies to allow the S3 bucket to send messages to the SQS queue and grant the processing Lambda function read/write access to the bucket and permission to consume messages from the queue.

Using it

If you’d like to try this project, follow these steps:

Clone the Repository: AWS SQS Thumbnail Generator.
Update Configuration: Modify the account and region details in the /bin/aws-sqs-thumbnail-generator.ts file.
Configure the Thumbnail Sizes: Adjust the thumbnail sizes in the /functions/thumbnail-generator.ts file.
Deploy the Infrastructure: Use AWS CDK to deploy the necessary resources.
Test the Workflow: Upload an image to the input S3 bucket and watch as thumbnails are automatically generated and stored in the output bucket.

Conclusion

The AWS SQS Thumbnail Generator is a powerful example of leveraging serverless architecture to build scalable, efficient, and resilient workflows. By decoupling processes and utilizing services like SQS, Lambda, and S3, this project showcases how to handle resource-intensive tasks with ease.

This project can be extended further by adding features like image recognition, metadata extraction, or integrating with other AWS services. The possibilities are endless, and the scalability and flexibility of serverless architecture make it an ideal choice for such applications.

Additional Resources

Construyendo un Procesador de Imágenes Escalable con SQS y Lambda

Jehiel Martinez — Fri, 13 Dec 2024 18:20:00 +0000

Las aplicaciones que manejan un alto volumen de imágenes necesitan formas eficientes de procesarlas tan pronto como se suben al sistema. El procesamiento directo puede sobrecargar los servidores y crear cuellos de botella. Por eso, es necesario un enfoque distribuido y escalable para manejar cargas de trabajo variables sin sacrificar el rendimiento.

Click here for the english version

Arquitectura

La solución utiliza una arquitectura serverless y event-driven que garantiza escalabilidad y resistencia:

Las imágenes se suben a un bucket de entrada en S3.
Los eventos de subida ejecutan una función Lambda.
Lambda envía los metadatos a una cola SQS.
Una Lambda de procesamiento consume los mensajes de la cola SQS.
Las miniaturas se generan y se almacenan en el bucket de salida.

Este enfoque desacopla las etapas de subida y procesamiento de imágenes, permitiendo que el sistema maneje picos de carga de manera eficiente.

Servicios AWS Utilizados

Amazon S3: Funciona como origen para las imágenes originales y destino para las miniaturas procesadas.
Amazon SQS: Actúa como message broker para desacoplar las etapas de subida y procesamiento.
AWS Lambda: Proporciona capacidad de cómputo serverless para el manejo de eventos y procesamiento de imágenes.
AWS IAM: Gestiona los permisos y asegura el acceso seguro a los recursos de AWS.

Implementación Técnica

Subida de Imágenes

Un usuario sube una imagen al bucket de entrada en S3.
Una notificación de evento de S3 activa la primera función Lambda.
Esta función Lambda construye un mensaje que contiene los metadatos de la imagen (ej: bucketName, key).
Los metadatos se publican en una cola SQS.

Procesamiento

Una segunda función Lambda monitorea constantemente la cola SQS en busca de nuevos mensajes.
Al recibir un mensaje, la función Lambda:
- Descarga la imagen del bucket de entrada.
- Procesa la imagen usando la librería Sharp para generar las miniaturas.
- Sube las miniaturas de regreso al bucket .
Una vez que el proceso termina exitosamente, el mensaje correspondiente se elimina de la cola SQS.

Manejo de Errores

Dead Letter Queue (DLQ): Los mensajes que fallan en el procesamiento después de varios intentos se mueven a una DLQ para análisis posterior.
CloudWatch Logs: Los logs capturan los pasos detallados del procesamiento e información de errores para debugging.
Reintentos Automáticos: Los errores transitorios activan reintentos automáticos basados en las políticas de SQS.

Infraestructura como Código con AWS CDK

Veamos en detalle la implementación de la infraestructura principal en nuestro stack de AWS CDK:

S3 Bucket

const bucket = new Bucket(this, 'AwsSqsThumbnailGeneratorBucket', {
      bucketName: 'sqs-thumbnail-generator-bucket',
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
      versioned: true
    });

Creamos un bucket de S3 con versionamiento habilitado para almacenar imágenes originales y miniaturas generadas. El bucket está configurado para la eliminación automática de objetos para simplificar la eliminación del stack, esto no se recomienda en producción.

Queues

const dlq = new Queue(this, 'AwsSqsThumbnailGeneratorDeadLetterQueue', {
  queueName: 'thumbnail-generator-dlq',
  retentionPeriod: cdk.Duration.days(10)
});

const queue = new Queue(this, 'AwsSqsThumbnailGeneratorQueue', {
  queueName: 'thumbnail-generator-queue',
  visibilityTimeout: cdk.Duration.seconds(60),
  deadLetterQueue: {
    queue: dlq,
    maxReceiveCount: 3
  } 
});

Configuramos dos queues (colas):

Un queue principal para procesar imágenes
Una Dead Letter Queue (DLQ) para manejar intentos fallidos de procesamiento
Los mensajes se mueven a la DLQ después de 3 intentos fallidos

S3 to SQS Integration

bucket.addEventNotification(
  EventType.OBJECT_CREATED, 
  new SqsDestination(queue), 
  {prefix: 'uploads/'}
);

Esta configuración envía automáticamente un mensaje a SQS cada vez que se sube un nuevo archivo al directorio uploads/ en nuestro bucket de S3.

Libreria Sharp

const sharpLayer = new LayerVersion(this, 'SharpLayer', {
      code: Code.fromAsset(path.join(__dirname, './layers/sharp.zip')),
      compatibleRuntimes: [Runtime.NODEJS_LATEST],
      compatibleArchitectures: [Architecture.ARM_64]
    });

Necesitamos la librería Sharp para procesar imágenes. Creamos una Lambda Layer con la librería y la adjuntamos a nuestra función de procesamiento. Esto asegura que la librería esté disponible para la función en tiempo de ejecución.

Esta capa específica está construida para la arquitectura ARM64, que es la arquitectura utilizada por los procesadores AWS Graviton2. Está optimizada para rendimiento y ahorro de costos. Sharp Layer

Thumbnail Generator Lambda

  const generator = new NodejsFunction(this, 'AwsSqsThumbnailGeneratorProcessor', {
      functionName: 'thumbnail-generator-processor',
      runtime: Runtime.NODEJS_LATEST,
      handler: 'handler',
      entry: path.join(__dirname, './functions/thumbnail-generator.ts'),
      layers: [sharpLayer],
      architecture: Architecture.ARM_64,
      timeout: cdk.Duration.seconds(60),
      environment: {
        QUEUE_URL: queue.queueUrl
      }
    });

    generator.addEventSource(new SqsEventSource(queue));

Definimos una función Lambda que procesa mensajes del SQS. La función se activa con nuevos mensajes en la cola y genera miniaturas usando la librería Sharp.

El código de la función está definido en el archivo thumbnail-generator.ts, que es responsable de descargar, procesar y subir imágenes.

IAM Policies

  queue.addToResourcePolicy(new PolicyStatement({
      effect: Effect.ALLOW,
      principals: [new ServicePrincipal('s3.amazonaws.com')],
      actions: ['sqs:SendMessage'],
      resources: [queue.queueArn],
      conditions: {
        ArnLike: {
          'aws:SourceArn': bucket.bucketArn,
        },
      },
    }));
  bucket.grantReadWrite(generator);
  queue.grantConsumeMessages(generator);

Definimos políticas IAM para permitir que el bucket de S3 envíe mensajes al queue y otorgamos a la función Lambda de procesamiento acceso de lectura/escritura al bucket y permiso para consumir mensajes del queue.

Cómo Utilizarlo

Si quieres probar este proyecto, sigue estos pasos:

Clona el Repositorio: AWS SQS Thumbnail Generator.
Actualiza la Configuración: Modifica los detalles de cuenta y región en el archivo /bin/aws-sqs-thumbnail-generator.ts.
Configura los Tamaños de Miniatura: Ajusta los tamaños en el archivo /functions/thumbnail-generator.ts a tus necesidades.
Despliega la Infraestructura: Utiliza AWS CDK para desplegar los recursos necesarios.
Prueba el Flujo: Sube una imagen al bucket de entrada en S3 y observa cómo se generan y almacenan automáticamente las miniaturas en el bucket de salida.

Conclusión

El AWS SQS Thumbnail Generator es un excelente ejemplo de cómo aprovechar la arquitectura serverless para construir flujos de trabajo escalables, eficientes y resilientes. Al desacoplar procesos y utilizar servicios como SQS, Lambda y S3, este proyecto demuestra cómo manejar tareas intensivas en recursos de manera sencilla.

Este proyecto puede expandirse añadiendo funcionalidades como reconocimiento de imágenes, extracción de metadatos o integración con otros servicios de AWS. Las posibilidades son infinitas, y la escalabilidad y flexibilidad de la arquitectura serverless la convierten en la opción ideal para este tipo de aplicaciones.

Recursos Adicionales

Cómo crear un portafolio de tus proyectos en Github Pages

Jehiel Martinez — Mon, 27 Jan 2020 04:42:50 +0000

En el arte de la programación todos necesitamos una galería.

Imaginemos esto, estas aprendiendo a programar, contruyes tus propios proyectos, algunos los terminas, la mayoría no. En el proceso terminas con mas de veinte repositorios entre locales y remotos nadando por alli.

De repente, recibes una llamada para una entrevista en un empleo como desarrollador web. La adrenalina sube, te pones ansioso, quieres demostrar a estas personas tus habilidades y lo increíbles que son tus proyectos.

¿El problema? no tienes idea de como mostrar tu trabajo.

Debiste planear esto antes. ¿Ya lo habías pensado verdad? Necesitas un portafolio web.

Github Pages

Segun la documentación Github Pages es un servicio que te permite publicar contenido web de una manera fácil y sencilla. Básicamente, solo debes de subir tus archivos estáticos a un repositorio especial de github.io y listo. Todo funciona.

Hoy vas a aprender como publicar un portafolio web de tres simples archivos: portfolio.html, portfolio.css y portfolio.js.

Si, no te compliques la vida, todavía.

Creando el repositorio

Ingresa a tu cuenta de Github, luego puedes crear un nuevo repositorio desde github.com/new o presionando el botón New.
En el nombre del repositorio debes ingresar user.github.io reemplaza user por tu nombre de usuario. Configúralo como público.

Subiendo archivos

Navega hasta la carpeta donde guardas los archivos estáticos de tu proyecto.

Opción 1 ("low code")

En github.com dentro de tu repositorio nuevo, presiona el botón Upload Files y arrastra el contenido de tu carpeta local hasta el area indicada.
Deja un mensaje para tu commit y haz click en Commit Changes.

Opción 2 ("the dev way")

En la carpeta de tu proyecto abre una terminal.
Si nunca has utilizado git en tu máquina o no sabes que es una llave SSH. Puedes hacer esto con la Opción 1.
En la terminal ingresa el comando git init. Esto iniciará un git dentro de la carpeta de tu proyecto.
En github.com dentro de tu repositorio, presiona el botón Clone or Download. Luego, copia la URL.
En la terminal de tu proyecto ingresa git remote add origin url. Reemplaza la url con la que copiaste de tu repositorio.
En la terminal verifica que el origin este listado con el comando: git remote -v. Deberias ver listada la url que copiaste.
Haz un commit de los archivos de tu proyecto agregándolos todos con git add . Luego ingresa el comando git commit -m "mi primer commit".
Haz un push al repositorio remoto: git push -u origin master.

Listo! Espera unos cinco minutos y deberías poder navegar a la url user.github.io reemplazando user por tu nombre de usuario y ver tu proyecto publicado.

Puedes tratar este repositorio como el homepage de tu portafolio y poner enlaces a otros proyectos.

Pero, ¿Cómo agregas más proyectos a tu portafolio?

Agregando Proyectos

Archivos Estáticos

Si tienes proyectos frontend básicos hechos con un conjunto de archivos html, css y js enlazados entre si. Puedes crear un repositorio nuevo siguiendo los pasos de la opción 2 de la sección anterior, luego:

Una vez tus archivos esten en github, ve a la pestaña de Settings dentro de tu repositorio.
Baja hasta la sección GitHub Pages y activa la opción Source y selecciona master branch.
Automáticamente se creara un nuevo proyecto en la dirección user.github.io/nombre-del-repositorio. Puedes utilizar estos enlaces en tu portafolio para mostrar tus mejores proyectos.

Websites con React

Supongamos que tienes un proyecto hecho con React en el cual has estado trabajando largo tiempo, incluso con un repositorio remoto en GitHub y varias ramas (todo un pro).

Agrega el paquete de node gh-pages con npm i -D gh-pages. Este comando instalara el paquete en las dependencias de desarrollo.
Edita el archivo package.json agregando dos scripts "deploy": "gh-pages -d build" y "predeploy": "npm run build"
Agrega la propiedad "homepage":"http://user.github.io/nombre-del-repositorio. Reemplazando user por tu usuario de GitHub y el nombre del repositorio remoto del proyecto.

{
    "homepage": "http://user.github.io/nombre-del-repositorio",
    ...
    "scripts": {
        "deploy": "gh-pages -d build",
        "predeploy": "npm run build"
    }
}

Agrega los ultimos cambios haciendo commit y push del proyecto.
Corre el comando npm run deploy para hacer el despliegue del proyecto y publicarlo en la hompage especificada.

Listo! En cinco minutos deberías de poder navegar a la url de homepage y ver tu proyecto de React desplegado!

Conclusión

A partir de aquí puedes agregar mas proyectos de frontend a tu portafolio desplegándolos en Github Pages y agregando los enlaces donde sea que los quieras mostrar.

De esta manera siempre estarás preparado para demostrar a los reclutadores no solamente el código sino también el resultado final de tus magníficas creaciones.