Build blazing fast serverless apps using Cloudflare 🏃

Charles Géry — Thu, 05 Oct 2023 14:31:38 +0000

TL;DR

⚡Build a blazing fast Cloudflare worker that stores, and return random quotes.

Intro

Do you like speed? 🏃 Do you like simplicity?Then, Cloudflare Workers might be the solution for your next application.

Cloudflare is a cloud-provider, most-known for their CDN, offering several services to build cloud applications. Among them, Cloudflare Workers is a serverless service that allows you to run serverless functions at edge (like Lambda@Edge if you are an AWS user). This means that your code runs closer to end-users, resulting in blazing fast response times.

Disclaimer: In my opinion Cloudflare Workers are best suited to small projets. I haven't found satisfying tools to deploy and manage several Cloudflare Workers on big projects. In that situation, a service like AWS Lambda is probably more suited.

That being said, Cloudflare Workers are super easy to setup and offer a great DevX if you want to deploy simple applications.

To show you that, we are going to build a simple worker, that allows you to save quotes in a key-value store, and return random quotes among the ones you saved.

Creating your first worker 🥇

Prerequisites

A Cloudflare account (it is super easy to setup)

First create a new folder where your projet will reside. Inside this folder, you can add a package.json file:

{
  "name": "awesome-quotes-service",
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230801.0",
    "typescript": "^5.1.6",
    "wrangler": "^3.3.0"
  }
}

We will be using Typescript, so you can also add a tsconfig.json file with your TS configuration:

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "lib": ["esnext"],
      "preserveSymlinks": true,
      "types": ["@cloudflare/workers-types"]
    }
  }

Then you can create an index.ts file that will contain the code of our function:

export default {
  async fetch(
    request: Request,
    env: Env,
): Promise<Response> {

    return new Response(
      JSON.stringify('Hello from my first Cloudflare Worker'),
      {
        // Headers configuration of API response
        headers: {
          'content-type': 'application/json',
          'Access-Control-Allow-Headers': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          'Access-Control-Allow-Origin': '*',
        },
      }
    );
  },
};

In this file, we are creating a fetch function that contains our Cloudflare Worker code. It takes as an input:

A request variable containing your request data (eg. body, url, method etc…),
An env variable, that contains the binding associated to your worker (more of that later…)

Inside it, we return a Response object that contains two parameters:

The body of your response,
Some response configuration, here our response headers

Finally, you can create a wrangler.toml file. Wrangler is a command-line tool developed by Cloudflare that is used for building, deploying, and managing Cloudflare Workers. We are going to use it here to configure our worker, and deploy it using the CLI.

// Name of your Cloudflare Worker
name = "quotes"
// A date which will be used to determine which version of the Workers runtime is used.
compatibility_date = "2023-07-21"

After installing your project dependencies using your favorite package manager, you can run npx wrangler deploy ./index.ts to tell Wrangler to deploy your worker to Cloudflare.

Congratulations 🎉, you just deployed your first worker 💪 ! The url where it is available should be displayed in your terminal. You should see our 'Hello from my first Cloudflare Worker' if you call this url.

Going further

Now that we have a working worker 😲 we are going to take things one step further and add some storage to build our quotes service. For that we are going to use KV. KV is a distributed and highly scalable key-value data store offered by Cloudflare.

We’ll first need to set it up inside Cloudflare’s dashboard before using it in our worker. For that you can go to the KV tab once connected to your Cloudflare account, and select Create a namespace that you will call quotes.

Now that we have a KV store we will be able to store, and retrieve random quotes in it. Let’s start by updating our worker to store quotes. We are going to add a /create HTTP route, that you can call with a quote to save it in KV.

We first need to update our wrangler.toml to define a binding with the quotes KV store to be able to refer it inside our code. You will need the id of your quotes KV store that you can find on the Cloudflare dashboard.

name = "quotes"
compatibility_date = "2023-07-21"
kv_namespaces = [
    { binding = "quotes", id = "<Copy the ID of your KV Store>" }
]

Then, we will update our worker with the code to store data in the KV store:

export interface Env {
  quotes: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env
  ): Promise<Response> {

    let url = new URL(request.url);

    switch (url.pathname) {
      case '/create':

        // We generate a random key for your quote
        const id = crypto.randomUUID();

        // We retrieve the quote you pass in your request body
        const quote = (await request.json() as any).quote;

        // We store your quote in the KV Store
        await env.quotes.put(
          id,
          quote
        );

        return new Response(
          JSON.stringify('Success'),
          {
            headers: {
              'content-type': 'application/json',
              'Access-Control-Allow-Headers': '*',
              'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
              'Access-Control-Allow-Origin': '*',
            },
          }
        );
        };
    }};

