CloudflareWorkers→D1に接続し、CRUD処理を実施する

## はじめに
表題通りCloudflareWorkers→D1に接続し、CRUD処理を実施する。

## 準備
### プロジェクト作成

```shell
~/develop/cloudflare_api$ npm create cloudflare@latest

> npx
> create-cloudflare


using create-cloudflare version 2.23.0

╭ Create an application with Cloudflare Step 1 of 3
│ 
├ In which directory do you want to create your application?
│ dir ./honod1
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Hono
│
├ Continue with Hono via `npx create-hono@0.10.1 honod1 --template cloudflare-workers --install --pm npm`
│

create-hono version 0.10.1
✔ Using target directory … honod1
✔ Cloning the template
⠏ Installing project dependencies
```
### D1にDB、TBLを作成する
![スクリーンショット 2024-08-04 8.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/76f02c89-11d4-71e2-7043-3d4f2d94694b.png)

![スクリーンショット 2024-08-04 9.10.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/cc38b423-e9eb-1085-a23e-0cf539d4cbe2.png)

DDLを流してusersテーブルを作成していきます。

```sql:schema.sql
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  password TEXT NOT NULL,
  created_at TEXT DEFAULT CURRENT_TIMESTAMP
);
```
:::note info
プロジェクト配下にsqlを配置してください。
:::


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

account_id = "XXXXXXXXXXX"
workers_dev = true

[[d1_databases]]
binding = "D1"
database_name = "my_db_d1"
database_id = "XXXXXXXXXXX"
```

:::note info
wrangler.tomlを変更し、デプロイできる形式にします。
d1_databasesの中の値を変更してください。
:::

では実際にSQLを流していきましょう。

```shell:
~/develop/cloudflare_api/honod1 (master)$ npx wrangler d1 execute my_db_d1 --file=./schema.sql --remote

 ⛅️ wrangler 3.68.0
-------------------

✔ ⚠️ This process may take some time, during which your D1 database will be unavailable to serve queries.
  Ok to proceed? … yes
🌀 Executing on remote database my_db_d1 (XXXXXXXXXXXXXXXXX):
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
Note: if the execution fails to complete, your DB will return to its original state and you can safely retry.
├ 🌀 Uploading XXXXXXXXXXXXXXX.sql 
│ 🌀 Uploading complete.
│ 
🌀 Starting import...
🌀 Processed 1 queries.
🚣 Executed 1 queries in 0.00 seconds (2 rows read, 5 rows written)
   Database is currently at bookmark 00000005-00000000-00004de3-
    XXXXXXXXXX.
┌────────────────────────┬───────────┬──────────────┬────────────────────┐
│ Total queries executed │ Rows read │ Rows written │ Database size (MB) │
├────────────────────────┼───────────┼──────────────┼────────────────────┤
│ 1                      │ 2         │ 5            │ 0.02               │
└────────────────────────┴───────────┴──────────────┴────────────────────┘

```

:::note info
上記のコマンドでサーバに作成されたDBにSQLを流す事ができます。
ローカル環境に流したい場合は、`npx wrangler d1 execute my_db_d1 --file=./schema.sql`を実行してください。 
:::
→これでDBにテーブルが作成されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b2db0945-736a-bad6-e280-5400193a008f.png)

![スクリーンショット 2024-08-04 9.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/96e745f4-2f06-a1c7-7db6-3e1abe6dd7f9.png)

ようやく準備完了しましたね。ではこれからCloudflareWorkersからD1に接続できるようにしていきます。


## ローカル環境で実行
では実際に動かしていきましょう。

```shell:
npm run dev
```

![スクリーンショット 2024-08-04 9.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/51db8593-21ac-abba-2c35-286a0dde9470.png)
→データ作成します。

![スクリーンショット 2024-08-04 9.49.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/94e24422-cb1a-41e5-7cfe-52fe70e144d1.png)

## サーバで実行
まずはサーバにデプロイします。

```shell
npm run deploy  
```

![スクリーンショット 2024-08-04 9.52.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/9a5e3501-f4a6-1e1c-01c6-7f3dd7acd1cf.png)

![スクリーンショット 2024-08-04 9.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/7c4baa70-5c91-3e24-e17c-9049e18cce14.png)
登録されていますね！！！