🏆 フロントエンドランキング 2026年4月

• ⚡ 負荷特性: ピーク時 8,000接続/時（≒ 2.2 req/s）、通常時 500〜1,000接続/時（≒ 0.3 req/s）
• 🔒 データ特性: 個人情報（機微情報）を扱う。回答データは書き込み重視、レポート閲覧は月1〜数回
• 🗂 機能: 従業員認証、アンケートフォーム（80〜120問）、結果分析レポート、監査ログ
• 📜 法令: 個人情報保護法・GDPR相当配慮が必要
• 🏗 インフラ固定: Vercel（フロント + Serverless Functions）+ Amazon Aurora（Serverless v2 または DSQL）

ユーザー（従業員ブラウザ）
        |
        v
  [Vercel Edge Network / CDN]
        |
   ┌────┴────────────────────────┐
   |                             |
[Edge Runtime]          [Serverless Functions]
 ・認証JWT検証           ・フォーム送信処理
 ・静的アセット配信       ・レポート生成
 ・ミドルウェア           ・管理API
   |                             |
   |                   ┌─────────┴──────────┐
   |                   |                    |
   |            [RDS Proxy]         [Aurora Data API]
   |             接続プール           HTTP REST接続
   |                   |                    |
   └───────────────────┴────────────────────┘
                        |
              [Amazon Aurora Serverless v2]
               us-east-1 / MySQL or PostgreSQL
                        |
              [Amazon Aurora DSQL] ※2025 GA
               サーバーレスネイティブ・HTTP接続
      

• RDS Proxy: 従来型。接続プールをマネージド管理。追加コスト発生（約$0.015/VCU/時）
• Aurora Data API: HTTP経由でコネクションレス接続。Serverless Functionsと相性良好。レイテンシ若干高め
• Aurora DSQL（2025 GA）: サーバーレスネイティブ設計。コネクションレス、自動スケール。次世代の本命
• Vercel Secure Compute / Private Link: Vercel ProでVPC内のAuroraに直接接続可能。最もセキュア

// app/actions/stress-check.ts
'use server';
import {"{"} z {"}"} from 'zod';
import {"{"} db {"}"} from '@/lib/db';

const schema = z.object({"{"}
  employeeId: z.string().min(1),
  answers: z.array(z.number().min(1).max(5)),
{"}"});

export async function submitStressCheck(formData: FormData) {"{"}
  const raw = Object.fromEntries(formData);
  const parsed = schema.safeParse(raw);
  if (!parsed.success) return {"{"} error: parsed.error.flatten() {"}"};

  await db.insert(stressCheckAnswers).values({"{"}
    employeeId: parsed.data.employeeId,
    answers: parsed.data.answers,
    submittedAt: new Date(),
  {"}"});

  return {"{"} success: true {"}"};
{"}"}

// src/routes/stress-check/+page.server.ts
import type {"{"} Actions {"}"} from './$types';
import {"{"} fail {"}"} from '@sveltejs/kit';
import {"{"} z {"}"} from 'zod';
import {"{"} db {"}"} from '$lib/db';

export const actions: Actions = {"{"}
  submit: async ({"{"} request, locals {"}"}) => {"{"}
    const formData = await request.formData();
    const parsed = schema.safeParse(Object.fromEntries(formData));
    if (!parsed.success) return fail(400, {"{"} errors: parsed.error.flatten() {"}"});

    await db.insert(stressCheckTable).values(parsed.data);
    return {"{"} success: true {"}"};
  {"}"}
{"}"};

• • コスト: 約$0.015 USD/vCPU時間 + データ転送料
• • 追加レイテンシ: 1〜3ms程度（許容範囲内）
• • IAM認証対応でセキュリティ強化可能

// Aurora DSQL + Drizzle の接続設定例
import {"{"} drizzle {"}"} from 'drizzle-orm/aws-data-api/pg';
import {"{"} RDSDataClient {"}"} from '@aws-sdk/client-rds-data';

const client = new RDSDataClient({"{"} region: 'us-east-1' {"}"});
export const db = drizzle(client, {"{"}
  database: process.env.AURORA_DATABASE!,
  secretArn: process.env.AURORA_SECRET_ARN!,
  resourceArn: process.env.AURORA_RESOURCE_ARN!,
{"}"});

• 📍 既存Aurora PostgreSQL/MySQLを使う → RDS Proxy + Vercel Secure Compute
• 📍 新規DBを選べる + 最先端構成を採用したい → Aurora DSQL + Drizzle
• 📍 VPC構成を避けたい（シンプルさ重視） → Aurora Data API
• 📍 us-east-1推奨: VercelのEdge NetworkとAWSのレイテンシが最小化される

// lib/db.ts — Serverless対応のコネクション管理
import {"{"} drizzle {"}"} from 'drizzle-orm/node-postgres';
import {"{"} Pool {"}"} from 'pg';

// グローバルシングルトンでコネクションを再利用（Vercel Functions間では再利用不可だが
// 同一warm instance内では再利用される）
const globalForDb = globalThis as unknown as {"{"} pool: Pool | undefined {"}"};

const pool = globalForDb.pool ?? new Pool({"{"}
  host: process.env.AURORA_PROXY_HOST,  // RDS Proxy エンドポイント
  port: 5432,
  database: process.env.AURORA_DB_NAME,
  ssl: {"{"} rejectUnauthorized: true {"}"}, // 必須（機微情報）
  max: 5,  // Serverless Functionあたりのmax接続数を制限
{"}"});

if (process.env.NODE_ENV !== 'production') globalForDb.pool = pool;

export const db = drizzle(pool);

チームにReact経験者が多い？
  ├─ YES → スタックA（Next.js 15）
  └─ NO
      ├─ Svelte経験者またはゼロベースで学習する？
      │   ├─ YES → スタックB（SvelteKit 2）
      │   └─ NO（Vue経験者） → Nuxt 4を検討
      │
      └─ 人材採用コストを最小化したい？
          └─ YES → スタックA（Next.js 15）一択

1. 1

   プロジェクト初期化

   npx create-next-app@latest stress-check --typescript --tailwind --app --src-dir

2. 2

   依存関係インストール

   npm install drizzle-orm pg @aws-sdk/client-rds-data
   npm install -D drizzle-kit @types/pg
   npm install next-auth@beta zod

3. 3

   環境変数設定（.env.local）

   AURORA_PROXY_HOST=your-rds-proxy.proxy-xxx.us-east-1.rds.amazonaws.com
   AURORA_DB_NAME=stress_check
   AURORA_DB_USER=app_user
   AURORA_DB_PASSWORD=...
   AUTH_SECRET=... # openssl rand -hex 32
   AUTH_TRUST_HOST=true

4. 4

   Drizzle スキーマ定義（src/lib/schema.ts）

5. 5

   Auth.js 設定（src/auth.ts）— セッション認証

6. 6

   Middleware でルート保護（src/middleware.ts）

7. 7

   Server Action でフォーム送信処理

8. 8

   Vercel CLI でデプロイ & 環境変数設定

   npx vercel --prod
   npx vercel env add AURORA_PROXY_HOST production

9. 9

   Vercel Secure Compute でVPC接続を確立（Pro機能）

10. 10

    負荷テスト実施（k6 または Artillery）でピーク8,000接続/時を検証

    # k6 負荷テスト例
    # 8000接続/時 = 約2.2 req/s を60分間
    k6 run --vus 50 --duration 60m stress-check-test.js