Remix + Vite に移行 (#17)

* remix + vite 移行 * update client secret * fix: remove singlefetch option * fix gitignore * temporary update pubkey * Revert "temporary update pubkey" This reverts commit d9b9dbe. * font subset 削除 * 消し忘れ
saitamau-maximum · Oct 24, 2024 · 6a87c79 · 6a87c79
1 parent eb16254
commit 6a87c79
Show file tree

Hide file tree

Showing 12 changed files with 244 additions and 399 deletions.
diff --git a/cred-memo.md b/cred-memo.md
@@ -22,7 +22,7 @@
   - 画面上部に書かれている `Client ID`
 - Client Secret (GITHUB_OAUTH_SECRET)
   - Client secrets から発行したもの
-  - Cloudflare には `*****ba34a5be` が保存されている
+  - Cloudflare には `*****dc257174` が保存されている
 
 ### Auth で使用する情報
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/webapp/.gitignore b/webapp/.gitignore
@@ -6,5 +6,5 @@ node_modules
 /functions/\[\[path\]\].js.map
 /functions/metafile.*
 /functions/version.txt
-/public/build
+/build/
 .dev.vars
diff --git a/webapp/app/entry.server.tsx b/webapp/app/entry.server.tsx
@@ -10,6 +10,8 @@ import { RemixServer } from '@remix-run/react'
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
 
+const ABORT_DELAY = 5000
+
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
@@ -20,28 +22,40 @@ export default async function handleRequest(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   loadContext: AppLoadContext,
 ) {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), ABORT_DELAY)
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <RemixServer
+      context={remixContext}
+      url={request.url}
+      abortDelay={ABORT_DELAY}
+    />,
     {
       signal: request.signal,
       onError(error: unknown) {
-        // Log streaming rendering errors from inside the shell
-        console.error(error)
+        if (!controller.signal.aborted) {
+          // Log streaming rendering errors from inside the shell
+          console.error(error)
+        }
         responseStatusCode = 500
       },
     },
   )
 
+  body.allReady.then(() => clearTimeout(timeoutId))
+
   if (isbot(request.headers.get('user-agent') || '')) {
     await body.allReady
   }
 
   responseHeaders.set('Content-Type', 'text/html')
 
   // Security Headers
