Rork Max × tRPC × Cloudflare Workers：型検査が緑でも本番が 500 を返す3つの境界

// packages/api/src/router/index.ts
import { router } from '../trpc';
import { authRouter } from './auth';
import { userRouter } from './user';
import { contentRouter } from './content';
 
export const appRouter = router({
  auth: authRouter,
  user: userRouter,
  content: contentRouter,
});
 
export type AppRouter = typeof appRouter;

// packages/api/src/trpc.ts
import { initTRPC, TRPCError } from '@trpc/server';
import { z } from 'zod';
import type { HonoContext } from './types';
 
interface Context {
  env: Env;
  userId?: string;
}
 
const t = initTRPC.context<Context>().create({
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        // クライアントに渡すエラー情報を制御
        zodError:
          error.cause instanceof z.ZodError
            ? error.cause.flatten()
            : null,
      },
    };
  },
});
 
export const router = t.router;
export const publicProcedure = t.procedure;
 
// 認証済みユーザーのみアクセス可能なプロシージャ
export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: '認証が必要です',
    });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

// packages/api/src/router/user.ts
import { z } from 'zod';
import { router, protectedProcedure, publicProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';
 
const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1).max(50),
  email: z.string().email(),
  bio: z.string().max(200).optional(),
  avatarUrl: z.string().url().optional(),
  createdAt: z.string(),
});
 
export const userRouter = router({
  // 公開エンドポイント：ユーザープロフィール取得
  getProfile: publicProcedure
    .input(z.object({ userId: z.string().uuid() }))
    .output(UserSchema)
    .query(async ({ input, ctx }) => {
      const result = await ctx.env.DB.prepare(
        'SELECT * FROM users WHERE id = ?'
      ).bind(input.userId).first();
 
      if (!result) {
        throw new TRPCError({
          code: 'NOT_FOUND',
          message: 'ユーザーが見つかりません',
        });
      }
 
      // ⚠️ この行は動きません。理由は直後に説明します
      return result as z.infer<typeof UserSchema>;
    }),
 
  // 認証必須：自分のプロフィール更新
  updateProfile: protectedProcedure
    .input(z.object({
      name: z.string().min(1).max(50).optional(),
      bio: z.string().max(200).optional(),
    }))
    .mutation(async ({ input, ctx }) => {
      const updates: string[] = [];
      const values: unknown[] = [];
 
      if (input.name) {
        updates.push('name = ?');
        values.push(input.name);
      }
      if (input.bio !== undefined) {
        updates.push('bio = ?');
        values.push(input.bio);
      }
 
      if (updates.length === 0) {
        throw new TRPCError({
          code: 'BAD_REQUEST',
          message: '更新するフィールドがありません',
        });
      }
 
      values.push(new Date().toISOString(), ctx.userId);
 
      await ctx.env.DB.prepare(
        `UPDATE users SET ${updates.join(', ')}, updated_at = ? WHERE id = ?`
      ).bind(...values).run();
 
      return { success: true };
    }),
});

1d6bd9d5eea00bf5749725b94279a2fe   ← 長さ 32・区切り文字なし

// packages/api/src/db/mappers.ts
import { z } from 'zod';
 
// DB の生の行（snake_case・id はハイフンなし16進）
const UserRowSchema = z.object({
  id: z.string().regex(/^[0-9a-f]{32}$/),
  name: z.string(),
  email: z.string().email(),
  bio: z.string().nullable(),
  avatar_url: z.string().nullable(),
  created_at: z.string(),
  updated_at: z.string(),
});
 
// API が外に出す形（camelCase）
export const UserSchema = z.object({
  id: z.string().regex(/^[0-9a-f]{32}$/),
  name: z.string().min(1).max(50),
  email: z.string().email(),
  bio: z.string().max(200).optional(),
  avatarUrl: z.string().url().optional(),
  createdAt: z.string(),
});
 
export function toUser(row: unknown): z.infer<typeof UserSchema> {
  // ここで落ちれば「DB のスキーマが変わった」と即座に分かる
  const r = UserRowSchema.parse(row);
  return {
    id: r.id,
    name: r.name,
    email: r.email,
    bio: r.bio ?? undefined,
    avatarUrl: r.avatar_url ?? undefined,
    createdAt: r.created_at,
  };
}

// packages/api/src/index.ts
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';
import { trpcServer } from '@hono/trpc-server';
import { appRouter } from './router';
import { createContext } from './context';
 
// Cloudflare Workers の環境変数型定義
export interface Env {
  DB: D1Database;
  CACHE: KVNamespace;
  JWT_SECRET: string;
  ENVIRONMENT: string;
}
 
