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
以上で作成できました。