WranglerコマンドでCloudflareのKVストアを立ち上げてみました。

Cloudflare Workersプロジェクトをセットアップ

KVはWorkersのプロジェクト内に作成します。

Wranglerでは、initコマンドからプロジェクトをセットアップできます。

 % wrangler init  

✨ Created wrangler.toml
✔ Would you like to use TypeScript? … yes
✨ Created tsconfig.json
✔ Would you like to create a Worker at src/index.ts? › Fetch handler
✨ Created src/index.ts
✔ Would you like us to write your first test with Vitest? … yes
✨ Created src/index.test.ts

KV作成と、Workersプロジェクトへの追加

KVの作成は、kv:namespace createを使います。

Bindingについては、自動で設定してくれる様子でした。

% wrangler kv:namespace create first_kv

🌀 Creating namespace with title "worker-first_kv"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "first_kv", id = "08ccxxxxxxxxxxxxxx" }
✨  Done in 2.02s.

コマンド実行結果にある、{ binding = "first_kv", id = "08ccxxxxxxxxxxxxxx" }をwrangler.tomlに登録しましょう。

name = "cloudflare"
main = "src/index.ts"
compatibility_date = "2023-03-20"

kv_namespaces = [
    {binding = "first_kv", id = "08ccxxxxxxxxxxxxxx" }
]

TypeScriptでは、型定義ファイルの生成も

KVを型安全に利用するには、wrangler typesを利用します。

% yarn wrangler types
yarn run v1.22.15
$ /Users/sandbox/cloudflare/node_modules/.bin/wrangler types
 ⛅️ wrangler 2.12.3 
--------------------
interface Env {
        first_kv: KVNamespace;
}

✨  Done in 0.83s.

worker-configuration.d.tsファイルが生成されました。

// Generated by Wrangler on Mon Mar 20 2023 20:20:38 GMT+0900 (日本標準時)
interface Env {
    first_kv: KVNamespace;
}

tsconfig.jsonのcompilerOptions.typesに"./worker-configuration.d.ts"を追加しましょう。

{
    "compilerOptions": {
        "types": [
            "@cloudflare/workers-types",
            "./worker-configuration.d.ts"
        ]

最後に、src/index.tsを確認します。もしEnvがあれば消しましょう。

// [ここから消す]

export interface Env {
    // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
    // MY_KV_NAMESPACE: KVNamespace;
    //
    // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
    // MY_DURABLE_OBJECT: DurableObjectNamespace;
    //
    // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
    // MY_BUCKET: R2Bucket;
    //
    // Example binding to a Service. Learn more at https://developers.cloudflare.com/workers/runtime-apis/service-bindings/
    // MY_SERVICE: Fetcher;
}

// [ここまで消す]

export default {
    async fetch(
        request: Request,
        env: Env,
        ctx: ExecutionContext
    ): Promise<Response> {
        return new Response("Hello World!");
    },
};

これでenv.[KV_Store_name]が利用できます。

export default {
    async fetch(
        request: Request,
        env: Env,
        ctx: ExecutionContext
    ): Promise<Response> {
        const kvData = await env.first_kv.list()

KVを利用する雑なサンプルコード

POSTリクエストではデータをPUTし、それ以外ではKVのデータを返すサンプルです。

export default {
    async fetch(
        request: Request,
        env: Env
    ): Promise<Response> {
        if (request.method.toLocaleUpperCase() === 'POST') {
            const putKVResult = await env.first_kv.put('hello', 'world')

            return new Response(JSON.stringify({
                putKVResult
            }));
        }
        const kvData = await env.first_kv.list()

        return new Response(JSON.stringify({
            kvData
        }));
    },
};