Cloudflare WorkersからKVに接続し、CRUD処理を実施する

## はじめに
[前回](https://qiita.com/koji0705/items/3243418b32655ba416e6)までの記事の続きです。CloudflareでデプロイしたアプリケーションからDBに接続し、CRUD処理を実現します。DBはKVを利用します。

## 準備
cloudflareのKVより、名前空間を作成します。今回は「mydb」という名前で作成しました。
![スクリーンショット 2024-08-03 20.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a31c3b1c-55aa-6ed8-e98a-c14e7f1f9243.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/7ccb6da5-cab9-de5a-5731-bb7e40441d48.png)


:::note info
名前空間のIDが表示されます。この値は後ほど利用するため、メモし✍️ておいてください。
:::

## プログラム実装
```ts:src/index.ts
import { Hono } from "hono";

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

// POSTリクエストでキーと値を設定
app.post("/set", async (c) => {
	const kv = c.env.mydb;
	if (!kv) {
		return c.json({ error: "KV namespace is not bound" }, 500);
	}

	const data = await c.req.json();
	const { key, value } = data;

	if (!key || !value) {
		return c.json({ error: "Key and value are required" }, 400);
	}

	// 値を文字列に変換して保存
	await kv.put(key, JSON.stringify(value));
	return c.text("Value set!");
});

// GETリクエストでキーの値を取得
app.get("/get/:key", async (c) => {
	const kv = c.env.mydb;
	if (!kv) {
		return c.json({ error: "KV namespace is not bound" }, 500);
	}

	// URLパラメータからkeyを取得
	const key = c.req.param("key");
	const value = await kv.get(key);

	if (!value) {
		return c.json({ error: "Key not found" }, 404);
	}

	return c.json({ key, value: JSON.parse(value) });
});

// GETリクエストでキーのリストと値を取得
app.get("/list", async (c) => {
	const kv = c.env.mydb;
	if (!kv) {
		return c.json({ error: "KV namespace is not bound" }, 500);
	}

	const { keys } = await kv.list();
	const results = [];

	for (const { name } of keys) {
		const value = await kv.get(name);
		if (value) {
			results.push({ key: name, value: JSON.parse(value) });
		}
	}

	return c.json(results);
});

// ホームエンドポイント
app.get("/", (c) => {
	return c.text("Hello Hono!");
});

export default app;
```

```toml:wrangler.toml
#:schema node_modules/wrangler/config-schema.json
name = "XXXXXXXX"
main = "src/index.ts"
compatibility_date = "2024-07-29"

[dev]
port=4300

[[kv_namespaces]]
binding = "mydb"
id = "XXXXXXXXXXXX" ←先ほど取得kvのIDを設定します。
```

## ローカル環境で実行確認
APIを叩きます。まずはデータの設定から実施します。

### データの作成
![スクリーンショット 2024-08-03 21.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/de8c580e-9c3b-0287-aff9-95d435cddf55.png)
→実行後はjsonデータとして保存されています。

![スクリーンショット 2024-08-03 21.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/de1273af-7ef1-47f9-b4fe-46ab3b0a0930.png)

### データ一覧の取得
GET：http://localhost:4300/list

![スクリーンショット 2024-08-03 21.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b6079083-836d-ebc4-1151-5f378deee79a.png)
:::note info
今は1件のみしか登録していないため、1件のみ取得されています。
:::

### データのID指定での１件取得
GET http://localhost:4300/get/myKey

![スクリーンショット 2024-08-03 21.10.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a694b3f7-d02c-465b-9bb5-6dccf3582bf4.png)

##　サーバへのデプロイ

```shell:
~/develop/cloudflare_api/young-moon-ae78 (master)$ npm run deploy

> deploy
> wrangler deploy --minify


 ⛅️ wrangler 3.68.0
```

##　サーバで実行
ローカル環境と同様に実行します。
実際にCloudflareのサーバ上にデータが登録されているかを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/dbf8e17f-5f48-5935-6b3c-6bfa689b9ad8.png)

:::note info
できていそうですね！！登録も取得も問題なく実行できそうです！！！
:::