[すべて無料]Remix+Cloudflare Pagesでブロクシステムを作成する

1import { logDevReady } from "@remix-run/cloudflare";
2import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
3import * as build from "@remix-run/dev/server-build";
4
5if (process.env.NODE_ENV === "development") {
6  logDevReady(build);
7}
8
9type Env = {
10  prisma: Fetcher;
11  DATABASE_URL: string;
12};
13
14const initFetch = (env: Env) => {
15  const that = globalThis as typeof globalThis & { originFetch?: typeof fetch };
16  if (that.originFetch) return;
17  const originFetch = globalThis.fetch;
18  that.originFetch = originFetch;
19  globalThis.fetch = (async (input: RequestInfo, init?: RequestInit) => {
20    const url = new URL(input.toString());
21    if (["127.0.0.1", "localhost"].includes(url.hostname)) {
22      url.protocol = "http:";
23      return originFetch(url.toString(), init);
24    }
25    const databaseURL = new URL(env.DATABASE_URL as string);
26    if (url.hostname === databaseURL.hostname && env.prisma) {
27      return (env.prisma as Fetcher).fetch(input, init);
28    }
29    return originFetch(input, init);
30  }) as typeof fetch;
31};
32
33export const onRequest = createPagesFunctionHandler({
34  build,
35  getLoadContext: (context) => {
36    initFetch(context.env);
37    return context;
38  },
39  mode: build.mode,
40});

1import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/cloudflare";
2import { parse, serialize } from "cookie";
3import { createYoga } from "graphql-yoga";
4import { getUserFromToken } from "@/libs/client/getUserFromToken";
5import { Context, getPrisma } from "../libs/server/context";
6import { schema } from "../libs/server/schema";
7
8const yoga = createYoga<
9  {
10    request: Request;
11    env: { [key: string]: string };
12    responseCookies: string[];
13  },
14  Context
15>({
16  schema: schema(),
17  fetchAPI: { Response },
18  context: async ({ request: req, env, responseCookies }) => {
19    const cookies = parse(req.headers.get("Cookie") || "");
20    const token = cookies["auth-token"];
21    const user = await getUserFromToken({ token, secret: env.SECRET_KEY });
22    const setCookie: typeof serialize = (name, value, options) => {
23      const result = serialize(name, value, options);
24      responseCookies.push(result);
25      return result;
26    };
27    return {
28      req,
29      env,
30      prisma: getPrisma(env.DATABASE_URL),
31      user,
32      cookies,
33      setCookie,
34    };
35  },
36});
37
38export async function action({ request, context }: ActionFunctionArgs) {
39  const env = context.env as { [key: string]: string };
40  const responseCookies: string[] = [];
41  const response = await yoga.handleRequest(request, {
42    request,
43    env,
44    responseCookies,
45  });
46  responseCookies.forEach((v) => {
47    response.headers.append("set-cookie", v);
48  });
49  return new Response(response.body, response);
50}
51
52export async function loader({ request, context }: LoaderFunctionArgs) {
53  const env = context.env as { [key: string]: string };
54  const responseCookies: string[] = [];
55  const response = await yoga.handleRequest(request, {
56    request,
57    env,
58    responseCookies,
59  });
60  responseCookies.forEach((v) => {
61    response.headers.append("set-cookie", v);
62  });
63  return new Response(response.body, response);
64}

1import SchemaBuilder from "@pothos/core";
2import PrismaPlugin from "@pothos/plugin-prisma";
3import PrismaUtils from "@pothos/plugin-prisma-utils";
4import { PrismaClient } from "@prisma/client/edge";
5import PothosPrismaGeneratorPlugin from "pothos-prisma-generator";
6import PrismaTypes from "@/generated/pothos-types";
7import { Context } from "./context";
8
9/**
10 * Create a new schema builder instance
11 */
12
13type BuilderType = {
14  PrismaTypes: PrismaTypes;
15  Scalars: {
16    Upload: {
17      Input: File;
18      Output: File;
19    };
20  };
21  Context: Context;
22};
23
24export const createBuilder = (datasourceUrl: string) => {
25  const builder = new SchemaBuilder<BuilderType>({
26    plugins: [PrismaPlugin, PrismaUtils, PothosPrismaGeneratorPlugin],
27    prisma: {
28      client: new PrismaClient({
29        datasourceUrl,
30      }),
31    },
32    pothosPrismaGenerator: {
33      authority: ({ context }) => (context.user ? ["USER"] : []),
34      replace: { "%%USER%%": ({ context }) => context.user?.id },
35    },
36  });
37
38  return builder;
39};

