devlog

Cloudflare Workers + Hono + KV でAPIを作ってみた

2023-07-17

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

以上で作成できました。

  • 作成日
    2023-07-17
  • 更新日
    2023-07-17