Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた

npm install -g wrangler

wrangler --version
 ⛅️ wrangler 2.13.0 
--------------------

npx superflare@latest new

◇  Hmm. Looks like you're not logged in yet.
│
◆  You need to be logged into Wrangler to create a Superflare app. Log in now?
│  ● Yes / ○ No
└

◇  Everything looks good!
│
◇  👋 Heads-up: ───────────────────────────────────────────────╮
│                                                              │
│  Before using R2, Queues, and Durable objects,               │
│  make sure you've enabled them in the Cloudflare Dashboard.  │
│  https://dash.cloudflare.com/                                │
│  Otherwise, the following commands might fail! 😬            │
│                                                              │
├──────────────────────────────────────────────────────────────╯
│
◆  Where would you like to create your app?
│  ./my-superflare-app
└

◆  What features of Superflare do you plan to use? We'll create the resources
for you.
│  ◼ Database Models (We'll create D1 a database for you)
│  ◼ Storage
│  ◻ Queues
│  ◻ Broadcasting
└

◆  We'll create the following resources for you:
 
- D1 Database: my-superflare-app-db (bound as DB)
- R2 Bucket: my-superflare-app-bucket (bound as BUCKET)
 
Do you want to continue?
│  ● Yes / ○ No
└

cd ./my-superflare-app
npm install --legacy-peer-deps
npx superflare migrate

npm run dev

import { json, redirect, type ActionArgs } from "@remix-run/cloudflare";
import { User } from "~/models/User";
import { hash } from "superflare";
 
export async function action({ request, context: { auth } }: ActionArgs) {
  //  既にログインしている場合はダッシュボードにリダイレクト
  if (await auth.check(User)) {
    return redirect("/dashboard");
  }
 
  // フォームから送信されたデータを受け取る
  const formData = new URLSearchParams(await request.text());
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
 
  // メールアドレスが既に登録されているかどうかをチェック
  if (await User.where("email", email).count()) {
    return json({ error: "Email already exists" }, { status: 400 });
  }
 
  // ユーザーを作成
  const user = await User.create({
    email,
    password: await hash().make(password),
  });
 
  // ログイン状態にする
  auth.login(user);
 
  return redirect("/dashboard");
}

import { User } from "~/models/User";
 
if (await auth.check(User)) {
  return redirect("/dashboard");
}

import { Schema } from "superflare";
 
export default function () {
  return Schema.create("users", (table) => {
    table.increments("id");
    table.string("email").unique();
    table.string("password");
    table.timestamps();
  });
}

import { Model } from "superflare";
 
export class User extends Model {
  toJSON(): Omit<UserRow, "password"> {
    const { password, ...rest } = super.toJSON();
    return rest;
  }
}
 
Model.register(User);
 
export interface User extends UserRow {}

// This file is automatically generated by Superflare. Do not edit directly.
 
interface UserRow {
  id: number;
  email: string;
  password: string;
  createdAt: string;
  updatedAt: string;
}

const formData = new URLSearchParams(await request.text());
const email = formData.get("email") as string;
const password = formData.get("password") as string;

if (await User.where("email", email).count()) {
  return json({ error: "Email already exists" }, { status: 400 });
}

const user = await User.create({
  email,
  password: await hash().make(password),
});

auth.login(user);
 
return redirect("/dashboard");

import { type LoaderArgs, redirect, json } from "@remix-run/cloudflare";
import { User } from "~/models/User";
 
export async function loader({ context: { auth } }: LoaderArgs) {
  if (!(await auth.check(User))) {
    return redirect("/auth/login");
  }
 
  return json({
    user: (await auth.user(User)) as User,
  });
}

import { useLoaderData } from "@remix-run/react";
 
export default function Dashboard() {
  const { user } = useLoaderData<typeof loader>();
 
  return (
    <>
      <h1>Dashboard</h1>
      <p>You're logged in as {user.email}</p>
 
      <form method="post" action="/auth/logout">
        <button type="submit">Log out</button>
      </form>
    </>
  );
}

import { type ActionArgs, redirect } from "@remix-run/server-runtime";
 
export async function action({ context: { auth } }: ActionArgs) {
  auth.logout();
 
  return redirect("/");
}

import { Form, Link, useActionData } from "@remix-run/react";
import { json, redirect, type ActionArgs } from "@remix-run/cloudflare";
import { User } from "~/models/User";
 
export async function action({ request, context: { auth } }: ActionArgs) {
  if (await auth.check(User)) {
    return redirect("/dashboard");
  }
 
  const formData = new URLSearchParams(await request.text());
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
 
  if (await auth.attempt(User, { email, password })) {
    return redirect("/dashboard");
  }
 
  return json({ error: "Invalid credentials" }, { status: 400 });
}

## ユーザー(users)テーブル

ID (主キー)
ユーザー名
パスワード
メールアドレス

## アルバム(albums)テーブル

ID (主キー)
タイトル
説明
ユーザーID (外部キー)

## 画像(images)テーブル

ID (主キー)
キー （R1 Storage のキー）
アルバムID (外部キー)
ユーザーID (外部キー)
アップロード日時

npx superflare generate migration albums

import { Schema } from 'superflare';
 
export default function () {
  // return ...
}

import { Schema } from "superflare";
 
export default function () {
  return Schema.create("albums", (table) => {
    table.increments("id");
    table.string("title");
    table.string("description");
    table.integer("userId");
    table.timestamps();
  });
}

npx superflare generate migration images

import { Schema } from "superflare";
 
export default function () {
  return Schema.create("images", (table) => {
    table.increments("id");
    table.string("key");
    table.integer("albumId");
    table.integer("userId");
    table.timestamps();
  });
}

npx superflare migrate --create

-- Migration number: 0001 	 2023-04-01T06:45:58.421Z
-- Autogenerated by Superflare. Do not edit this file directly.
CREATE TABLE albums (
  id INTEGER PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  userId INTEGER NOT NULL,
  createdAt DATETIME NOT NULL,
  updatedAt DATETIME NOT NULL
);

-- Migration number: 0002 	 2023-04-01T06:45:58.421Z
-- Autogenerated by Superflare. Do not edit this file directly.
CREATE TABLE images (
  id INTEGER PRIMARY KEY,
  key TEXT NOT NULL,
  albumId INTEGER NOT NULL,
  userId INTEGER NOT NULL,
  createdAt DATETIME NOT NULL,
  updatedAt DATETIME NOT NULL
);

+ import { Album } from "./Album";
+ import { Image } from "./Image";
 
  export class User extends Model {
+   albums!: Album[] | Promise<Album[]>;
+   images!: Image[] | Promise<Image[]>;
+
+   $alubms() {
+     return this.hasMany(Album);
+   }
+
+   $images() {
+     return this.hasMany(Image);
+   }
 
    toJSON(): Omit<UserRow, "password"> {
      const { password, ...rest } = super.toJSON();
      return rest;
    }
  }

import { Model } from "superflare";
import { Album } from "./Album";
import { User } from "./User";
 
export class Image extends Model {
  album!: Album | Promise<Album>;
  user!: User | Promise<User>;
 
  $album() {
    return this.belongsTo(Album);
  }
 
  $user() {
    return this.belongsTo(User);
  }
 
  toJSON(): ImageRow {
    return super.toJSON();
  }
}
 
Model.register(Image);
 
export interface Image extends ImageRow {}

import { Model } from "superflare";
import { Image } from "./Image";
import { User } from "./User";
 
export class Album extends Model {
  images!: Image[] | Promise<Image[]>;
  user!: User | Promise<User>;
 
  $images() {
    return this.hasMany(Image);
  }
 
  $user() {
    return this.belongsTo(User);
  }
 
  toJSON(): AlbumRow {
    return super.toJSON();
  }
}
Model.register(Album);
 
export interface Album extends AlbumRow {}

  export default function Dashboard() {
    const { user } = useLoaderData<typeof loader>();
 
    return (
      <>
        <h1>Dashboard</h1>
        <p>You're logged in as {user.email}</p>
 
+       <form method="post">
+         <fieldset>
+           <legend>Create Album</legend>
+
+           <div>
+             <label htmlFor="title">Title</label>
+             <input name="title" type="text" required />
+           </div>
+
+           <div>
+             <label htmlFor="description">Description</label>
+             <input name="description" type="text" required />
+           </div>
+
+           <button type="submit">Create</button>
+         </fieldset>
+       </form>
 
        <form method="post" action="/auth/logout" style={{ marginTop: "2rem" }}>
          <button type="submit">Log out</button>
        </form>
      </>
    );
  }

export async function action({ request, context: { auth, session } }: LoaderArgs) {
  // ログインしているか確認
  if (!(await auth.check(User))) {
    return redirect("/auth/login");
  }
 
  // フォームデータを取得
  const body = await request.formData();
  const title = body.get("title") as string;
  const description = body.get("description") as string;
 
  // ログインしているユーザーのIDを取得
  const userId = await auth.id();
 
  // アルバムを作成
  await Album.create({
    title,
    description,
    userId,
  });
 
  // フラッシュメッセージをセット
  session.flash("success", "Album created successfully");
 
  // ダッシュボードにリダイレクト
  return redirect("/dashboard");
}

import { json, LoaderArgs, MetaFunction } from "@remix-run/cloudflare";
import {
  useLoaderData,
} from "@remix-run/react";
 
export async function loader({ context: { session } }: LoaderArgs) {
  const flash = session.getFlash("success");
 
  return json({
    flash,
  });
}
 
export default function App() {
  const { flash } = useLoaderData<typeof loader>();
 
  return (
    <html lang="en" className="h-full bg-gray-100 dark:bg-black">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {flash && <div style={{ color: "green" }}>{flash}</div>}
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

+ import { Album } from "~/models/Album";
 
  export async function loader({ context: { auth } }: LoaderArgs) {
    if (!(await auth.check(User))) {
      return redirect("/auth/login");
    }
 
+   // ログインしているユーザーのアルバムを取得
+   const albums = await Album.where("userId", await auth.id()).orderBy(
+     "createdAt",
+     "desc"
+   );
 
    return json({
      user: (await auth.user(User)) as User,
+     albums,
    });
  }

  export default function Dashboard() {
-   const { user } = useLoaderData<typeof loader>();
+   const { user, albums } = useLoaderData<typeof loader>();
 
    return (
      <>
        <h1>Dashboard</h1>
        <p>You're logged in as {user.email}</p>
 
        <form method="post">
          // ...
        </form>
 
+       <h2>Albums</h2>
+       {albums.length ? (
+         <ul>
+           {albums.map((album) => (
+             <li key={album.id}>
+               <a href={`/albums/${album.id}`}>{album.title}</a>
+             </li>
+           ))}
+         </ul>
+       ) : (
+         <p>You don't have any albums yet</p>
+       )}
 
        <form method="post" action="/auth/logout" style={{ marginTop: "2rem" }}>
          <button type="submit">Log out</button>
        </form>
      </>
    );
  }

  const albums = await Album.where("userId", await auth.id())
    .orderBy("createdAt", "desc")
+   .with("images");

export class Album extends Model {
  images!: Image[] | Promise<Image[]>;
  user!: User | Promise<User>;
 
  $images() {
    return this.hasMany(Image);
  }
 
  $user() {
    return this.belongsTo(User);
  }
 
  get imageCount(): number {
    return this.$images.length;
  }
 
  toJSON(): AlbumRow & { imageCount: number } {
    return {
      ...super.toJSON(),
      imageCount: this.imageCount,
    };
  }
}

  <ul>
    {albums.map((album) => (
      <li key={album.id}>
        <a href={`/albums/${album.id}`}>{album.title}</a>
+       <span> - {album.imageCount} images</span>
      </li>
    ))}
  </ul>

import { type LoaderArgs, redirect, json } from "@remix-run/cloudflare";
import { useCatch, useLoaderData, useParams } from "@remix-run/react";
import { Album } from "~/models/Album";
import { User } from "~/models/User";
 
export async function loader({ params, context: { auth } }: LoaderArgs) {
  if (!(await auth.check(User))) {
    return redirect("/auth/login");
  }
 
  // ログインしているユーザーのIDを取得
  const userId = await auth.id();
  // パスパラメーターからアルバムのIDを取得
  const albumId = Number(params.id);
 
  // アルバムのIDとユーザーのIDをもとにアルバムを取得
  const album = await Album.where("id", albumId)
    .where("userId", userId)
    .first(); // first() は最初の1件のみを取得するメソッド
 
  // アルバムが存在しない場合、404を返す
  if (!album) {
    throw new Response("Not found", { status: 404 });
  }
 
  return json({ album });
}
 
export default function AlbumPage() {
  const { album } = useLoaderData<typeof loader>();
 
  return (
    <>
      <h1>{album.title}</h1>
      <p>{album.description}</p>
    </>
  );
}

import { useCatch, useParams } from "@remix-run/react";
 
export function CatchBoundary() {
  const caught = useCatch();
  const params = useParams();
  if (caught.status === 404) {
    return (
      <>
        <h1>404</h1>
        <p>Album {params.id} is not found.</p>
      </>
    );
  }
 
  throw new Error("Something went wrong");
}
 
export function ErrorBoundary() {
  return (
    <>
      <h1>Something went wrong</h1>
    </>
  );
}

  export default function AlbumPage() {
    const { album } = useLoaderData<typeof loader>();
 
    return (
      <>
        <h1>{album.title}</h1>
        <p>{album.description}</p>
 
+       <form method="post" encType="multipart/form-data">
+         <fieldset>
+           <legend>Upload Photo</legend>
+           <div>
+             <label htmlFor="file">Photo</label>
+             <input name="file" type="file" required />
+           </div>
+         </fieldset>
+       </form>
      </>
    );
  }

import { storage, parseMultipartFormData } from "superflare";
 
export async function action({ request }: LoaderArgs) {
  if (!(await auth.check(User))) {
    return redirect("/auth/login");
  }
 
  const formData = await parseMultipartFormData(
    request,
    async ({ name, filename, stream }) => {
      // ファイル以外のフィールドは無視
      if (name !== "file") {
        return undefined;
      }
      const r2Object = await storage().putRandom(stream, {
        extension: filename?.split(".").pop(),
      });
      return r2Object.key;
    }
  );
}

import { storage, parseMultipartFormData } from "superflare";
 
export async function action({
  request,
  params,
  context: { auth, session },
}: LoaderArgs) {
  const formData = // ...
 
  const albumId = Number(params.id);
  const userId = await auth.id();
 
  // データベースに画像のパスを保存
  await Image.create({
    key: formData.get("file") as string,
    albumId,
    userId,
  });
 
  session.flash("success", "Photo uploaded successfully");
 
  return redirect(`/albums/${albumId}`);
}

import { type LoaderArgs, redirect, json } from "@remix-run/cloudflare";
import { User } from "~/models/User";
import { storage } from "superflare";
 
const getContentTypes = (extension: string) => {
  switch (extension) {
    case "png":
      return "image/png";
    case "jpg":
    case "jpeg":
      return "image/jpeg";
    case "gif":
      return "image/gif";
    case "svg":
      return "image/svg+xml";
    default:
      return "application/octet-stream";
  }
};
 
export async function loader({ context: { auth }, params }: LoaderArgs) {
  if (!(await auth.check(User))) {
   throw new Response("Unauthorized", { status: 401 });
  }
 
  // パスパラメーターからストレージのキーを取得
  const storageKey = params.key as string;
  // ストレージから画像を取得
  const obj = await storage().get(storageKey);
 
  // 存在しないキーの場合は 404 を返す
  if (!obj) {
    return new Response("Not found", { status: 404 });
  }
 
  const extension = obj.key.split(".").pop() || "";
 
  return new Response(obj.body, {
    headers: {
      "Content-Type": getContentTypes(extension),
    },
  });
}

  export async function loader({ params, context: { auth } }: LoaderArgs) {
    // ...
 
    const album = await Album.where("id", albumId)
      .where("userId", userId)
      .first();
 
    // アルバムが存在しない場合、404を返す
    if (!album) {
      throw new Response("Not found", { status: 404 });
    }
 
    return json({
      album,
+     images: await album.images,
    });
  }

  export default function AlbumPage() {
    const { album, images } = useLoaderData<typeof loader>();
 
    return (
      <>
        <h1>{album.title}</h1>
        <p>{album.description}</p>
 
        { // ...}
 
+       <h2>Photos</h2>
+       <ul
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))",
+            gap: "1rem",
+          }}
+        >
+         {images.map((image) => (
+           <li key={image.id}>
+             <img src={`/images/${image.key}`} alt="" width="256" height="144" />
+           </li>
+         ))}
+       </ul>
      </>
    );
  }

