pnpm create cloudflare@latest my-app --framework=remix --experimental

...
╭ Deploy with Cloudflare Step 3 of 3
│
╰ Do you want to deploy your application?
  Yes / No # Github Actionsを使ってデプロイしたいのでNoを選択した

pnpm run deploy

  ✘ [ERROR] A request to the Cloudflare API (/accounts/***/pages/projects/my-app) failed.
  
    Project not found. The specified project name does not match any of your existing projects. [code: 8000007]

...

      - name: 🚀 Deploy
        id: cloudflare-wrangler
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-         command: pages deploy ./build/client --project-name=my-app
+         # command: pages deploy ./build/client --project-name=my-app

  },
  "engines": {
-    "node": ">=20.0.0"
+    "node": ">=18.0.0"
  }
}

$ npx wrangler deploy './server.ts' --outdir bundled/ --dry-run

 ⛅️ wrangler 3.86.1
-------------------

Total Upload: 2071.89 KiB / gzip: 351.08 KiB
--dry-run: exiting now.

npx prisma init

npx prisma generate

npx prisma migrate dev --name init

$ npx wrangler deploy './server.ts' --outdir bundled/ --dry-run

 ⛅️ wrangler 3.86.1
-------------------

Total Upload: 4717.43 KiB / gzip: 1261.67 KiB

      - name: 🚀 Deploy
        id: cloudflare-wrangler
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy ./build/client --project-name=my-app # ここ追加

import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
// @ts-ignore - the server build file is generated by `remix vite:build`
import * as build from "../build/server";
import { getLoadContext } from "../load-context";
export const onRequest = createPagesFunctionHandler({ build, getLoadContext });

compatibility_date = "2024-05-10"
name = "my-app"
account_id = "xxx"
main = "functions/[[path]].ts"

import {
+ cloudflareDevProxyVitePlugin,
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";
import { envOnlyMacros } from "vite-env-only";
import tsconfigPaths from "vite-tsconfig-paths";

import { getLoadContext } from "./load-context";

declare module "@remix-run/cloudflare" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig(({ mode }) => {
  return {
    plugins: [
+     cloudflareDevProxyVitePlugin({
+       getLoadContext,
+     }),
      envOnlyMacros(),
      remixCloudflareDevProxy({ getLoadContext }),
      remix({
        future: {
          v3_singleFetch: true,
+         v3_fetcherPersist: true,
+         v3_relativeSplatPath: true,
+         v3_throwAbortReason: true,
+         v3_lazyRouteDiscovery: true,
        },
      }),
      tsconfigPaths(),
    ],
    build: {
+     minify: true,
      rollupOptions: {
        plugins: [
          mode === "analyze" &&
            visualizer({
              open: true,
              filename: "stats.html",
              gzipSize: true,
              brotliSize: true,
            }),
        ],
      },
    },
    server: {
      port: 5173,
    },
+   resolve: {
+     mainFields: ["browser", "module", "main"],
+   },
    ssr: {
+     resolve: {
+       conditions: ["workerd", "worker", "browser"],
+     },
      noExternal: [
        "remix-i18next",
      ],
    },
  };
});

compatibility_date = "2024-05-10"
name = "my-app"
account_id = "xxx"
- main = "functions/[[path]].ts"
+ main = "./server.ts"

pnpm create cloudflare@latest my-app --framework=remix --experimental

pnpm add @remix-run/cloudflare-pages

import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - the server build file is generated by `remix vite:build`
// eslint-disable-next-line import/no-unresolved
import * as build from "../build/server";

export const onRequest = createPagesFunctionHandler({ build });

/**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */

import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToReadableStream } from "react-dom/server";

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  // This is ignored so we can keep it in the template for visibility.  Feel
  // free to delete this parameter in your app if you're not using it!
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadContext: AppLoadContext,
) {
  const body = await renderToReadableStream(
    <RemixServer context={remixContext} url={request.url} />,
    {
      signal: request.signal,
      onError(error: unknown) {
        // Log streaming rendering errors from inside the shell
        console.error(error);
        responseStatusCode = 500;
      },
    },
  );

  if (isbot(request.headers.get("user-agent") || "")) {
    await body.allReady;
  }

  responseHeaders.set("Content-Type", "text/html");
  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
}

npx wrangler pages dev ./build/client

# 以前はCloudflare Workersにデプロイした
# pnpm run deploy

# 今回はCloudflare Pagesにデプロイ
pnpm run build
npx wrangler pages deploy ./build/client

pnpm i
npx prisma init
npx prisma generate

{
  "scripts": {
    "build": "remix vite:build",
+   "deploy": "pnpm run build && wrangler pages deploy ./build/client --project-name=APP_NAME",

import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - the server build file is generated by `remix vite:build`
// eslint-disable-next-line import/no-unresolved
import * as build from "../build/server";
+ import { getLoadContext } from "../load-context";

- export const onRequest = createPagesFunctionHandler({ build });
+ export const onRequest = createPagesFunctionHandler({ build, getLoadContext });

async function getTodos() {
  // 20件取得
  // const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=20');
  const todos = await response.json();
  return todos;

  // 200件取得（デフォルト）
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const todos = await response.json();
  return todos;

  // 400件取得
  const response1 = await fetch('https://jsonplaceholder.typicode.com/todos');
  const response2 = await fetch('https://jsonplaceholder.typicode.com/todos');
  const allTodo = await Promise.all([response1.json(), response2.json()]);
  return allTodo.flat();
}

export async function loader({ request, context }: LoaderFunctionArgs) {
  const todos = getTodos()
  return { todos }
}

export default function IndexPage() {
  const { todos } = useLoaderData<typeof loader>();

  return (
    <Suspense
      fallback={
        <div>
          <p>loading...</p>
        </div>
      }
    >
      <Await resolve={todos} errorElement={<p>error</p>}>
        {(todos) => {
          console.dir(todos);
          if (!todos) {
              return <p>no data</p>
          }

          return <ul>
            {todos.map((todo) => <li key={todo.id}>{todo.title}</li>)}
        </ul>
        }}
      </Await>
    </Suspense>
  )
}

# 0. アプリ作成
pnpm create cloudflare@latest remix-on-cf-worker --framework=remix --experimental

# 1. 準備
pnpm add prisma @libsql/client @prisma/adapter-libsql concurrently @remix-run/cloudflare-pages
npx prisma init

# 2. schema.prismaを更新

# 3. モデルファイルを作成
npx prisma generate

# 4. マイグレーションファイルを作成
npx prisma migrate dev --name init

# 5. ローカルで適用
turso db shell http://127.0.0.1:8888 < prisma/migrations/20241117081513_init/migration.sql