1import { GraphQLScalarType, GraphQLSchema } from "graphql";
2
3import { SignJWT } from "jose";
4import { createBuilder } from "./builder";
5import { prisma } from "./context";
6import { getUser } from "./getUser";
7import { getUserInfo } from "./getUserInfo";
8import { importFile } from "./importFile";
9import { normalizationPostFiles } from "./normalizationPostFiles";
10import { isolatedFiles, uploadFile } from "./uploadFile";
11
12export const schema = () => {
13  let schema: GraphQLSchema;
14  return ({ env }: { env: { [key: string]: string | undefined } }) => {
15    if (!schema) {
16      const builder = createBuilder(env.DATABASE_URL ?? "");
17      builder.mutationType({
18        fields: (t) => ({
19          signIn: t.prismaField({
20            args: { token: t.arg({ type: "String" }) },
21            type: "User",
22            nullable: true,
23            resolve: async (_query, _root, { token }, { setCookie }) => {
24              const userInfo =
25                typeof token === "string"
26                  ? await getUserInfo(env.NEXT_PUBLIC_projectId, token)
27                  : undefined;
28              if (!userInfo) {
29                setCookie("auth-token", "", {
30                  httpOnly: true,
31                  secure: env.NODE_ENV !== "development",
32                  sameSite: "strict",
33                  path: "/",
34                  maxAge: 0,
35                  domain: undefined,
36                });
37                return null;
38              }
39              const user = await getUser(prisma, userInfo.name, userInfo.email);
40              if (user) {
41                const secret = env.SECRET_KEY;
42                if (!secret) throw new Error("SECRET_KEY is not defined");
43                const token = await new SignJWT({ payload: { user: user } })
44                  .setProtectedHeader({ alg: "HS256" })
45                  .sign(new TextEncoder().encode(secret));
46                setCookie("auth-token", token, {
47                  httpOnly: true,
48                  secure: env.NODE_ENV !== "development",
49                  maxAge: 1000 * 60 * 60 * 24 * 7,
50                  sameSite: "strict",
51                  path: "/",
52                  domain: undefined,
53                });
54              }
55              return user;
56            },
57          }),
58          uploadSystemIcon: t.prismaField({
59            type: "FireStore",
60            args: {
61              file: t.arg({ type: "Upload", required: true }),
62            },
63            resolve: async (_query, _root, { file }, { prisma, user }) => {
64              if (!user) throw new Error("Unauthorized");
65              const firestore = await uploadFile({
66                projectId: env.GOOGLE_PROJECT_ID ?? "",
67                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
68                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
69                binary: file,
70              });
71              const system = await prisma.system.update({
72                select: { icon: true },
73                data: {
74                  iconId: firestore.id,
75                },
76                where: { id: "system" },
77              });
78              await isolatedFiles({
79                projectId: env.GOOGLE_PROJECT_ID ?? "",
80                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
81                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
82              });
83              if (!system.icon) throw new Error("icon is not found");
84              return system.icon;
85            },
86          }),
87          uploadPostIcon: t.prismaField({
88            type: "FireStore",
89            args: {
90              postId: t.arg({ type: "String", required: true }),
91              file: t.arg({ type: "Upload" }),
92            },
93            resolve: async (
94              _query,
95              _root,
96              { postId, file },
97              { prisma, user }
98            ) => {
99              if (!user) throw new Error("Unauthorized");
100              if (!file) {
101                const firestore = await prisma.post
102                  .findUniqueOrThrow({
103                    select: { card: true },
104                    where: { id: postId },
105                  })
106                  .card();
107                if (!firestore) throw new Error("firestore is not found");
108                await prisma.fireStore.delete({
109                  where: { id: firestore.id },
110                });
111                return firestore;
112              }
113              const firestore = await uploadFile({
114                projectId: env.GOOGLE_PROJECT_ID ?? "",
115                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
116                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
117                binary: file,
118              });
119              const post = await prisma.post.update({
120                select: { card: true },
121                data: {
122                  cardId: firestore.id,
123                },
124                where: { id: postId },
125              });
126              await isolatedFiles({
127                projectId: env.GOOGLE_PROJECT_ID ?? "",
128                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
129                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
130              });
131              if (!post.card) throw new Error("card is not found");
132              return post.card;
133            },
134          }),
135          uploadPostImage: t.prismaField({
136            type: "FireStore",
137            args: {
138              postId: t.arg({ type: "String", required: true }),
139              file: t.arg({ type: "Upload", required: true }),
140            },
141            resolve: async (
142              _query,
143              _root,
144              { postId, file },
145              { prisma, user }
146            ) => {
147              if (!user) throw new Error("Unauthorized");
148              const firestore = await uploadFile({
149                projectId: env.GOOGLE_PROJECT_ID ?? "",
150                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
151                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
152                binary: file,
153              });
154              await prisma.post.update({
155                data: {
156                  postFiles: { connect: { id: firestore.id } },
157                },
158                where: { id: postId },
159              });
160              return firestore;
161            },
162          }),
163          normalizationPostFiles: t.boolean({
164            args: {
165              postId: t.arg({ type: "String", required: true }),
166              removeAll: t.arg({ type: "Boolean" }),
167            },
168            resolve: async (_root, { postId, removeAll }, { prisma, user }) => {
169              if (!user) throw new Error("Unauthorized");
170              await normalizationPostFiles(prisma, postId, removeAll === true, {
171                projectId: env.GOOGLE_PROJECT_ID ?? "",
172                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
173                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
174              });
175              await isolatedFiles({
176                projectId: env.GOOGLE_PROJECT_ID ?? "",
177                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
178                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
179              });
180              return true;
181            },
182          }),
183          restore: t.boolean({
184            args: {
185              file: t.arg({ type: "Upload", required: true }),
186            },
187            resolve: async (_root, { file }, { user }) => {
188              if (!user) throw new Error("Unauthorized");
189              importFile({
190                file: await file.text(),
191                projectId: env.GOOGLE_PROJECT_ID ?? "",
192                clientEmail: env.GOOGLE_CLIENT_EMAIL ?? "",
193                privateKey: env.GOOGLE_PRIVATE_KEY ?? "",
194              });
195              return true;
196            },
197          }),
198        }),
199      });
200      const Upload = new GraphQLScalarType({
201        name: "Upload",
202      });
203      builder.addScalarType("Upload", Upload, {});
204      schema = builder.toSchema({ sortSchema: false });
205    }
206    return schema;
207  };
208};

