feat: enable SSR on Amplify Hosting (#34)

* fix: update frontend build configuration and enable server-side rendering

* feat: SSR mode

* fix: eslint error

Author: fossamagna

amplify.yml

@@ -9,11 +9,14 @@ backend:
 
 frontend:
   phases:
+    preBuild:
+      commands:
+        - "npm ci --cache .npm --prefer-offline"
     build:
       commands:
-        - npm run build
+        - "npm run build"
   artifacts:
-    baseDirectory: build/client
+    baseDirectory: .amplify-hosting
     files:
       - "**/*"
   cache:

app/components/account-card.tsx

@@ -6,7 +6,10 @@ interface AccountCardProps {
   onClick?: () => void;
 }
 
-type Account = Schema["Account"]["type"];
+type Account = Pick<
+  Schema["Account"]["type"],
+  "id" | "name" | "photo" | "organizationLine" | "residence"
+>;
 
 export function AccountCard({ account, onClick }: AccountCardProps) {
   return (

app/components/account-form.tsx

@@ -8,9 +8,15 @@ import { MultiSelect } from "./ui/multi-select";
 export interface AccountFormProps {
   error?: Error | null;
   onCancel: () => void;
-  account?: Schema["Account"]["type"]; // 既存のアカウント情報（編集時）
-  projects?: Schema["Project"]["type"][]; // 利用可能なプロジェクトリスト
-  projectAssignments?: Schema["ProjectAssignment"]["type"][]; // 現在のプロジェクトアサインメント
+  account?: Pick<
+    Schema["Account"]["type"],
+    "id" | "name" | "email" | "photo" | "organizationLine" | "residence"
+  >; // 既存のアカウント情報（編集時）
+  projects?: Pick<Schema["Project"]["type"], "id" | "name">[]; // 利用可能なプロジェクトリスト
+  projectAssignments?: Pick<
+    Schema["ProjectAssignment"]["type"],
+    "projectId" | "startDate" | "endDate"
+  >[]; // 現在のプロジェクトアサインメント
 }
 
 export function AccountForm({
@@ -143,8 +149,11 @@ export function AccountForm({
 }
 
 interface ProjectAssignmentSelectorProps {
-  projects: Schema["Project"]["type"][];
-  initialAssignments: Schema["ProjectAssignment"]["type"][];
+  projects: Pick<Schema["Project"]["type"], "id" | "name">[];
+  initialAssignments: Pick<
+    Schema["ProjectAssignment"]["type"],
+    "projectId" | "startDate" | "endDate"
+  >[];
 }
 
 interface Assignment {

app/components/project-technology-form.tsx

@@ -7,7 +7,7 @@ interface ProjectTechnologyFormProps {
   onCancel: () => void;
   projectTechnology?: {
     name: string;
-    description?: string;
+    description?: string | null;
   };
 }
 
@@ -60,7 +60,7 @@ export function ProjectTechnologyForm({
             id="description"
             name="description"
             className="flex h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            defaultValue={projectTechnology?.description}
+            defaultValue={projectTechnology?.description ?? undefined}
           />
         </div>
 

app/lib/account.ts

@@ -1,10 +1,13 @@
+import type { AmplifyServer } from "aws-amplify/adapter-core";
 import type { Schema } from "../../amplify/data/resource";
-import { client } from "./amplify-client";
+import { client } from "./amplify-ssr-client";
 
 export async function updateProjectAssignments({
+  contextSpec,
   account,
   projectAssignments,
 }: {
+  contextSpec: AmplifyServer.ContextSpec;
   account: Pick<Schema["Account"]["type"], "id"> & {
     assignments?:
       | Pick<
@@ -27,7 +30,7 @@ export async function updateProjectAssignments({
   );
 
   for (const assignmentToRemove of assignmentsToRemove) {
-    await client.models.ProjectAssignment.delete({
+    await client.models.ProjectAssignment.delete(contextSpec, {
       id: assignmentToRemove.id,
     });
   }
@@ -46,14 +49,14 @@ export async function updateProjectAssignments({
         existingAssignment.startDate !== pa.startDate ||
         existingAssignment.endDate !== pa.endDate
       ) {
-        await client.models.ProjectAssignment.update({
+        await client.models.ProjectAssignment.update(contextSpec, {
           id: existingAssignment.id,
           startDate: pa.startDate,
           endDate: pa.endDate || undefined,
         });
       }
     } else {
-      await client.models.ProjectAssignment.create({
+      await client.models.ProjectAssignment.create(contextSpec, {
         accountId: account.id,
         projectId: pa.projectId,
         startDate: pa.startDate,

app/lib/amplify-ssr-client.ts

@@ -0,0 +1,9 @@
+import type { Schema } from "amplify/data/resource";
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import { generateClient } from "aws-amplify/api/server";
+import config from "../../amplify_outputs.json";
+
+const amplifyConfig = parseAmplifyConfig(config);
+export const client = generateClient<Schema>({
+  config: amplifyConfig,
+});

app/lib/amplifyServerUtils.ts

@@ -0,0 +1,6 @@
+import { createServerRunner } from "amplify-adapter-react-router";
+import outputs from "../../amplify_outputs.json";
+
+export const { runWithAmplifyServerContext } = createServerRunner({
+  config: outputs,
+});

app/lib/project.ts

@@ -1,10 +1,13 @@
 import type { Schema } from "amplify/data/resource";
-import { client } from "./amplify-client";
+import { client } from "./amplify-ssr-client";
+import type { AmplifyServer } from "aws-amplify/adapter-core";
 
 export async function updateProjectTechnologyLinks({
+  contextSpec,
   project,
   projectTechnologyIds,
 }: {
+  contextSpec: AmplifyServer.ContextSpec;
   project: Pick<Schema["Project"]["type"], "id"> & {
     technologies: Pick<
       Schema["ProjectTechnologyLink"]["type"],
@@ -21,7 +24,7 @@ export async function updateProjectTechnologyLinks({
       (link) => !projectTechnologyIds.includes(link.technologyId),
     ) ?? [];
   for (const linkToRemove of linksToRemove) {
-    await client.models.ProjectTechnologyLink.delete({
+    await client.models.ProjectTechnologyLink.delete(contextSpec, {
       id: linkToRemove.id,
     });
   }
@@ -30,7 +33,7 @@ export async function updateProjectTechnologyLinks({
     (id) => !currentTechIds.includes(id),
   );
   for (const techId of techToAdd) {
-    await client.models.ProjectTechnologyLink.create({
+    await client.models.ProjectTechnologyLink.create(contextSpec, {
       projectId: project.id,
       technologyId: techId,
     });

app/root.tsx

@@ -17,7 +17,7 @@ import { useEffect } from "react";
 import { ToasterProvider } from "~/components/toaster-provider";
 import config from "../amplify_outputs.json";
 
-Amplify.configure(config);
+Amplify.configure(config, { ssr: true });
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

app/routes/accounts.tsx

@@ -1,11 +1,12 @@
 // No need to import React with modern JSX transform
 import { Button } from "../components/ui/button";
 import { AccountCard } from "../components/account-card";
-import { client } from "../lib/amplify-client";
+import { client } from "../lib/amplify-ssr-client";
 import { useNavigate } from "react-router";
 import { parse } from "csv-parse/browser/esm";
 import { CSVImportDialog } from "../components/csv-import-dialog";
 import type { Route } from "./+types/accounts";
+import { runWithAmplifyServerContext } from "~/lib/amplifyServerUtils";
 
 export function meta() {
   return [
@@ -14,7 +15,7 @@ export function meta() {
   ];
 }
 
-export async function clientAction({ request }: { request: Request }) {
+export async function action({ request }: { request: Request }) {
   const formData = await request.formData();
   const csvFile = formData.get("csvFile") as File;
 
@@ -66,27 +67,33 @@ export async function clientAction({ request }: { request: Request }) {
         continue;
       }
 
-      try {
-        const { errors } = await client.models.Account.create({
-          name: record.name,
-          email: record.email,
-          photo: record.photo || undefined,
-          organizationLine: record.organizationLine,
-          residence: record.residence,
-        });
-
-        if (errors) {
-          results.errors.push(
-            `行 ${i + 1}: ${errors.map((err) => err.message).join(", ")}`,
-          );
-        } else {
-          results.success++;
-        }
-      } catch (error) {
-        results.errors.push(
-          `行 ${i + 1}: ${error instanceof Error ? error.message : "不明なエラー"}`,
-        );
-      }
+      const responseHeaders = new Headers();
+      await runWithAmplifyServerContext({
+        serverContext: { request, responseHeaders },
+        operation: async (contextSpec) => {
+          try {
+            const { errors } = await client.models.Account.create(contextSpec, {
+              name: record.name,
+              email: record.email,
+              photo: record.photo || undefined,
+              organizationLine: record.organizationLine,
+              residence: record.residence,
+            });
+
+            if (errors) {
+              results.errors.push(
+                `行 ${i + 1}: ${errors.map((err) => err.message).join(", ")}`,
+              );
+            } else {
+              results.success++;
+            }
+          } catch (error) {
+            results.errors.push(
+              `行 ${i + 1}: ${error instanceof Error ? error.message : "不明なエラー"}`,
+            );
+          }
+        },
+      });
     }
 
     return {
@@ -99,17 +106,23 @@ export async function clientAction({ request }: { request: Request }) {
   }
 }
 
-export async function clientLoader() {
-  try {
-    const { data } = await client.models.Account.list();
-    return { accounts: data };
-  } catch (err) {
-    console.error("Error fetching accounts:", err);
-    return {
-      accounts: [],
-      error: err instanceof Error ? err.message : "Unknown error occurred",
-    };
-  }
+export async function loader({ request }: Route.LoaderArgs) {
+  const responseHeaders = new Headers();
+  return runWithAmplifyServerContext({
+    serverContext: { request, responseHeaders },
+    operation: async (contextSpec) => {
+      try {
+        const { data } = await client.models.Account.list(contextSpec);
+        return { accounts: data };
+      } catch (err) {
+        console.error("Error fetching accounts:", err);
+        return {
+          accounts: [],
+          error: err instanceof Error ? err.message : "Unknown error occurred",
+        };
+      }
+    },
+  });
 }
 
 export default function Accounts({