Cloudflare Workers でAPIを立ててみました。 備忘録です。

バージョン

構成は次のとおりです

• Cloudflare Workers
• Workers KV
• Hono v3.3.0
• wrangler v3.2.0

wrangler

wrangler はCloudflareのCLIです。 次のコマンドでインストールできます。

npm install -g wrangler

あらかじめログインしておきましょう。コマンドを叩くとブラウザが立ち上がります。

wrangler login

create-hono

create-hono でアプリケーションを作成できます。

$ npm create hono@latest myapp

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-hono version 0.2.6
✔ Which template do you want to use? › cloudflare-workers
cloned honojs/starter#main to /Users/me/myapp
✔ Copied project files

どのテンプレートを使うか聞かれますが、今回は cloudflare-workers を選びました。

コマンドを叩くと、ディレクトリ構造は次のようになりました。

$ tree
└── myapp
    ├── README.md
    ├── package.json
    ├── src
    │   └── index.ts
    ├── tsconfig.json
    └── wrangler.toml

index.ts がエントリーポイントです。アプリケーションコードが書かれます。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello Hono!'))

export default app

wrangler.toml では Workers の設定が出来るようです。

name = "my-app"
compatibility_date = "2023-01-01"

ドキュメントはこちらです。
compatibility_date を見ると分かりますが、wrangler.toml ないしは Workers の設定項目は変わることがあるようです

Workers KV の作成

Workers KV はコマンドラインから作成できます。

$ wrangler kv:namespace create MY_KV
 ⛅️ wrangler 3.2.0
------------------
🌀 Creating namespace with title "my-app-MY_KV"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "MY_KV", id = "aaa" }

メッセージにあるとおり、一番最後の行を wrangler.toml に記載します。

name = "my-app"
compatibility_date = "2023-01-01"

kv_namespaces = [
  { binding = "MY_KV", id = "aaa" }
]

これで Workers から KV を使うことができます。

Hono でKVを読み書きする

ここでは Hono の Bindings を使って Workers KV を読み書きしてみます。

import { KVNamespace } from '@cloudflare/workers-types'
import { Hono } from 'hono'

type Bindings = {
  MY_KV: KVNamespace
}

const app = new Hono<{ Bindings: Bindings }>()

app.get('/api/items/aa', async (c) => {
  // MY_KV から get
  const item = await c.env.MY_KV.get('aa')
  return c.json({success: true, aa: item})
})

app.post('/api/items', async (c) => {
  const { value } = await c.req.json()
  if (typeof value === "string") {
    // MY_KV へ put
    await c.env.MY_KV.put("aa", value)
  }
  return c.json({success: true})
})

export default app

ポイントは Bindings です。 KV を作成し Workers にバインドすると Workers から KV へアクセスできます。

アクセスにはグローバル変数を使います。ここでは MY_KV と言う名前で作成したので、MY_KV と言うグローバル変数で読み書きできました。 詳しくはドキュメントを参照ください。

deploy

deploy には wrangler を用います。

package.json に deploy コマンドが定義されているので叩いてみましょう。

$ npm run deploy

> [email protected] deploy
> wrangler deploy --minify src/index.ts

 ⛅️ wrangler 3.2.0
------------------

Your worker has access to the following bindings:
- KV Namespaces:
  - MY_KV: aaa
Total Upload: 104.30 KiB / gzip: 39.33 KiB
Uploaded my-app (1.43 sec)
Published my-app (0.35 sec)
  https://my-app.example.workers.dev
Current Deployment ID: bbb

以上で作成できました。