Fun with Functions: Building a Serverless Meme Generator with Function Compute

By Jeremy Pedersen

What's This Blog Post About?

It's mostly about how to make funny memes using Alibaba Cloud Function Compute, which is a serverless computing platform. If you're more of a video person, you can see the whole process of building, testing, and deploying the function in this video, from the Alibaba Cloud YouTube channel.

The actual code you need to upload to Function Compute is already written, so this tutorial is mostly about showing you how Function Compute itself works, and why serverless in general is such a cool concept.

But before we get to deploying the actual code, let's take a step back and talk about the what and why of serverless.

Note: This article assumes basic command line skills on macOS or Linux.

What is Serverless?

In the simplest terms, serverless computing is a type of cloud service where most management tasks are left to the service provider: users simply upload code, and define when it should run (typically in response to an event, like an HTTP request).

The user doesn't even have to worry about installing the tools needed to run their code, like PHP or Python. This is all managed by the service provider. Alibaba Cloud offers a serverless computing product called Function Compute, which supports many popular languages including Java, Python (2 and 3), PHP, and Node.js. We'll be using it later on in this article to build our meme generator.

Ok, So Why Serverless?

The shift from on-premises servers to the cloud is already old news. Over the past ten years, cloud companies - including Alibaba Cloud - have seen explosive growth as businesses embrace the flexibility, simplicity, and stability of the cloud.

Early cloud adopters were driven by two key benefits: no need to manage your own hardware, and the flexibility to scale up (or down) almost instantly. With time and experience, enterprises began to invent entirely new ways to build, manage, and deploy applications on the cloud (something often called cloud native), with a focus on further reducing operations and maintenance costs by embracing managed services.

Cloud companies have responded by developing products and services aimed at removing more and more of the burden of managing hardware and software. Services like Alibaba Cloud's ApsaraDB for RDS or Container Service for Kubernetes remove the overhead of managing some of the software stack, allowing businesses to focus more of their resources on delivering valuable products and services, rather than on patching and upgrades.

Serverless computing is simply an extension of this already well-established trend: it takes away maintenance burdens and replaces them with scalability and flexibility.

Oh, and it's cheap. Serverless computing services typically charge users only when their functions are run, meaning you pay only for the resources you use, saving costs. No wonder interest in serverless has more than tripled since 2017, according to this Google Trends Data!

Getting Started

Let's take our first step into the world of serverless computing by creating a single Function Compute (FC) function. We'll be making an HTTP triggered FC function, which means Alibaba Cloud will give our function a web address (URL), and any time we make an HTTP request for that URL, our FC function will run.

Our function will have 3 inputs:

The URL of a picture in PNG or JPG format
Some text for the top of the picture (can be blank)
Some text for the bottom of the picture (can also be blank, if you like)

When the function runs, it will download a copy of the picture from the URL, add the top and bottom text, and then output a new, captioned picture, like this one:

1_jpeg

Installing Necessary Tools

Before we can actually build and deploy FC functions, we need to take care of a few things first:

