Open5ヶ月前にコメント追加3

react-router-v7 + drizzle(d1) + cloudflare worker

cloudflare workerにデプロイするのは面倒なので一旦ローカル環境での開発手順をざっくり学習開始

react routerのテンプレートでworkerが用意されているからそれを使ってまずは環境構築

テンプレートを挿入

npx create-react-router@latest --template remix-run/react-router-templates/cloudflare cloudflare-pages-rr7-learninig

参考リンク

maassaa

dizzleをinstallしておく

pnpm i drizzle-orm

pnpm i -D drizzle-kit

drizzleを利用できるようにdbの初期化を行う

// 適当に作ったスキーマーファイル
import { sql } from "drizzle-orm";
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const guestBook = sqliteTable("guest_book", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  name: text("name").notNull(),
  email: text("email").notNull(),
});

export const posts = sqliteTable("posts", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  title: text("title").notNull(),
  content: text("content").notNull(),
  authorName: text("author_name").notNull(),
  createdAt: text("created_at")
    .default(sql`CURRENT_TIMESTAMP`)
    .notNull(),
});

export type Post = typeof posts.$inferSelect;
export type NewPost = typeof posts.$inferInsert;

// load-context.ts 
import { drizzle, type DrizzleD1Database } from "drizzle-orm/d1";

import * as schema from "./app/db/schema";
import type { ExecutionContext } from "@cloudflare/workers-types";
import type { AppLoadContext } from "react-router";

declare global {
  interface CloudflareEnvironment extends Env {}
}

declare module "react-router" {
  export interface AppLoadContext {
    cloudflare: {
      env: CloudflareEnvironment;
      ctx: Omit<ExecutionContext, "props">;
    };
    db: DrizzleD1Database<typeof schema>;
  }
}

type GetLoadContextArgs = {
  request: Request;
  context: Pick<AppLoadContext, "cloudflare">;
};

export function getLoadContext({ context }: GetLoadContextArgs) {
  const db = drizzle(context.cloudflare.env.DB, { schema });

  return {
    cloudflare: context.cloudflare,
    db,
  };
}