バックエンドを構築

まずは、Cloudflare WorkersにHonoを導入します。 Honoから導入して、Cloudflare Workersを選択します。 次に、Cloudflare D1を導入します。 最後に、Drizzle ORMを導入します。

解説動画

YouTubeに解説動画を公開しています。 こちらもあわせて、ぜひご覧ください。

Honoを導入する

https://hono.dev/docs/getting-started/cloudflare-workers

1. プロジェクトを作成する

以下のコマンドを実行して、プロジェクトを作成します。

bun create hono@latest apps/backend

Which template do you want to use?は、cloudflare-workersを選択します。 Do you want to install project dependencies?は、yesを選択します。 Which package manager do you want to use?は、bunを選択します。

2. 動作を確認する

bun workspaceで各プロジェクトの簡易サーバーを立ち上げるには、bun runの次に、オプションfilterを使って、プロジェクト名を指定します。 このコマンドを使えば、わざわざ各プロジェクトのディレクトリに移動しなくても、簡易サーバーを立ち上げることができます。

bun run --filter backend dev

立ち上がったら、http://localhost:8787が表示されるので、コピーします。 Postmanを開いて、コピーしたhttp://localhost:8787を貼り付けて、リクエストを送信します。 Hello Hono!が表示されました。 どうして、Hello Hono!と表示されたのか、index.tsを確認してみましょう。 index.tsを開きます。

import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => {
  return c.text("Hello Hono!");
});

export default app;

textプロパティで文字列Hello Hono!を渡して、レスポンスを返すようにしています。 元に戻しておきます。

Cloudflare D1を導入する

https://developers.cloudflare.com/d1/get-started/

expense-tracker-dbという名前でデータベースを作成します。

npx wrangler d1 create expense-tracker-db

コマンドを実行します。 実行すると、以下の設定のコードが表示されるので、選択してコピーします。

:::message alert database_idを知られると、悪用されてしまうので、扱いには注意してください。 :::

"d1_databases": [
  {
    "binding": "DB",
    "database_name": "expense-tracker-db",
    "database_id": "1d0e3d88-1001-4beb-ad24-0ef25f2ab76b"
  }
]

wrangler.jsoncを開いて、コメントをすべて選択して、コピーしたコードを上書きします。 $schemaプロパティが、警告になっています。 これは、bun workspaceを使っているため、node_modulesのパスがづれているからです。 パスを修正して、警告を解消します。

- "$schema": "node_modules/wrangler/config-schema.json",
+ "$schema": "../../node_modules/wrangler/config-schema.json",

Drizzle ORMを導入する

https://orm.drizzle.team/docs/connect-cloudflare-d1

1. packagesをインストールする

パッケージをインストールする場合、インストールするプロジェクトのディレクトリに移動する必要があります。

cd apps/backend

drizzle-ormとdrizzle-kitをインストールします。

bun add drizzle-orm
bun add -D drizzle-kit

2. wrangler.jsoncに以下の設定を追加する

データベースを作成した際の設定に以下の設定を追加します。

migrations_dir = "drizzle/migrations"

これは、マイグレーションファイルを参照するために、保存されるパスを指定しています。 マイグレーションファイルは、テーブルを作成するSQLファイルのことを指します。 そして、SQLファイルを作成することをマイグレーションするといいます。

3. drizzle.config.tsを作成する

drizzle.config.tsは、drizzle-kitを使うための設定を行います。

import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "sqlite",
  schema: "./drizzle/schema",
  out: "./drizzle/migrations",
});

dialectプロパティは、データベースの種類を指定します。 schemaプロパティは、テーブルのスキーマを定義したファイルのパスを指定します。 outプロパティは、マイグレーションファイルを保存するパスを指定します。

4. categories_tableテーブルスキーマを作成する

categories_tableテーブルのカラムは以下の通りです。

カラム名	型	説明
id	INTEGER	主キー（自動増加）
name	TEXT	カテゴリ名（例：食費、交通費、給料 など）

drizzle.config.tsのschemaプロパティで設定したdrizzle/schemaディレクトリの中にcategories.tsを作成します。

import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";

export const categoriesTable = sqliteTable("categories_table", {
  id: integer("id").primaryKey(),
  name: text("name").notNull(),
});

sqliteTable関数を使って、categories_tableテーブルを作成しています。 そして、引数categoriesTableに格納しています。 sqliteTable関数は、drizzle-orm/sqlite-coreパッケージの関数です。 sqliteTable関数の引数には、テーブル名とカラムを指定します。 idカラムは、integer型で、主キーであるため、primaryKey関数を使って、主キーを設定しています。 nameカラムは、text型で、notNull関数を使うことで、必ず値を持つようにしています。

5. schemaをマイグレーションする

drizzle-kit generateを使って、schemaを定義したcategories.tsから、マイグレーションします。 マイグレーションすると、categories_tableテーブルを作成するSQLファイルが生成されます。

cd apps/backend
npx drizzle-kit generate

実行すると、drizzle/migrationsディレクトリに0000_skinny_master_mold.sqlファイルが生成されました。 これは、drizzle.config.tsのoutプロパティで設定したパスになります。 drizzleディレクトリ、migrationsディレクトリと開いていくと、SQLファイルが作成されていることがわかります。 SQLファイル名は、自動的に命名されて作成されます。

:::message alert SQLファイル名は、自動的に命名されます。 適宜、作成されたファイル名に変更してください。 :::

Cloudflare D1にテーブルを作成する

Cloudflare D1にテーブルを作成します。 wrangler d1 executeを使って、drizzle/migrations/0000_skinny_master_mold.sqlファイルを実行します。 オプション--localを指定すると、ローカル環境でデータベースが作成されて、そこにテーブルが作成されます。 逆に、本番環境にテーブルを作成する場合は、--remoteを指定します。

npx wrangler d1 execute expense-tracker-db --local --file=./drizzle/migrations/0000_skinny_master_mold.sql

作成したテーブルを確認します。 確認するために、VS Codeの拡張機能を使います。

https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite

もちろん、Cursorでも使えますので、安心してください。 コマンドパレットを開いて、sqliteと入力してください。 候補から、SQLite: Open Databaseを選択します。 apps/backend/.wrangler/state/v3/d1/のパスのファイルを選択します。 エクスプローラーのnotepadの下に、SQLITE EXPROLERが表示されました。 クリックすると、categories_tableが作成されていることがわかります。 Show Tablesをクリックして、categories_tableが表示されます。 ただ、まだデータがないので、何も表示されません。 categories_tableをクリックすると、テーブルのカラムが表示されます。

テーブルにデータを挿入する

テーブルにデータを挿入します。 これも拡張機能を使います。 まずは、insert文を作成してもらいます。 insertと入力すると、オートコンプリートで作成してくれました。

insert into categories_table (id, name) values (1, 'test');

これを、切り取ります。 コマンドパレットを開いて、sqliteと入力してください。 候補から、SQLite: Quick Queryを選択します。 apps/backend/.wrangler/state/v3/d1/のパスのファイルを選択します。 先ほどのinsert文をペーストして、実行します。 Show Tablesをクリックすると、categories_tableに登録されたデータが表示されました。