AWS CDN Image Resizer

TypeScript AWS CDK construct which creates an basic image resizing CDN using CloudFront, S3, API Gateway and Lambda.

Once deployed images in the deployed S3 bucket are accessible via the deployed CloudFront endpoint e.g.

https://d3i3pfoeixxxxx.cloudfront.net/foo.png

To request a resized version of an image prefix the S3 key with dimensions.

https://d3i3pfoeixxxxx.cloudfront.net/200x200/foo.png

Dimensions can be specified as <width>x<height>, <width> or x<height> (note the preceding x when specifying height only). Images are resized using sharp which is deployed as a lambda layer.

Note

• AWS publishes and maintains Serverless Image Handler, which may be a better choice depending on your use case (does not use AWS CDK).

Construct Props

| Name | Type | Description | | ---------------------------- | ---------------- | ----------------------------------------------------------------------------------- | | restApiName | string | Name for the REST API | | defaultCorsPreflightOptions? | CorsOptions | CORS options used by the REST API and Lambda function | | functionMemory? | number | Amount of memory to assign to lambda function. Default 256. | | storageClass? | string | Storage class used for derived images. Default 'STANDARD_IA'. | | maxAgeSeconds? | number | CacheControl to set on derived images written to S3 bucket. Default 604800 (7 days) |

Props

The following properties are available on this construct's instance.

| Name | Type | | ------------------------- | ------------------------------ | | cloudFrontWebDistribution | CloudFrontWebDistribution | | bucket | Bucket | | restApi | LambdaRestApi | | resizerFunction | Function |

Usage

import { Construct, Stack, StackProps } from '@aws-cdk/core';

export class MyStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const cdnImageResizer = new CDNImageResizer(this, 'CDNImageResizer', {
      restApiName: 'my-image-resizer-api',
      defaultCorsPreflightOptions: {
        allowOrigins: ['example.com'],
      },
    });
  }
}