Cloud RunでのSSRに移行する

.gcloudignore

@@ -0,0 +1,3 @@
+!.env
+/functions
+/scripts

app/layouts/_components/AccountMenu.tsx

@@ -44,12 +44,14 @@ export const AccountMenu = () => {
             component={Link}
             to={{ pathname: 'sign-in', search: `?redirect=${currentPath}` }}
             replace
+            prefetch='viewport'
           />
           <NavLink
             label='サインアップ'
             component={Link}
             to={{ pathname: 'sign-up', search: `?redirect=${currentPath}` }}
             replace
+            prefetch='viewport'
           />
         </>
       )}

app/layouts/_components/AdminNavMenu.tsx

@@ -4,7 +4,12 @@ import { Link } from '@remix-run/react';
 export const AdminNavMenu = () => {
   return (
     <Box aria-label='ナビゲーションメニュー'>
-      <NavLink label='書籍管理' component={Link} to='/admin/books' />
+      <NavLink
+        label='書籍管理'
+        component={Link}
+        to='/admin/books'
+        prefetch='viewport'
+      />
     </Box>
   );
 };

app/layouts/_components/NavMenu.tsx

@@ -4,7 +4,12 @@ import { Link } from '@remix-run/react';
 export const NavMenu = () => {
   return (
     <Box aria-label='ナビゲーションメニュー'>
-      <NavLink label='書籍' component={Link} to='/books' />
+      <NavLink
+        label='書籍'
+        component={Link}
+        to='/books'
+        prefetch='viewport'
+      />
     </Box>
   );
 };

app/root.tsx

@@ -2,7 +2,7 @@ import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
 import './tailwind.css';
-import { Center, Title } from '@mantine/core';
+import { Center, LoadingOverlay, Title } from '@mantine/core';
 import {
   json,
   isRouteErrorResponse,
@@ -13,6 +13,7 @@ import {
   ScrollRestoration,
   useRouteError,
   useLoaderData,
+  useNavigation,
 } from '@remix-run/react';
 import { LoadingScreen } from '~/components/screens/LoadingScreen';
 import { initializeApp } from '~/utils/firebase/app';
@@ -24,7 +25,7 @@ import {
 import type { LinksFunction } from '@remix-run/node';
 import type { FirebaseOptions } from 'firebase/app';
 
-export async function clientLoader() {
+export async function loader() {
   return json(firebaseConfig());
 }
 
@@ -67,9 +68,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   const config = useLoaderData<FirebaseOptions>();
+  const navigation = useNavigation();
   initializeApp(config);
 
-  return <Outlet />;
+  return (
+    <>
+      <LoadingOverlay visible={navigation.state === 'loading'} />
+      <Outlet />
+    </>
+  );
 }
 
 export function HydrateFallback() {

app/routes/_public._index.tsx

@@ -1,7 +1,7 @@
-import { replace } from '@remix-run/react';
+import { replace } from '@remix-run/node';
 import { LoadingScreen } from '~/components/screens/LoadingScreen';
 
-export async function clientLoader() {
+export async function loader() {
   return replace('/books');
 }
 

app/routes/admin._index.tsx

@@ -1,7 +1,7 @@
-import { replace } from '@remix-run/react';
+import { replace } from '@remix-run/node';
 import { AdminRoot } from '~/components/pages/admin/AdminRoot';
 
-export async function clientLoader() {
+export async function loader() {
   return replace('/admin/books');
 }
 

firebase.json

@@ -1,19 +1,14 @@
 {
   "hosting": {
-    "public": "build/client",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
         "source": "**",
-        "destination": "/index.html"
+        "run": {
+          "serviceId": "remix-firebase-tutorial-sample",
+          "region": "asia-northeast1"
+        }
       }
-    ],
-    "predeploy": [
-      "rm -rf .firebase"
     ]
   },
   "functions": [

package.json

@@ -16,10 +16,12 @@
     "format": "prettier --write . && pnpm functions format && pnpm shared format",
     "preview": "vite preview",
     "typecheck": "tsc",
-    "deploy:hosting": "pnpm build && firebase deploy --except functions --project default",
+    "deploy:hosting": "firebase deploy --except functions --project default",
+    "deploy:cloudrun": "pnpm build && gcloud run deploy remix-firebase-tutorial-sample --project remix-fire-tutorial-sample --region asia-northeast1 --memory 1Gi --source .",
     "deploy:functions": "pnpm functions deploy:default",
     "deploy:rules": "firebase deploy --only firestore:rules,storage --project default",
-    "tsx": "tsx --env-file=scripts/.env"
+    "tsx": "tsx --env-file=scripts/.env",
+    "start": "remix-serve build/server/index.js"
   },
   "dependencies": {
     "@local/shared": "workspace:^",
@@ -31,6 +33,7 @@
     "@mantine/notifications": "^7.13.3",
     "@remix-run/node": "^2.13.1",
     "@remix-run/react": "^2.13.1",
+    "@remix-run/serve": "^2.13.1",
     "@sonicgarden/react-fire-hooks": "^1.1.2",
     "@tabler/icons-react": "^3.19.0",
     "firebase": "^10.14.1",