name: Deploy to Cloudflare

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-20.04
    permissions:
      contents: read
      deployments: write
      statuses: write

    steps:
      # ------------------------------------------------
      # デプロイ
      # ------------------------------------------------
      - name: 🔀 Checkout
        uses: actions/checkout@v3

      - name: ⏬ Install
        run: npm install
        working-directory: ./

      - name: 🔨 Build
        run: npm run build
        working-directory: ./

      - name: 🚀 Deploy # この段階でデプロイはされている
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy ./public --project-name=YOUR_PROJECT_NAME

      # ------------------------------------------------
      # Github ActionsのCommit Statusの"Details"をクリック時に、デプロイされたページにアクセスする
      # ------------------------------------------------
      - name: 🌐 Publish to Cloudflare Pages to get url # idを設定してデプロイしたCloudflare PagesのUrlを取得するためだけに使用している
        id: cloudflare_pages_deploy
        uses: cloudflare/pages-action@v1
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          projectName: YOUR_PROJECT_NAME
          directory: ./public
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

      - name: 🔗 Add publish URL as commit status
        uses: actions/github-script@v6
        with:
          script: |
            const sha = context.payload.pull_request?.head.sha ?? context.sha;
            await github.rest.repos.createCommitStatus({
              owner: context.repo.owner,
              repo: context.repo.repo,
              context: "Cloudflare Pages",
              description: "Cloudflare Pages deployment",
              state: "success",
              sha,
              target_url: "${{ steps.cloudflare_pages_deploy.outputs.url }}",
            });

$ npm run dev

> dev
> remix dev --manual -c "npm run start"

✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

$ kill $(lsof -t -i:8788)

{
  "scripts": {
    ...
    "db:dev:init": "wrangler d1 execute YOUR_DB_NAME --local --file=./db/init.sql",
  }
}

interface Env {
  DB: D1Database;
}

type User = {
  id: number;
  email: string;
};

export async function getUsers(env: Env): Promise<User[]> {
  try {
    const { results } = await env.DB.prepare("SELECT * FROM users").all<User>();
    return results;
  } catch (e) {
    throw new Error("エラーが発生しました");
  }
}

      - name: 🚀 Deploy
        id: cloudflare-wrangler # ここを追加
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy ./public --project-name=YOUR_PROJECT_NAME
      - name: 🔗 Add publish URL as commit status
        uses: actions/github-script@v6
        with:
          script: |
            const sha = context.payload.pull_request?.head.sha ?? context.sha;
            await github.rest.repos.createCommitStatus({
              owner: context.repo.owner,
              repo: context.repo.repo,
              context: "Cloudflare Pages",
              description: "Access Cloudflare Pages deployment",
              state: "success",
              sha,
              target_url: "${{ steps.cloudflare-wrangler.outputs.deployment-url }}", # ここを更新
            });

/*
  DO NOT RENAME THIS FILE FOR DRIZZLE-ORM TO WORK
*/
import { sql } from "drizzle-orm";
import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";

const baseSchema = {
  id: integer("id", { mode: "number" }).primaryKey({ autoIncrement: true }),
  createdAt: text("createdAt")
    .notNull()
    .default(sql`CURRENT_TIMESTAMP`),
  updatedAt: text("updatedAt")
    .notNull()
    .default(sql`CURRENT_TIMESTAMP`),
};

export const usersSchema = sqliteTable("users", {
  ...baseSchema,
  email: text("email").notNull(),
});

import { usersSchema } from "db/schema";

export async function loader({ context }: LoaderFunctionArgs) {
  const env = context.env as Env;

  const users = await client(env.DB).select().from(usersSchema).all();
  // Before
  // const { results } = await env.DB.prepare("SELECT * FROM users").all<User>();

  return json({
    users: users ?? [],
  });
}