1/**
2 * By default, Remix will handle generating the HTTP Response for you.
3 * 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` ✨
4 * For more information, see https://remix.run/file-conventions/entry.server
5 */
6
7import { RemixServer } from "@remix-run/react";
8import { renderToReadableStream } from "react-dom/server";
9import { getUserFromToken } from "./libs/client/getUserFromToken";
10import { getHost } from "./libs/server/getHost";
11import { RootProvider } from "./libs/server/RootContext";
12import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
13
14export default async function handleRequest(
15  request: Request,
16  responseStatusCode: number,
17  responseHeaders: Headers,
18  remixContext: EntryContext,
19  // This is ignored so we can keep it in the template for visibility.  Feel
20  // free to delete this parameter in your app if you're not using it!
21  // eslint-disable-next-line @typescript-eslint/no-unused-vars
22  loadContext: AppLoadContext
23) {
24  const rootValue = await getInitialProps(request, loadContext);
25  const body = await renderToReadableStream(
26    <RootProvider value={rootValue}>
27      <RemixServer context={remixContext} url={request.url} />
28    </RootProvider>,
29    {
30      signal: request.signal,
31      onError(error: unknown) {
32        // Log streaming rendering errors from inside the shell
33        console.error(error);
34        responseStatusCode = 500;
35      },
36    }
37  );
38
39  await body.allReady;
40
41  responseHeaders.set("Content-Type", "text/html");
42  return new Response(body, {
43    headers: responseHeaders,
44    status: responseStatusCode,
45  });
46}
47
48const getInitialProps = async (
49  request: Request,
50  loadContext: AppLoadContext
51) => {
52  const env = loadContext.env as Record<string, string>;
53  const cookie = request.headers.get("cookie");
54  const cookies = Object.fromEntries(
55    cookie?.split(";").map((v) => v.trim().split("=")) ?? []
56  );
57  const token = cookies["auth-token"];
58  const session = await getUserFromToken({ token, secret: env.SECRET_KEY });
59  const host = getHost(request);
60  return {
61    cookie: String(cookie),
62    host,
63    session: session && { name: session.name, email: session.email },
64    env: Object.fromEntries(
65      Object.entries(env).filter(([v]) => v.startsWith("NEXT_PUBLIC_"))
66    ),
67  };
68};