const app = new Hono<{ Bindings: Env }>();
 
// CORSの設定（Rork Max アプリのドメインを許可）
app.use(
  '/trpc/*',
  cors({
    origin: [
      'https://your-rork-app.com',
      'exp://localhost:8081', // Expo 開発時
    ],
    allowMethods: ['GET', 'POST', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
  })
);
 
app.use('/trpc/*', logger());
 
// tRPC ハンドラーのマウント
app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
    createContext: async (opts, c) => createContext(opts, c),
  })
);
 
// ヘルスチェックエンドポイント
app.get('/health', (c) => {
  return c.json({
    status: 'ok',
    timestamp: new Date().toISOString(),
    environment: c.env.ENVIRONMENT,
  });
});
 
export default app;

// packages/api/src/context.ts
import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
import type { Context } from 'hono';
import type { Env } from './index';
import * as jose from 'jose';
 
export async function createContext(
  opts: FetchCreateContextFnOptions,
  c: Context<{ Bindings: Env }>
) {
  const authHeader = opts.req.headers.get('Authorization');
  let userId: string | undefined;
 
  if (authHeader?.startsWith('Bearer ')) {
    const token = authHeader.slice(7);
    try {
      const secret = new TextEncoder().encode(c.env.JWT_SECRET);
      const { payload } = await jose.jwtVerify(token, secret);
      userId = payload.sub as string;
    } catch {
      // トークンが無効な場合は userId を undefined のまま
    }
  }
 
  return {
    env: c.env,
    userId,
  };
}

// apps/mobile/src/lib/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import { httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../../../packages/api/src/router';
 
// AppRouter 型をインポートして完全な型安全を実現
export const trpc = createTRPCReact<AppRouter>();
 
export function createTRPCClient(getToken: () => string | null) {
  return {
    links: [
      httpBatchLink({
        url: process.env.EXPO_PUBLIC_API_URL + '/trpc',
        headers() {
          const token = getToken();
          return token
            ? { Authorization: `Bearer ${token}` }
            : {};
        },
      }),
    ],
  };
}

// apps/mobile/src/providers/TRPCProvider.tsx
import { useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc, createTRPCClient } from '../lib/trpc';
import { useAuth } from '../hooks/useAuth';
 
export function TRPCProvider({ children }: { children: React.ReactNode }) {
  const { getToken } = useAuth();
 
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            retry: 2,
            staleTime: 5 * 60 * 1000, // 5分間キャッシュ
          },
        },
      })
  );
 
  const [trpcClient] = useState(() =>
    trpc.createClient(createTRPCClient(getToken))
  );
 
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

// apps/mobile/src/screens/ProfileScreen.tsx
import { View, Text, ActivityIndicator } from 'react-native';
import { trpc } from '../lib/trpc';
 
export function ProfileScreen({ userId }: { userId: string }) {
  // 型が完全に補完される。プロパティ名のミスはコンパイル時に検出
  const { data: profile, isLoading, error } = trpc.user.getProfile.useQuery(
    { userId },
    {
      enabled: !!userId,
    }
  );
 
  if (isLoading) return <ActivityIndicator />;
 
  if (error) {
    // tRPC のエラーコードをそのまま使える
    return (
      <Text>
        {error.data?.code === 'NOT_FOUND'
          ? 'ユーザーが見つかりません'
          : 'エラーが発生しました'}
      </Text>
    );
  }
 
  return (
    <View>
      {/* profile の型が AppRouter から自動推論される */}
      <Text>{profile.name}</Text>
      <Text>{profile.email}</Text>
      {profile.bio && <Text>{profile.bio}</Text>}
    </View>
  );
}

// プロフィール更新ミューテーション
const updateProfile = trpc.user.updateProfile.useMutation({
  onSuccess: () => {
    // キャッシュを無効化して最新データを再取得
    utils.user.getProfile.invalidate({ userId: currentUserId });
  },
  onError: (error) => {
    if (error.data?.zodError) {
      // Zod バリデーションエラーを詳細に処理できる
      console.error(error.data.zodError.fieldErrors);
    }
  },
});
 
// 呼び出し時も型安全
updateProfile.mutate({ name: '新しい名前', bio: '自己紹介文' });

// packages/api/src/db/migrations/0001_create_users.sql
CREATE TABLE IF NOT EXISTS users (
  id TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  bio TEXT,
  avatar_url TEXT,
  created_at TEXT NOT NULL DEFAULT (datetime('now')),
  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
);
 
