How I save $$$ by using Cloudflare Workers

Hi ! In this post (and as the title say) i'll show you how I save $$$ by using Cloudflare Workers instead of AWS's API-Gateway to proxy requests to my AWS Lambda functions.

Why use Cloudflare Workers ?

It's all about the cost. 10 million api requests will cost you :

• With API-Gateway: \$35
• With Cloudflare Workers: \$5

We can say that Cloudflare Workers saves you 85% compared to API-Gateway !!

Getting Started

First, create a new node project, in this blog post i'll be using yarn:

mkdir worker-proj
cd worker-proj
yarn init -y

then install some dev packages that we'll need mainly for bundling our worker:

yarn add dotenv-webpack webpack webpack-cli -D

also we need aws4 to sign our requests to aws:

yarn add aws4

Webpack config

We're using webpack in order to bundle our code and use it as a worker.

Create a new file in the project and call it webpack.config.js, and paste the following code into it:

const Dotenv = require('dotenv-webpack')

module.exports = {
  entry: './worker.js', // This will be our entry file
  mode: 'production', // We're building for production to optimize our worker
  plugins: [new Dotenv()], // we'll be using a .env file to store our TOKENS
  optimization: {
    minimize: true,
  },
  performance: {
    hints: false,
  },
  output: {
    path: __dirname + '/dist', // this is the output folder
    publicPath: 'dist',
    filename: 'worker.js', // and this is where our final code will be at.
  },
}

The Tokens we need

We need to specify 4 essential params:

• ACCESS_KEY, SECRET: Get them from AWS IAM.
• REGION: The region where our Lambda func lives.
• FUNCTION: AWS Function name.

once you have all these params, create a .env file and add them to it.

Writing the worker

First, create a file, we'll name it worker.js.
Then, import aws4 and create a credentials object to store our AWS keys:

import aws4 from 'aws4'

const credentials = {
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET,
}

Now we write our worker function. It accepts a request param and returns the response of a request sent to our Lambda function.

async function worker(request) {
  const reader = request.body.getReader()
  // getPayloadFromReader is a function that we use to get the body of a request
  const payload = await getPayloadFromReader(reader)
  // we sign our request using the credentials we created earlier
  const req = aws4.sign(
    {
      method: 'POST',
      service: 'lambda',
      region: process.env.REGION,
      path: `/2015-03-31/functions/${process.env.FUNCTION}/invocations/`,
      body: JSON.stringify({ httpMethod: 'POST', body: payload }),
    },
    credentials
  )
  // then we send the signed request to the lambda function and return the response
  return fetch(`https://${req.hostname}/${req.path}`, {
    method: req.method,
    headers: req.headers,
    body: req.body,
  })
}

// The next 3 lines show you how to invoke a worker function using Cloudflare Workers
addEventListener('fetch', event => {
  event.respondWith(worker(event.request))
})

As for getPayloadFromReader:

function binary_to_string(array) {
  // We need this function to convert binary to string
  var result = ``
  for (var i = 0; i < array.length; ++i) {
    result += String.fromCharCode(array[i])
  }
  return result
}

async function getPayloadFromReader(reader) {
  let payload = ''
  while (true) {
    let { done, value } = await reader.read()
    if (done) {
      break
    }
    payload = payload + binary_to_string(value)
  }
  return payload
}

Time to test !

To test what we've done so far, add the build script to your package.json:

{
  "name": "worker",
  "version": "1.0.0",
  "main": "worker.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p --progress --colors"
  },
  "dependencies": {
    "aws4": "^1.8.0"
  },
  "devDependencies": {
    "dotenv-webpack": "^1.5.7",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

and run yarn build, then copy the code that'll find in dist/worker.js.

Once you copy the worker code, head to https://cloudflareworkers.com and paste the worker code in the red-bordered section then click on update.

In the right section (green-bordered) of the screenshot above you can see test different kinds of requests.

Conclusion

Now you can save some 💰💰 by using Cloudflare Workers !!

Have a great week !