Skip to content

On-the-fly image transformations using an Azure Function App & Typescript

License

Notifications You must be signed in to change notification settings

desholmes/imagefly

Repository files navigation

ImageFLY: On-the-fly image transformations

An Azure Function App using TypeScript for on-the-fly image transformations. View the blog post for more information.

ImageFly

^ Thanks DALL·E for the "High quality photo of a fly riding a space rocket"

This repo can be found at the following remotes:

  1. GitHub: desholmes/imagefly
  2. Azure DevOps: DesHolmes/_git/imagefly

The example function app uses https://dholmes.co.uk/img/ as the ORIGIN:

  1. Original Image: dholmes.co.uk/img/docker-tagging.png (PNG, 453kb, ~51ms)
  2. ImageFly webp (defaults): imagefly.dholmes.co.uk/docker-tagging.png (58kb, ~38ms)
  3. ImageFly jpeg (format:jpeg, quality:30): imagefly.dholmes.co.uk/docker-tagging.png?format=jpeg&quality=30 (48kb, ~35ms)

Note: The example response times provided are based on a warmed up cache, initial response times will be slower.

See the full list of supported query params in the Usage section below.

System Overview

It's recommended to use ImageFLY with an Azure CDN to reduce the number of requests to the function app, and improve performance.

Overview

Usage

GET: /api/v1/image/{imagePath}

  • Transforms and image based on the ORIGIN environment variable and the imagePath route parameter
  • Query Params:
    • format: string: The format of the image; Supports: jpeg, png, webp (Default: webp)
    • quality: number: The quality of the image, Supports: 0-100 (Defaults: 50)

Returns: A transformed image, or a 404 if the image is not found.

Example: Returns format: webp, quality:30: imagefly.dholmes.co.uk/docker-tagging.png?format=webp&quality=30

GET: /api/v1/health-check

  • Health check route
  • Request URL GET: /api/v1/health-check

Used by monitoring to check system health.

Example response:

{
  "error": false,
  "message": "Service is available"
}

Development

Prerequisites

  1. An installation of Node.js v18.12.1 (npm v8.19.2)
  2. An installation of Azure Functions Core Tools v4
  3. An installation of VSCode with the following extensions:
    1. Spelling Checker
    2. ESLint
    3. Prettier
  4. A working knowledge of:
    1. Azure Functions (and the VsCode extension is installed)
    2. Node.js
    3. TypeScript

Getting Started

  1. Review and complete the Prerequisites above
  2. Copy ./local.settings-template.json to ./local.settings.json and replace the required environment variables
  3. npm i: Install dependencies
  4. npm run start:dev: Start the local DEV environment
  5. Press CTRL+c to stop the local DEV environment

Environment Variables

Name Description
LIMITER_TOKENS number: Optional - The number of tokens to allow per LIMITER_INTERVAL (Default: 150)
LIMITER_INTERVAL string: Optional - The interval (Default: hour)
ORIGIN string: Required - The origin of the image source.
AzureWebJobs.v1HeathCheck.Disabled boolean: Optional - To disable the v1HeathCheck function
AzureWebJobs.v1Image.Disabled boolean: Optional - To disable the v1Image function

Commands

Command Description
npm start Starts the Function App in Azure func start
npm start:dev Starts a local dev environment by running npm start and npm run watch concurrently
npm run build Create a build tsc
npm run watch Watch and create a build tsc tsc -w
npm run audit Runs npm audit --production --audit-level=critical to check for known vulnerabilities
npm run lint Run eslint eslint --max-warnings=0 --ext=ts,json ./
npm run lint:fix Run eslint with fix arg eslint --max-warnings=0 --fix --ext=ts,json ./

Credits