CREATE INDEX idx_users_email ON users(email);

# D1 データベースの作成とマイグレーション
npx wrangler d1 create my-rork-db
npx wrangler d1 migrations apply my-rork-db --local  # ローカル開発
npx wrangler d1 migrations apply my-rork-db          # 本番環境

// ⚠️ 3つの問題があります（後述）
export async function withCache<T>(
  kv: KVNamespace,
  key: string,
  ttlSeconds: number,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = await kv.get(key, 'json');
  if (cached !== null) return cached as T;
 
  const fresh = await fetcher();
  await kv.put(key, JSON.stringify(fresh), { expirationTtl: ttlSeconds });
  return fresh;
}

// packages/api/src/utils/cache.ts
type Envelope<T> = { v: T };
 
export async function withCache<T>(
  kv: KVNamespace,
  key: string,
  ttlSeconds: number,
  fetcher: () => Promise<T>,
  waitUntil?: (p: Promise<unknown>) => void
): Promise<T> {
  // ラッパーに包むことで「値が null」と「キーが無い」を区別する
  const cached = await kv.get<Envelope<T>>(key, 'json');
  if (cached) return cached.v;
 
  const fresh = await fetcher();
  const write = kv.put(key, JSON.stringify({ v: fresh }), {
    expirationTtl: ttlSeconds,
  });
 
  // 書き込みを待たずにレスポンスを返す
  if (waitUntil) waitUntil(write);
  else await write;
 
  return fresh;
}

export const contentRouter = router({
  getFeaturedContent: publicProcedure.query(async ({ ctx }) => {
    return withCache(
      ctx.env.CACHE,
      'featured-content',
      300,
      async () => {
        const { results } = await ctx.env.DB.prepare(
          'SELECT * FROM content WHERE featured = 1 ORDER BY created_at DESC LIMIT 10'
        ).all<ContentRow>();
        return results.map(toContent);  // 列名の変換もここで済ませる
      },
      ctx.waitUntil
    );
  }),
});

// ⚠️ 公称値どおりには効きません
export const rateLimitMiddleware = t.middleware(async ({ ctx, next, path }) => {
  const ip = 'client-ip'; // ← ヘッダーから取得する実装が必要
  const key = `rate-limit:${ip}:${path}`;
  const limit = 60; // 1分あたり60リクエスト
 
  const current = await ctx.env.CACHE.get(key);
  const count = current ? parseInt(current) : 0;
 
  if (count >= limit) {
    throw new TRPCError({ code: 'TOO_MANY_REQUESTS', message: '...' });
  }
 
  await ctx.env.CACHE.put(key, String(count + 1), { expirationTtl: 60 });
  return next();
});

// packages/api/src/middleware/rateLimit.ts
import { TRPCError } from '@trpc/server';
import { t } from '../trpc';
 
const WINDOW_SEC = 60;
const LIMIT = 60;
 
export const rateLimitMiddleware = t.middleware(async ({ ctx, next, path }) => {
  // 実クライアント IP。CF-Connecting-IP は Cloudflare が付け替えるため詐称できない
  const ip = ctx.req.headers.get('CF-Connecting-IP') ?? 'unknown';
 
  // 鍵に時刻バケットを含める → 窓の境界が put で動かない
  const bucket = Math.floor(Date.now() / 1000 / WINDOW_SEC);
  const key = `rl:${ip}:${path}:${bucket}`;
 
  const count = Number(await ctx.env.CACHE.get(key)) || 0;
 
  if (count >= LIMIT) {
    const retryAfter = WINDOW_SEC - Math.floor((Date.now() / 1000) % WINDOW_SEC);
    throw new TRPCError({
      code: 'TOO_MANY_REQUESTS',
      message: `リクエストが多すぎます。${retryAfter} 秒後に再試行してください。`,
    });
  }
 
  // 窓 2 つ分を TTL に取り、境界をまたぐ書き込みで消え残りが出ないようにする
  await ctx.env.CACHE.put(key, String(count + 1), {
    expirationTtl: WINDOW_SEC * 2,
  });
 
  return next();
});

# .github/workflows/deploy-api.yml
name: Deploy API to Cloudflare Workers
 
on:
  push:
    branches: [main]
    paths:
      - 'packages/api/**'
      - '.github/workflows/deploy-api.yml'
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v2
        with:
          version: 9
 
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
 
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
 
      - name: Run D1 migrations
        working-directory: packages/api
        run: npx wrangler d1 migrations apply my-rork-db
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 
      - name: Deploy to Cloudflare Workers
        working-directory: packages/api
        run: npx wrangler deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}