import { type LoaderArgs, redirect } from "@remix-run/cloudflare";
import { Image } from "~/models/Image";
import { storage } from "superflare";
 
export async function action({
  request,
  params,
  context: { auth },
}: LoaderArgs) {
  if (!(await auth.check(User))) {
    throw new Response("Unauthorized", { status: 401 });
  }
 
  const formData = await request.formData();
  const intent = formData.get("intent") as string;
 
  // 削除リクエストでない場合はエラーを返す
  if (intent !== "delete") {
    throw new Response(`The intent ${intent} is not supported`, {
      status: 400,
    });
  }
 
  // パスパラメーターからストレージのキーを取得
  const storageKey = params.key as string;
  // データベースから画像データを取得
  const image = await Image.where("key", storageKey).first();
 
  if (!image) {
    throw new Response("Not found", { status: 404 });
  }
 
  // リダイレクト先のアルバムID
  const albumId = image.albumId;
 
  // 画像を作成したユーザー以外は削除できない
  if (image.userId !== (await auth.id())) {
    throw new Response("Forbidden", { status: 403 });
  }
 
  // データベースとストレージから画像を削除
  await Promise.all([image.delete(), storage().delete(storageKey)]);
 
  return redirect(`/albums/${albumId}`);
}

npx wrangler d1 migrations apply my-superflare-app-db -j
npx wrangler secret put APP_KEY -j

{
  "compatibility_date": "2023-04-02",
  "site": {
    "bucket": "./public"
  }
}

npm run build && npx wrangler publish -j