第9章: セキュリティと本番運用 — 多層防御からセルフホスティングまで

// app/actions/update-profile.ts
'use server'

import { z } from 'zod'
import { auth } from '@/lib/auth'
import { db } from '@/lib/db'

// Zodスキーマで入力を厳密に定義
const UpdateProfileSchema = z.object({
  name: z.string().min(1).max(100),
  email: z.string().email(),
  bio: z.string().max(500).optional(),
})

export async function updateProfile(formData: FormData) {
  // 1. 認証チェック
  const session = await auth()
  if (!session?.user?.id) {
    throw new Error('認証が必要です')
  }

  // 2. 入力バリデーション（Zod）
  const parsed = UpdateProfileSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    bio: formData.get('bio'),
  })

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors }
  }

  // 3. 認可チェック（自分自身のプロフィールのみ更新可能）
  const userId = session.user.id

  // 4. データ更新
  await db.user.update({
    where: { id: userId },
    data: parsed.data,
  })

  return { success: true }
}

// クロージャで機密データをキャプチャする例
export default async function Page() {
  // この変数はクロージャとして暗号化される
  const secretConfig = await getSecretConfig()

  async function submitAction() {
    'use server'
    // secretConfigはクライアントに暗号化された状態で渡される
    // サーバー実行時に復号される
    await processWithConfig(secretConfig)
  }

  return <form action={submitAction}>...</form>
}

// lib/dal.ts — Data Access Layer
import { auth } from '@/lib/auth'
import { db } from '@/lib/db'
import { cache } from 'react'

// リクエスト単位でキャッシュされる認証チェック
export const verifySession = cache(async () => {
  const session = await auth()
  if (!session?.user) {
    redirect('/login')
  }
  return { userId: session.user.id, role: session.user.role }
})

// DAL関数: 認可チェック込みのデータ取得
export async function getUserPosts(targetUserId: string) {
  const session = await verifySession()

  // 認可: 自分の投稿のみ、またはadminロール
  if (session.userId !== targetUserId && session.role !== 'admin') {
    throw new Error('権限がありません')
  }

  return db.post.findMany({
    where: { authorId: targetUserId },
    orderBy: { createdAt: 'desc' },
  })
}

// lib/secrets.ts
import 'server-only' // Client Componentからインポートするとビルドエラー

export function getSecretKey() {
  return process.env.SECRET_API_KEY
}

// ↓ Client Componentでインポートすると...
// Error: This module cannot be imported from a Client Component module.

// middleware.ts — NonceベースCSPの実装
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // リクエストごとにランダムなNonceを生成
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')

  const cspHeader = [
    "default-src 'self'",
    "script-src 'self' 'nonce-" + nonce + "' 'strict-dynamic'",
    "style-src 'self' 'nonce-" + nonce + "'",
    "img-src 'self' blob: data:",
    "font-src 'self'",
    "object-src 'none'",
    "base-uri 'self'",
    "form-action 'self'",
    "frame-ancestors 'none'",
    "upgrade-insecure-requests",
  ].join('; ')

  const response = NextResponse.next()
  response.headers.set('Content-Security-Policy', cspHeader)
  response.headers.set('x-nonce', nonce)

  return response
}

# nginx.conf — Next.jsのリバースプロキシ設定例
upstream nextjs {
    server 127.0.0.1:3000;
}

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/ssl/certs/example.com.pem;
    ssl_certificate_key /etc/ssl/private/example.com.key;

    # セキュリティヘッダー
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # レート制限
    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;

    location / {
        proxy_pass http://nextjs;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

# Dockerfile — Next.jsのマルチステージビルド
FROM node:20-alpine AS base

# 依存関係のインストール
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production

# ビルド
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# プロダクション
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT=3000

CMD ["node", "server.js"]

# .env.production — マルチインスタンス環境の暗号化キー設定
# すべてのインスタンスで同一の値を設定すること
NEXT_SERVER_ACTIONS_ENCRYPTION_KEY=your-32-byte-secret-key-here

# セッション管理にも共有シークレットが必要
AUTH_SECRET=your-auth-secret-here

// e2e/profile-update.spec.ts — Playwrightによるe2eテスト
import { test, expect } from '@playwright/test'

test('プロフィール更新が正しく動作する', async ({ page }) => {
  // 認証済みの状態でプロフィールページにアクセス
  await page.goto('/profile')

  // Server Componentでレンダリングされたフォームを確認
  await expect(page.getByRole('heading', { name: 'プロフィール' })).toBeVisible()

  // フォーム入力（Server Actionのテスト）
  await page.getByLabel('名前').fill('テスト太郎')
  await page.getByLabel('自己紹介').fill('こんにちは')
  await page.getByRole('button', { name: '保存' }).click()

  // Server Actionの結果を確認
  await expect(page.getByText('保存しました')).toBeVisible()

  // リロードしてもデータが永続化されていることを確認
  await page.reload()
  await expect(page.getByLabel('名前')).toHaveValue('テスト太郎')
})