Serverless dengan Cloudflare Workers
Tags: serverless, cloudflareworkers
Published: 2020-10-03 06:38:07

> It’s a movement that is defined by empowering developers to single-handedly build apps that handle production level traffic. They don’t have to actively manage scaling their infrastructure. They don't have to provision servers, or pay for resources that go unused. They can just focus on building. [https://www.serverless.com/learn/manifesto/](https://www.serverless.com/learn/manifesto/)

Kalau bicara soal _traffic handling_, semua developer pasti kenal dengan nama [Cloudflare](cloudflare.com/). Misalnya untuk urusan CDN, data [builtwith.com](https://trends.builtwith.com/cdn/Cloudflare) menunjukkan bahwa Cloudflare memegang market share terbesar dengan digunakan oleh 45,14% dari top 10k websites. Cloudflare sendiri mengklaim melayani lebih dari 25 juta _internet properties_.

Dalam bidang serverless computing Cloudflare memiliki [Cloudflare Workers](https://workers.cloudflare.com) yang men-support secara penuh bahasa pemrograman javascript. 
Dibandingkan dengan AWS Lambda, atau Google Cloud Functions, memang product yang ditawarkan oleh Cloudflare ini kalah populer.

Tapi ada keunikan sendiri yang membedakannya dengan AWS atau Google. Uniknya adalah code javascript tidak _running_ diatas Node.js, tapi menggunakan [V8 Isolates](https://developers.cloudflare.com/workers/learning/how-workers-works#isolates).

Dengan model ini tidak ada yang namanya [_cold start_](https://mikhail.io/serverless/coldstarts/aws/), yaitu ketika request pertama akan memperoleh response yang lambat karena instance membutuhkan waktu untuk "bangun" dari sebelumnya dalam kondisi "tidur" ketika tidak ada request yang masuk dalam rentang waktu tertentu. Dan juga tidak ada pemilihan lokasi seperti di AWS misalnya memilih lokasi `ap-southeast-1` untuk data center Singapore.

Kenapa tidak perlu memilih lokasi? Karena code akan _running_ di lokasi terdekat dengan user, atau biasa disebut dengan istilah [Edge Computing](https://en.wikipedia.org/wiki/Edge_computing). Misalnya jika user datang dari pulau Jawa, maka akan otomatis di-_serve_ oleh data center Cloudflare yang ada di Jakarta.

Untuk artikel ini saya membuat ulang url-shortener yang telah saya buat dua minggu yang lalu dengan Netlify redirects.

{% post armedi/menggunakan-netlify-sebagai-url-shortener-28jc %}

Kali ini menggunakan Cloudflare Worker. Saya tambahkan juga user interface di website [https://kuy.app](https://kuy.app) sehingga sekarang bisa digunakan oleh siapa saja.

### Setup

Dokumentasi lebih detil terdapat di [Gettting Started](https://developers.cloudflare.com/workers/learning/getting-started) resmi Cloudflare Workers.

- [Buat akun](https://dash.cloudflare.com/sign-up/workers) Cloudflare, kemudian di dashboard cloudflare [tambahkan website baru](https://support.cloudflare.com/hc/en-us/articles/201720164-Creating-a-Cloudflare-account-and-adding-a-website).

- Install Workers CLI

   ```bash
   npm install -g @cloudflare/wrangler
   ```

- Buat project baru dengan template starter

   ```bash
   wrangler generate my-worker
   cd my-worker
   ```

   Di dalam folder `my-worker` akan terdapat file konfigurasi `wrangler.toml` untuk konfigurasi account_id. Dapatkan account_id kamu di dashboard Cloudflare, lalu update file wrangler.toml

   ```toml
   name = "hello"
   type = "javascript"
   account_id = "<your cloudflare account_id>"
   workers_dev = true
   route = ""
   ```

- Untuk menjalankan di environment development

   ```bash
   wrangler dev
   ```

   Development server akan berjalan default di http://localhost:8787

### Menghandle Request dengan Cloudflare Worker

Menulis code javascript untuk Cloudflare Workers tidak sama dengan menulis code untuk Node.js, tapi seperti menulis code untuk Service Worker.

Request yang masuk ke workers akan diterima sebagai event `fetch`. Lalu untuk response yang dikirim ke user, dibuat menggunakan object [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) standard dari Web API.

Hello World dengan Cloudflare Workers:

```javascript
addEventListener('fetch', (event) => {
  event.respondWith(
    new Response('Hello world!', {
      headers: { 'content-type': 'text/plain' },
    })
  );
});
```

Detil dari request terdapat pada properti `event.request` yang juga merupakan object [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) standard dari Web API.

Jika body request yang masuk adalah berupa data JSON, bisa diparse dengan method `.json()`

```javascript
addEventListener('fetch', (event) => {
  if (event.request.method === 'GET') {
    event.respondWith(
      new Response('Hello world!', {
        headers: { 'content-type': 'text/plain' },
      })
    );
  } else {
    event.request.json().then((body) => {
      // echo user request
      event.respondWith(
        new Response(JSON.stringify(body), {
          headers: { 'content-type': 'application/json' },
        })
      );
    });
  }
});
```

## Publish ke Cloudflare Workers

Untuk mem-publish gunakan command berikut

```bash
wrangler publish
```


---


Nah untuk code yang berkaitan dengan metode url shortening bisa langsung dilihat saja di repository github berikut:

{% github armedi/kuy.sh no-readme %}

Untuk *data persistence*, di sini saya menggunakan [faunaDB](https://dashboard.fauna.com/) yang juga sangat cocok digunakan pada environment serverless.