remix + cloudflare pages + D1でページを見れるまで

npx create-remix@latest --template remix-run/remix/templates/cloudflare

npm install wrangler --save-dev

npx wrangler d1 create <DB_NAME>

DROP TABLE IF EXISTS Customers;
CREATE TABLE IF NOT EXISTS Customers (CustomerId INTEGER PRIMARY KEY, CompanyName TEXT, ContactName TEXT);
INSERT INTO Customers (CustomerID, CompanyName, ContactName) VALUES (1, 'Alfreds Futterkiste', 'Maria Anders'), (4, 'Around the Horn', 'Thomas Hardy'), (11, 'Bs Beverages', 'Victoria Ashworth'), (13, 'Bs Beverages', 'Random Name');

npx wrangler d1 execute <DB_NAME> --local --file=./schema.sql

npx wrangler d1 execute <DB_NAME> --local --command="SELECT * FROM Customers"

+ import type { LoaderFunction, MetaFunction } from "@remix-run/cloudflare";
+ import { json } from "@remix-run/cloudflare";
+ import { useLoaderData } from "@remix-run/react";
+
+ interface Env {
+ 	DB: D1Database;
+ }
+ 
+ type Customer = {
+   CustomerID: number;
+   CompanyName: string;
+   ContactName: string;
+ }

// existing code

+ export const loader: LoaderFunction = async ({ context, params }) => {
+   const env = context.cloudflare.env as Env;
+   const { results } = await env.DB.prepare("SELECT * FROM Customers").all<Customer>();
+   return json(results);
+ }

export default function Index() {
  const customers = useLoaderData<typeof loader>() as Customer[];

  return (
    <div className="font-sans p-4">
      <h1 className="text-3xl">Welcome to Remix on Cloudflare</h1>
      <ul className="list-disc mt-4 pl-6 space-y-2">
-         <li>
-           <a
-             className="text-blue-700 underline visited:text-purple-900"
-             target="_blank"
-             href="https://remix.run/docs"
-             rel="noreferrer"
-           >
-             Remix Docs
-           </a>
-         </li>
-         <li>
-           <a
-             className="text-blue-700 underline visited:text-purple-900"
-             target="_blank"
-             href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/"
-             rel="noreferrer"
-           >
-             Cloudflare Pages Docs - Remix guide
-           </a>
-         </li>
+         {customers.map((customer) => (
+           <li key={customer.CustomerID}>
+             {customer.CompanyName}, {customer.ContactName}
+           </li>
+         ))}
      </ul>
    </div>
  );

npx wrangler d1 execute <DB_NAME> --remote --file=./schema.sql

npx wrangler d1 execute <DB_NAME> --remote --command="SELECT * FROM Customers"

npm install prisma --save-dev
npm install @prisma/client
npm install @prisma/adapter-d1

npx prisma init --datasource-provider sqlite

generator client {
  provider = "prisma-client-js"
+  previewFeatures = ["driverAdapters"]
}

npx wrangler d1 migrations create prisma-demo-db create_user_table

+ model User {
+   id    Int     @id @default(autoincrement())
+   email String  @unique
+   name  String?
+ }

npx prisma migrate diff --from-empty --to-schema-datamodel ./prisma/schema.prisma --script > migrations/0001_create_user_table.sql

npx wrangler d1 migrations apply <DB_NAME> --local
npx wrangler d1 migrations apply <DB_NAME> --remote

npx wrangler d1 execute <DB_NAME> --command "INSERT INTO  \"User\" (\"email\", \"name\") VALUES ('jane@prisma.io', 'Jane Doe (Remote)');" --local
npx wrangler d1 execute <DB_NAME> --command "INSERT INTO  \"User\" (\"email\", \"name\") VALUES ('jane@prisma.io', 'Jane Doe (Remote)');" --remote

Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)