1import { NextSSRWait } from "@react-libraries/next-exchange-ssr";
2import { cssBundleHref } from "@remix-run/css-bundle";
3import {
4  Links,
5  LiveReload,
6  Meta,
7  Outlet,
8  Scripts,
9  ScrollRestoration,
10} from "@remix-run/react";
11import stylesheet from "@/tailwind.css";
12import { GoogleAnalytics } from "./components/Commons/GoogleAnalytics";
13import { HeadProvider, HeadRoot } from "./components/Commons/Head";
14import { EnvProvider } from "./components/Provider/EnvProvider";
15import { UrqlProvider } from "./components/Provider/UrqlProvider";
16import { Header } from "./components/System/Header";
17import { LoadingContainer } from "./components/System/LoadingContainer";
18import { NotificationContainer } from "./components/System/Notification/NotificationContainer";
19import { StoreProvider } from "./libs/client/context";
20import { RootValue, useRootContext } from "./libs/server/RootContext";
21import type { LinksFunction } from "@remix-run/cloudflare";
22
23export const links: LinksFunction = () => [
24  { rel: "stylesheet", href: stylesheet },
25  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
26];
27
28export default function App() {
29  const value = useRootContext();
30  const { host, session, cookie, env } = value;
31  return (
32    <html lang="ja">
33      <EnvProvider value={env}>
34        <StoreProvider initState={() => ({ host, user: session })}>
35          <UrqlProvider host={host} cookie={cookie}>
36            <HeadProvider>
37              <head>
38                <meta charSet="utf-8" />
39                <meta
40                  name="viewport"
41                  content="width=device-width, initial-scale=1"
42                />
43                <link rel="preconnect" href="https://fonts.googleapis.com" />
44                <link
45                  rel="preconnect"
46                  href="https://fonts.gstatic.com"
47                  crossOrigin="anonymous"
48                />
49                <Meta />
50                <Links />
51                <GoogleAnalytics />
52                <NextSSRWait>
53                  <HeadRoot />
54                </NextSSRWait>
55                <RootValue value={{ session, env }} />
56              </head>
57              <body>
58                <div className={"flex h-screen flex-col"}>
59                  <Header />
60                  <main className="relative flex-1 overflow-hidden">
61                    <Outlet />
62                  </main>
63                  <LoadingContainer />
64                  <NotificationContainer />
65                </div>
66                <ScrollRestoration />
67                <Scripts />
68                <LiveReload />
69              </body>
70            </HeadProvider>
71          </UrqlProvider>
72        </StoreProvider>
73      </EnvProvider>
74    </html>
75  );
76}