Create an Alibaba Cloud account (if you don't already have one).
Install Docker. You can find installation instructions here.
Install Node.js and npm. You can find instructions here.
Install the Alibaba Cloud fun tool, which is used to build, test, and deploy FC functions. Installation instructions are here.
Install git (on Linux or macOS, you likely already have it installed). Instructions are here.

Why are Docker, Node.js, and git necessary?

Docker: FC functions are actually packaged as Docker images, so in order to build and test functions on your local computer, you need to have Docker installed.
The fun command line tools which are used to interact with Alibaba Cloud Function Compute are made available through npm, the Node.js package manager, which is why you need to have Node.js and npm installed.
We need git to download a copy of the code we will be deploying to Function Compute, which is stored on GitHub.

Configuring Fun

Before we can use fun, we need to configure it by running:

fun configure

You will need to enter an Access Key and Access Key Secret for your Alibaba Cloud account, as well as a default Alibaba Cloud region to use (if you don't specify a region when executing fun commands, this is the region fun will assume you want to use).

If you have never created an Access Key before, take a look at this document. Don't worry, it's easy!

Building And Deploying The Function

Now that all the necessary tools are installed and configured, we can build and deploy our function! A copy of the code (and some supporting utility programs) is available here on GitHub.

Fetch the code using git clone, like this:

git clone https://github.com/Alicloud-Academy/function-compute.git

This will create a directory on your computer called function-compute. Inside this directory, look for another directory called meme-maker. This is where our Function Compute code is, as well as some extra utilities and other information which we'll need later.

Build Our Function

Our function is written in Python 3, and it depends on the Python Image Library (PIL) to add text to pictures. The problem is, PIL is not a part of Alibaba Cloud Function Compute's Python 3 runtime. So how do we add it? We use the fun build command.

When we run fun build, the fun tool will look for a fun.yml file, which contains information about the tools or libraries we want to add to the Function Compute Python 3 runtime. Inside the fc-function directory, we have a fun.yml file which looks like this:

runtime: python3
tasks:
  - pip: Pillow
    local: true

This tells fun to add Pillow (the PIL library) to our Function Compute Python 3 runtime.

Ok, so let's build our function, like this:

fun build

If everything worked properly, you should see some output from fun which ends with these messages:

Build Success

Built artifacts: .fun/build/artifacts
Built template: .fun/build/artifacts/template.yml

Deploy Our Function

Ok, now we are ready to upload our code to Alibaba Cloud Function Compute. We do this using fun deploy. When we run fun deploy, the fun command will look for a file called template.yml which defines properties of our function such as:

The function's name
How long the function should be allowed to run (in seconds)
How much memory to allocate to our function (in MB)
What should trigger the function to run (for instance, an HTTP GET request)

As well as a few other properties. The template.yml file in the fc-function directory looks like this:

ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  meme-srv:
    Type: 'Aliyun::Serverless::Service'
    meme-fun:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: index.handler
        Runtime: python3
        Timeout: 60
        MemorySize: 128
        CodeUri: .
      Events:
        http-test:
          Type: HTTP
          Properties:
            AuthType: ANONYMOUS
            Methods: ['GET']

Actually, it's a ROS template. ROS, or Resource Orchestration Service is an Alibaba Cloud tool for automating the deployment of cloud resources, sort of like Terraform.

Let's deploy our Function to Alibaba Cloud:

fun deploy

The fun deploy command is interactive. It will first print out a summary of resources which will be created/changed when the command is run. Press Y and hit enter to confirm that you want fun to deploy the function.

Once it finishes running, you should see some output like this:

Waiting for service meme-srv to be deployed...
    Waiting for function meme-fun to be deployed...
        Waiting for packaging function meme-fun code...
        The function meme-fun has been packaged. A total of 211 files were compressed and the final size was 2.39 MB
        Waiting for HTTP trigger http-test to be deployed...
        triggerName: http-test
        methods: [ 'GET' ]
        url: https://5483593200991628.ap-southeast-1.fc.aliyuncs.com/2016-08-15/proxy/meme-srv/meme-fun/
        Http Trigger will forcefully add a 'Content-Disposition: attachment' field to the response header, which cannot be overwritten 
        and will cause the response to be downloaded as an attachment in the browser. This issue can be avoided by using CustomDomain.

        trigger http-test deploy success
    function meme-fun deploy success
service meme-srv deploy success

The most important parameter here is url. Make a note of the URL as we will need it for the next step.

Testing Out Our Meme Generator

To actually get our Function Compute code to run and make a meme for us, we need to make an HTTP GET request using the url parameter from the previous step. We can do that by copy-pasting the URL into a browser.

But wait! If you try that, your browser will download a text file called download.txt. Inside, you'll find just one line of text:

Error: imgUrl parameter is missing or malformed. The imgUrl parameter password was: MISSING

What happened? Our meme maker function has 3 inputs, top text, bottom text, and the URL of the picture we want to use to make our meme. We didn't supply any of that.

Unfortunately, we cannot just add these parameters by hand because they must be URL encoded. To help with this, we can use the genUrl.py code in the utilities folder.

Here's an example:

$>python3 genURL.py 
Could not find local .memeconfig file, creating one...
(REQUIRED) Enter FC URL (previous: ): https://5483593200991628.ap-southeast-1.fc.aliyuncs.com/2016-08-15/proxy/meme-srv/meme-fun/
(REQUIRED) Enter image URL (previous: ): https://i.kym-cdn.com/entries/icons/original/000/000/745/success.jpg
(OPTIONAL) Enter FC custom domain name (previous: ): 
(OPTIONAL) Enter meme top text (previous: ): deployed function
(OPTIONAL Enter meme bottom text (previous: ): made a meme

**********
https://5483593200991628.ap-southeast-1.fc.aliyuncs.com/2016-08-15/proxy/meme-srv/meme-fun/?imgUrl=https%3A%2F%2Fi.kym-cdn.com%2Fentries%2Ficons%2Foriginal%2F000%2F000%2F745%2Fsuccess.jpg&topText=deployed+function&bottomText=made+a+meme
**********

The item at the very bottom is our URL-encoded URL, which is ready to be copy-pasted into a browser! After a few seconds, we should see our browser download a new file called download.jpeg. When we look inside, we should see this!

2_jpeg

Feel free to look at the code in index.py under fc-function to get a feel for what exactly the FC function is doing to produce this result. The code at the top of that file is for processing (decoding) the URL parameters. If you are more interested in how the function actually makes a meme, take a look at imageFetcher.py under utilities, which skips all that messy URL decoding stuff and focuses on just making memes.

Next Steps

Feeling the power of Function Compute? Ready to dive into serverless? For a theoretical introduction and to see how much more sophisticated your functions can get, check out the Function Compute documentation.

For a more hands-on look at what else Function Compute can do, log into your Alibaba Cloud account. From the Function Compute console, choose Template Function under Create Function, and take a look at the many pre-built function-based applications available to launch and play with.

Take Your Learning To The Next Level

Want to go deeper, check out this online video course on Using Function Compute To Acquire Users Registration Info.

Community

Fun with Functions: Building a Serverless Meme Generator with Function Compute

What's This Blog Post About?

What is Serverless?

Ok, So Why Serverless?

Getting Started

Installing Necessary Tools

Configuring Fun

Building And Deploying The Function

Build Our Function

Deploy Our Function

Testing Out Our Meme Generator

Next Steps

Further Reading

Take Your Learning To The Next Level

Read next post:

JDP

You may also like

Comments

JDP

Related Products

Serverless Workflow

ROS(Resource Orchestration Service)

CloudOps Orchestration Service

Container Service for Kubernetes