Quickly build Serverless online Image processing application

Author: Yi Xian

First, a few important concepts emerge from this article:

Function Compute: Function Compute is an event-driven service that lets the user write code and upload it instead of managing the server. Function computing prepares computing resources and runs user code on an elastic scale, with users paying only for the resources consumed by the actual code running. Function calculation refer to more information. ImageMagick: ImageMagick is an open source software suite for viewing and editing bitmap files and converting image formats. It can read and edit more than 100 image formats. See wikipedia entry

ImageMagick is a sharp tool for image processing, with the help of ImageMagick can easily achieve the image cropping and scaling. Although many languages encapsulate ImageMagick’s call library, it is often not architecturally appropriate to place image processing functions and core business functions in the same service. There are two reasons for this:

On the one hand, image processing relies on external bin, and the compiled secondary system is not portable, which brings trouble to packaging and publishing. On the other hand, image processing is often more expensive in computing resources. For most business systems, image processing belongs to the edge business rather than the core business, so it is not cost-effective to reserve more computing resources for the whole service. A better option would be to slice off the image-processing business as a microservice and deploy it on top of a resilient underlying service. For such technical needs, Serverless is a good fit.

This article focuses on how to quickly deploy an elastic and highly available image processing service on a functional computing platform, and then easily customize it from there.

Quick start

Let’s use the application center of function computation to quickly deploy the image conversion service.

Open the function to calculate the Image Resizer application details page. If you have not opened the function computing service, you may need to open the service is free, in addition to the function computing free monthly quota, trial service will not cost.

Scroll to the bottom of the Image Resizer application details page and click the Deploy Now button.

Fill in the app name: my-image-Resizer, and click the deploy button.

Copy the url in HttpTriggerEndpoint.

Open the url in your browser or use curl to invoke the url. Note: Since there is no domain name binding, the app center will download images by default instead of opening them directly in the browser.

curl 'https://xxxxx.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/my-image-resizer-ResizeService-5A40B5A8B981/my-image-resizer -ResizeFunction-3E71C57C0094/' --output resized.jpg
Copy the code

The working principle of

This is a single-function application combined with Http Trigger. Http Trigger exposes the service in the Http GET method. The client passes three request parameters: URL, width and height. Among them

• Url indicates the address of the source image to be processed
• Width indicates the width of the cropped or scaled image
• Height indicates the width of the cropped image. If this parameter is missing, it indicates that the image is resized.

The architecture diagram of the application is as follows:

After receiving the HTTP request, the FC function performs the following three steps:

1. Download the image to which the URL points
2. Use Imagemagick for image conversion
3. The image is returned to the client through HTTP protocol

Above, we quickly launched a picture conversion service through the application center of function calculation. Function calculations are charged per call, so the above services do not incur a charge even if they remain online. And since the function calculation has a free monthly quota, there is no charge for daily development calls.

Custom development

brew cask install docker
brew tap vangie/formula
brew install fun
Copy the code

$fun - version 3.1.3Copy the code

Initialize the

git clone https://github.com/vangie/fc-image-resizer
cd fc-image-resizer
Copy the code

npm install
Copy the code

Run locally

$ fun local start
using template: .fun/build/artifacts/template.yml
HttpTrigger httpTrigger of ResizeService/ResizeFunction was registered
        url: http://localhost:8000/2016-08-15/proxy/ResizeService/ResizeFunction
        methods: [ 'GET' ]
        authType: ANONYMOUS


function compute app listening on port 8000!
Copy the code

And then use the browser or curl debugging http://localhost:8000/2016-08-15/proxy/ResizeService/ResizeFunction

fun deploy
Copy the code

Refer to the link

1. Funcraft
2. Aliyun Serverless VSCode Extension