+  // TODO: unsafe-inline はなくしたいよねぇ
   responseHeaders.set(
     'Content-Security-Policy',
-    "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://avatars.githubusercontent.com; script-src 'self' 'unsafe-inline'",
+    "default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://avatars.githubusercontent.com; script-src 'self' 'unsafe-inline'",
   )
   responseHeaders.set(
     'Strict-Transport-Security',

diff --git a/webapp/app/root.tsx b/webapp/app/root.tsx
@@ -1,8 +1,6 @@
 import type { LinksFunction } from '@remix-run/cloudflare'
-import { cssBundleHref } from '@remix-run/css-bundle'
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -13,31 +11,6 @@ import {
 
 import './global.css'
 
-const usedCharacters = Array.from(
-  new Set(
-    [
-      // 英数字記号
-      '0123456789 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.?:/🤔',
-      // _index/route.tsx
-      'Maximum Auth',
-      'Aggregated Authentication Platform of Maximum',
-      '認証が必要なサイトからアクセスしてください。',
-      // continue/route.tsx
-      '以下のサイトにログインします。',
-      '続ける',
-      'やめる',
-      'Maximum メンバーではないため、続行できません。',
-      'このタブを閉じてください。',
-      // keygen/route.tsx
-      'Key Generator',
-      'Maximum Auth 向けの公開鍵・秘密鍵を生成します。再読み込みすると新しく生成されます。',
-      '秘密鍵は環境変数に置くなどして公開しないようにしてください。公開鍵は saitamau-maximum/auth で必要となるため PR を提出してください。',
-    ]
-      .join('')
-      .split(''),
-  ),
-).join('')
-
 export function ErrorBoundary() {
   const error = useRouteError()
   if (isRouteErrorResponse(error)) {
@@ -46,16 +19,6 @@ export function ErrorBoundary() {
         <head>
           <meta charSet='utf-8' />
           <meta name='viewport' content='width=device-width, initial-scale=1' />
-          <link rel='preconnect' href='https://fonts.googleapis.com' />
-          <link
-            rel='preconnect'
-            href='https://fonts.gstatic.com'
-            crossOrigin='anonymous'
-          />
-          <link
-            href={`https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap&text=${usedCharacters}`}
-            rel='stylesheet'
-          />
           <Meta />
           <Links />
         </head>
@@ -70,7 +33,6 @@ export function ErrorBoundary() {
           </main>
           <ScrollRestoration />
           <Scripts />
-          <LiveReload />
         </body>
       </html>
     )
@@ -90,7 +52,7 @@ export default function App() {
           crossOrigin='anonymous'
         />
         <link
-          href={`https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap&text=${usedCharacters}`}
+          href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap'
           rel='stylesheet'
         />
         <Meta />
@@ -100,12 +62,20 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   )
 }
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap&text=${usedCharacters}`,
+  },
 ]
diff --git a/webapp/functions/[[path]].ts b/webapp/functions/[[path]].ts
@@ -0,0 +1,8 @@
+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 });
diff --git a/webapp/remix.env.d.ts → webapp/load-context.ts b/webapp/remix.env.d.ts → webapp/load-context.ts
@@ -1,7 +1,3 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/cloudflare" />
-/// <reference types="@cloudflare/workers-types" />
-
 import { type PlatformProxy } from 'wrangler'
 
 interface Env {

diff --git a/webapp/package.json b/webapp/package.json
@@ -4,21 +4,21 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "cd ../package && pnpm build && cd ../webapp && remix build",
-    "dev": "remix dev --manual -c \"npm run start\"",
+    "build": "cd ../package && pnpm build && cd ../webapp && remix vite:build",
+    "deploy": "wrangler pages deploy ./build/client",
+    "dev": "remix vite:dev",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "fix": "eslint --cache --cache-location ./node_modules/.cache/eslint --fix .",
-    "start": "wrangler pages dev --compatibility-date=2024-09-02 ./public",
+    "start": "wrangler pages dev ./build/client",
     "typecheck": "tsc",
     "test": "vitest --coverage --ui --dir test",
     "test:pubkey": "vitest run test/pubkey.test.ts"
   },
   "dependencies": {
     "@octokit/auth-app": "^7.1.1",
-    "@remix-run/cloudflare": "^2.12.1",
-    "@remix-run/cloudflare-pages": "^2.12.1",
-    "@remix-run/css-bundle": "^2.12.1",
-    "@remix-run/react": "^2.12.1",
+    "@remix-run/cloudflare": "^2.13.1",
+    "@remix-run/cloudflare-pages": "^2.13.1",
+    "@remix-run/react": "^2.13.1",
     "@saitamau-maximum/auth": "workspace:^",
     "clsx": "^2.1.1",
     "isbot": "^5.1.17",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240925.0",
-    "@remix-run/dev": "^2.12.1",
+    "@remix-run/dev": "^2.13.1",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.3.0",
     "@vitest/coverage-v8": "^2.1.1",
@@ -43,6 +43,8 @@
     "globals": "^15.9.0",
     "jsdom": "^25.0.1",
     "typescript": "^5.6.2",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^2.1.1",
     "wrangler": "^3.78.10"
   },

diff --git a/webapp/remix.config.js b/webapp/remix.config.js
diff --git a/webapp/server.ts b/webapp/server.ts
diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json
@@ -1,10 +1,18 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2022",
@@ -17,7 +25,7 @@
       "~/*": ["./app/*"]
     },
 
-    // Remix takes care of building everything in `remix build`.
+    // Vite takes care of building everything, not tsc.
     "noEmit": true
   }
 }
diff --git a/webapp/vite.config.ts b/webapp/vite.config.ts
@@ -0,0 +1,22 @@
+import {
+  vitePlugin as remix,
+  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
+} from '@remix-run/dev'
+
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [
+    remixCloudflareDevProxy(),
+    remix({
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+        v3_lazyRouteDiscovery: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+})