An Azure Function App using TypeScript for on-the-fly image transformations. View the blog post for more information.
^ Thanks DALL·E for the "High quality photo of a fly riding a space rocket"
This repo can be found at the following remotes:
The example function app uses https://dholmes.co.uk/img/ as the ORIGIN:
- Original Image: dholmes.co.uk/img/docker-tagging.png (PNG, 453kb, ~51ms)
- ImageFly webp (defaults): imagefly.dholmes.co.uk/docker-tagging.png (58kb, ~38ms)
- 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.
It's recommended to use ImageFLY with an Azure CDN to reduce the number of requests to the function app, and improve performance.
- Transforms and image based on the
ORIGINenvironment variable and theimagePathroute 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
- 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"
}- An installation of Node.js v18.12.1 (npm v8.19.2)
- An installation of Azure Functions Core Tools v4
- An installation of VSCode with the following extensions:
- A working knowledge of:
- Azure Functions (and the VsCode extension is installed)
- Node.js
- TypeScript
- Review and complete the
Prerequisitesabove - Copy ./local.settings-template.json to
./local.settings.jsonand replace the required environment variables npm i: Install dependenciesnpm run start:dev: Start the local DEV environment- Press
CTRL cto stop the local DEV environment
| 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 |
| 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 ./ |
- Des Holmes: Technical Leadership & Product Development
- About Blog
- Skills & knowledge: Technical Leadership, Technical Direction, Technical Delivery, Product Development, SaaS, DevOps, Azure Public Cloud
- Job Titles: CTO, VP Engineering, Head of DevOps, Technical Product Owner
- Example Projects: Development standards, DevOps, CI/CD, React, docker, Cost Management
- Contact: LinkedIn Twitter
- sharp: Fast image transformation library
- limiter: Rate limiter
- ChatGPT: For the moral support
- GitHub Copilot: For populating the boring stuff