1import React from "react";
2import {
3  FC,
4  ReactNode,
5  createContext,
6  useContext,
7  useEffect,
8  useRef,
9  useSyncExternalStore,
10} from "react";
11
12const DATA_NAME = "__HEAD_VALUE__";
13
14export type ContextType<T = ReactNode[]> = {
15  state: T;
16  storeChanges: Set<() => void>;
17  dispatch: (callback: (state: T) => T) => void;
18  subscribe: (onStoreChange: () => void) => () => void;
19};
20
21export const useCreateHeadContext = <T,>(initState: () => T) => {
22  const context = useRef<ContextType<T>>({
23    state: initState(),
24    storeChanges: new Set(),
25    dispatch: (callback) => {
26      context.state = callback(context.state);
27      context.storeChanges.forEach((storeChange) => storeChange());
28    },
29    subscribe: (onStoreChange) => {
30      context.storeChanges.add(onStoreChange);
31      return () => {
32        context.storeChanges.delete(onStoreChange);
33      };
34    },
35  }).current;
36  return context;
37};
38
39const HeadContext = createContext<
40  ContextType<{ type: string; props: Record<string, unknown> }[][]>
41>(undefined as never);
42
43export const HeadProvider = ({ children }: { children: ReactNode }) => {
44  const context = useCreateHeadContext<
45    { type: string; props: Record<string, unknown> }[][]
46  >(() => {
47    if (typeof window !== "undefined") {
48      return [
49        JSON.parse(
50          document.querySelector(`script#${DATA_NAME}`)?.textContent ?? "{}"
51        ),
52      ];
53    }
54    return [[]];
55  });
56  return (
57    <HeadContext.Provider value={context}>{children}</HeadContext.Provider>
58  );
59};
60
61export const HeadRoot: FC = () => {
62  const context = useContext(HeadContext);
63  const state = useSyncExternalStore(
64    context.subscribe,
65    () => context.state,
66    () => context.state
67  );
68  useEffect(() => {
69    context.dispatch(() => {
70      return [];
71    });
72  }, [context]);
73  const heads = state.flat();
74  return (
75    <>
76      <script
77        id={DATA_NAME}
78        type="application/json"
79        dangerouslySetInnerHTML={{
80          __html: JSON.stringify(heads).replace(/</g, "\\u003c"),
81        }}
82      />
83      {heads.map(({ type: Tag, props }, index) => (
84        <Tag key={`HEAD${Tag}${index}`} {...props} />
85      ))}
86    </>
87  );
88};
89export const Head: FC<{ children: ReactNode }> = ({ children }) => {
90  const context = useContext(HeadContext);
91  useEffect(() => {
92    const value = extractInfoFromChildren(children);
93    context.dispatch((heads) => [...heads, value]);
94    return () => {
95      context.dispatch((heads) => heads.filter((head) => head !== value));
96    };
97  }, [children, context]);
98
99  if (typeof window === "undefined") {
100    context.dispatch((heads) => [...heads, extractInfoFromChildren(children)]);
101  }
102  return null;
103};
104
105const extractInfoFromChildren = (
106  children: ReactNode
107): { type: string; props: Record<string, unknown> }[] =>
108  React.Children.toArray(children).flatMap((child) => {
109    if (React.isValidElement(child)) {
110      if (child.type === React.Fragment) {
111        return extractInfoFromChildren(child.props.children);
112      }
113      if (typeof child.type === "string") {
114        return [{ type: child.type, props: child.props }];
115      }
116    }
117    return [];
118  });

1import { FC, useMemo } from "react";
2import { PostsQuery, usePostsQuery, useSystemQuery } from "@/generated/graphql";
3import { useLoading } from "@/hooks/useLoading";
4import { PostList } from "../../PostList";
5import { Title } from "../../System/Title";
6
7interface Props {}
8
9/**
10 * TopPage
11 *
12 * @param {Props} { }
13 */
14export const TopPage: FC<Props> = ({}) => {
15  const [{ data: dataSystem }] = useSystemQuery();
16  const [{ fetching, data }] = usePostsQuery();
17  const posts = useMemo(() => {
18    if (!data?.findManyPost) return undefined;
19    return [...data.findManyPost].sort(
20      (a, b) =>
21        new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
22    );
23  }, [data?.findManyPost]);
24  const categories = useMemo(() => {
25    if (!data?.findManyPost) return undefined;
26    const categoryPosts: {
27      [key: string]: { name: string; posts: PostsQuery["findManyPost"] };
28    } = {};
29    data.findManyPost.forEach((post) => [
30      post.categories.forEach((c) => {
31        const value =
32          categoryPosts[c.id] ??
33          (categoryPosts[c.id] = { name: c.name, posts: [] });
34        value.posts.push(post);
35      }),
36    ]);
37    return Object.entries(categoryPosts).sort(([, a], [, b]) =>
38      a.name < b.name ? -1 : 1
39    );
40  }, [data?.findManyPost]);
41  const system = dataSystem?.findUniqueSystem;
42  useLoading(fetching);
43
44  if (!posts || !categories || !system) return null;
45  return (
46    <>
47      <Title>{system.description || "Article List"}</Title>
48      <div className="flex h-full w-full flex-col gap-16 overflow-auto p-8">
49        <PostList id="news" title="新着順" posts={posts} limit={10} />
50        {categories.map(([id, { name, posts }]) => (
51          <PostList key={id} id={id} title={name} posts={posts} limit={10} />
52        ))}
53      </div>
54    </>
55  );
56};