You can notice several things:

We added an interface that refers to our quotes KV store. This allows us to directly interact with the store through the env parameter of the worker.
We are retrieving the body of the request using request.json()
We store the quote in KV using the put function, that takes a key and a value as parameters.

If you redeploy your worker using wrangler , call it with a POST request on the /create route, and a JSON payload containing a quote parameter, you should be able to store quotes in your KV store. You can check in your Cloudflare dashboard that it is indeed working 🚀 !

Retrieving random quotes

To wrap things up, we need to be able to retrieve random quotes from our worker. Let’s do that ! We will add a new /get route, that will return a random quote from our KV store. Just add a new case in the switch:

case '/get':
    // We retrieve all the quotes keys
    const quotesKeys = (await env.quotes.list()).keys.map((key) => key.name);

    // We pick a random key, and retrieve it from the KV Store
    const randomId = quotesKeys[Math.floor(Math.random() * quotesKeys.length)]
    const randomQuote = await env.quotes.get(randomId, 'text');

    return new Response(
      randomQuote,
      {
        headers: {
          'content-type': 'application/json',
          'Access-Control-Allow-Headers': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          'Access-Control-Allow-Origin': '*',
        },
      }
    );

In this code we are:

Listing all the keys of our quotes stored in the KV store using the list() function,
We are getting a quote from the KV store using the get() function

If you redeploy your Cloudflare Worker you should now be able to call the HTTP GET /get endpoint to retrieve a random quote 🎊 !

Conclusion

Congratulations, you just created a worker to store and return random quotes ! If you want to push things further, you can plug a Slack bot on it for instance.

I hope you liked this article, don’t hesitate to ask the questions you have in the comments !

You thought serverless was green? Here is how to really make it sustainable! 🌱

Charles Géry — Wed, 27 Apr 2022 12:03:03 +0000

Serverless is an amazing way to do cloud computing. It removes the hassle of managing the infrastructure of your app and lets you focus on what really matters: delivering value.

It also has a great side benefit: it avoids wasted idle CPUs. On more traditional infrastructures, tech teams don’t always optimize the reserved capacity of their servers relative to the actual workload they have to deal with. With serverless, cloud providers have a way to share resources between clients and optimize their use. Your serverless app will scale easily and will only be running when your users need it. For instance, AWS will launch Lambda functions instances and run their code only when required.

Because of that, serverless is often considered greener than traditional applications in the cloud.

Is your serverless application perfectly sustainable?

Going serverless is considered a sustainable solution to develop applications. This is not a reason to be complacent. You can indeed implement by mistake anti-patterns that will impact negatively your actual resource consumptions. But do not worry, you can take action to improve the sustainability of your application.

*“Never settle for average.” ― Steve Jobs*

There are many sustainability mistakes you can make when developing a serverless application. For instance, you can:

Forget using lifecycles for your data stored in S3 (you can save resources by storing your data in an appropriate type of bucket),
Have servers far from your end-users (minimizing the distance traveled by your data helps save resources),
Use a database service that is not suited to your needs (having good data access patterns and a DB that fits your data schema is more resource efficient)...

At Kumo, Theodo's serverless team, we work on sustainable serverless solutions. In his article, our colleague Thomas Aribart provides you with a simple way to monitor your carbon emissions using Cloud Carbon Footprint. Monitoring your emissions is a first step to avoid bad sustainability patterns. This way you can see and control the evolution of your emissions as your application evolves and be aware if one of your features pollutes abnormally.

You can make your serverless application even greener!

Monitoring your emissions is great, but we wanted to take the next step and find actionable ways to reduce our emissions. We read the AWS Sustainability Pillar for you and listed concrete actions to implement the good practices it describes.

It resulted in a sustainability audit for your AWS serverless applications that lists these actions. Within 10 minutes, you will be able to fill in the whole form and receive a score out of 100. A score of 100 means that you have the greenest app ever 🌴. After filling out the audit, you will be provided with a list of recommendations that will help you make your application more sustainable.

After taking the recommended actions, you should see your application emissions lower in your carbon monitoring dashboard! 🥳

There’s more, by performing this audit and taking the associated actions, you will make your application much soberer, which can also improve its performance and monthly cost.

The instructions and the audit are available here.

If you have any questions or feedback to improve the audit, feel free to reach out to us!

Juliette Fournier & Charles Géry are software engineers at Kumo, serverless expertise by Theodo

DEV Community: Charles Géry