Cloudflare Workers: Solusi serverless edge function termudah, tercepat, termurah, what else..?
Tags: javascript, beginners, serverless
Published: 2023-04-16 03:00:02

> Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.

Yaitu dengan [Cloudflare Workers](https://developers.cloudflare.com/workers/). 

---

Berikut ini beberapa tips atau info terkait penggunaan salah satu produk unggulan dari [Cloudflare](https://www.cloudflare.com/) ini.

Untuk mulai menggunakan workers ini kita perlu menginstall aplikasi *cli* bernama **wrangler**. 

Aplikasi wrangler ini sangat flexible, dimana pada umumnya nodejs tooling diinstall sebagai bagian dari *development dependency* npm project kita, wrangler bisa juga digunakan sebagai standalone cli untuk berinteraksi dengan produk-produk Cloudflare lainnya, juga bisa digunakan sewaktu-waktu kita ingin membuat temporary prototipe dengan cepat, tanpa project. 

Untuk itu, saya merekomendasikan untuk menginstall aplikasi ini secara global.

```bash
npm install --location global wrangler
```

Dan selanjutnya pastikan sudah terinstall dengan benar, --selalu lakukan proses verifikasi yah kalo-kalo abis menginstall sesuatu sebelum melanjutkan ke pekerjaan berikutnya, dari pada ketemu *error* nya nanti belakangan saat kita sedang melakukan hal lain yang pada akhir nya bisa memberikan indikasi yang salah tentang masalah apa yang sebenarnya terjadi.

```bash
npm ls --location global
wrangler --version
```

Oh ya, satu tips lagi, untuk paket-paket npm yang kita install global sebaiknya kita maintain supaya senantiasa *up to date*, jadi kalo misal kita temukan hal yang aneh atau tidak biasa, kita bisa langsung bereaksi untuk memperbaiki sekaligus mengupdate pengetahuan dan pengalaman kita. 

Cara update nya sama saja seperti kita menginstall pertama kali, yaitu dalam hal ini kita mau mengupdate wrangler, maka *command* nya adalah: 

```bash
npm install --location global wrangler
```

Oh ya lagi, mumpung lagi install paket npm global, saya tambahin satu rekomendasi lagi yaitu untuk menginstall [pnpm](https://pnpm.io/) sebagai package manager pengganti dari `npm` bawaan instalan `nodejs`, **pnpm** ini akan menghemat disk, waktu, dan tentunya bandwidth yang masih mahal di negara kita ini.

Nah selanjutnya, baru ini kita install wrangler nya:

```bash
npm install --location global pnpm
```

---

Wrangler terbaru (versi 2) secara otomatis mem-*bundle* source code kita dengan [esbuild](https://esbuild.github.io/). Kita bisa mengecek hasil dari aktual bundling nya si wrangler seperti apa dengan cara:

```bash
$ wrangler publish --dry-run --outdir /tmp/dist
```

Nah, kita bisa melihat apa yang nantinya akan di-*upload* ke Cloudflare workers di file `/tmp/dist/index.js`. 


Terkait dengan proses bundling, berikut beberapa tipe "*module*" yang disupport:

```
- .txt
- .html 
- .bin
- .wasm dan .wasm?module
```

Jadi selain js atau ts, kita bisa meng-**import** file-file tersebut dalam project yang kita buat.


---

Sebagai penutup, saya sampaikan rekomendasi langkah-langkah untuk membuat project *workers* baru dari nol.

Dibanding cara yang lebih singkat yaitu dengan `wrangler init`, berikut ini adalah langkah-langkah manual yang memberikan kita informasi lebih banyak terkait apa-apa saja yang terinstall pada saat `wrangler init`.

```bash
mkdir -p /tmp/x5 && cd /tmp/x5
pnpm init
pnpm install --save-dev typescript@latest
pnpm install --save-dev vitest@latest
pnpm exec tsc --init
```

Sampai saat ini, kita belum menambahkan wrangler kedalam project tersebut. Untuk menambahkannya, kita gunakan init sbb: 

```bash
wrangler init
```

Dari prompt yang muncul, kita isikan seperti berikut ini:

```
... use git to manage this Worker?  --> yes
... install wrangler into package.json?  --> yes
... install the type definitions for Workers.. --> yes
... create a Worker at src/index.ts? --> Fetch handler
... write your first test with Vitest? --> yes
```

Perhatikan ada info yang muncul terkait TypeScript typing yang mesti kita tambahkan manual dalam hal ini yaitu: 

```
✨ Installed wrangler, @cloudflare/workers-types, and vitest into devDependencies
🚨 Please add "@cloudflare/workers-types" to compilerOptions.types in tsconfig.json
```

Edit file `tsconfig.json`, hasil dari penambahan informasi typing ini di sekitar baris 35 sbb:

```
...
...
     "types": ["@cloudflare/workers-types"],
...
...
```

Nah, sekarang kita verifikasi semua sudah terinstall dengan benar.

```bash
pnpm exec vitest run
```

Jika sukses, maka hasil nya kurang lebih mirip-mirip berikut:

```
 RUN  v0.30.1 /private/tmp/x5

 ✓ src/index.test.ts (1) 743ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  09:28:31
   Duration  2.18s (transform 83ms, setup 0ms, collect 584ms, tests 743ms, environment 0ms, prepare 159ms)
```

Selanjutnya kita bisa mulai membuat aplikasi worker kita di `src/index.ts`. File ini adalah file ES module sebagaimana biasanya, berisi entri point dari aplikasi, silahkan berkreasi sesuka hati, panduan dan contoh resmi nya lengkap dan mudah ada [disini](https://developers.cloudflare.com/workers/examples/).

Untuk memulai proses development, seperti biasa, kita start development server sbb:

```
pnpm exec wrangler dev
```

---

Untuk mendeploy nya, secara umum proses nya cukup mudah, tinggal ikuti saja instruksi yang muncul dari command-command berikut ini: 

```bash
pnpm exec wrangler login
pnpm exec wrangler publish
```

Output nya kurang lebih seperti berikut:

```
 ⛅️ wrangler 2.15.1
--------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded x5 (2.66 sec)
Published x5 (6.68 sec)
  https://x5.datafy.workers.dev
Current Deployment ID: e8d976fc-8d92-46c0-8d46-6a5338b09c4d
```

Sekarang aplikasi kita sudah online di url yang disebutkan diatas. Alhamdulillah.

Selamat berkreasi.