上线部署与运维保障

// next.config.ts
const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control', value: 'on' },
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
]
 
const nextConfig = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }]
  },
}

// middleware.ts
export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'unsafe-inline'`,
    `img-src 'self' blob: data: https://*.r2.cloudflarestorage.com`,
    `font-src 'self'`,
    `connect-src 'self' https://*.posthog.com https://*.sentry.io https://*.stripe.com`,
    `frame-src https://js.stripe.com`,
    `object-src 'none'`,
    `base-uri 'self'`,
    `form-action 'self'`,
  ].join('; ')
 
  const headers = new Headers(request.headers)
  headers.set('x-nonce', nonce)
 
  const response = NextResponse.next({ request: { headers } })
  response.headers.set('Content-Security-Policy', csp)
 
  return response
}

// lib/env.ts
import { z } from 'zod'
 
const envSchema = z.object({
  // 数据库
  DATABASE_URL: z.string().url(),
 
  // 认证
  NEXTAUTH_SECRET: z.string().min(32),
  NEXTAUTH_URL: z.string().url(),
 
  // Stripe
  STRIPE_SECRET_KEY: z.string().startsWith('sk_'),
  STRIPE_WEBHOOK_SECRET: z.string().startsWith('whsec_'),
  NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().startsWith('pk_'),
 
  // 邮件
  RESEND_API_KEY: z.string().startsWith('re_'),
 
  // 存储
  S3_ENDPOINT: z.string().url(),
  S3_ACCESS_KEY: z.string(),
  S3_SECRET_KEY: z.string(),
  S3_BUCKET: z.string(),
 
  // 监控
  SENTRY_DSN: z.string().url().optional(),
  NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
 
  // Admin
  SUPER_ADMIN_EMAILS: z.string(),
})
 
// 启动时验证——缺少环境变量立即报错
export const env = envSchema.parse(process.env)

// middleware.ts
export function middleware(request: NextRequest) {
  // 基于 Cookie 的灰度分流
  const bucket = request.cookies.get('ab-bucket')?.value
 
  if (!bucket) {
    // 首次访问，随机分配
    const newBucket = Math.random() < 0.1 ? 'canary' : 'stable'
    const response = NextResponse.next()
    response.cookies.set('ab-bucket', newBucket, { maxAge: 86400 * 30 })
 
    if (newBucket === 'canary') {
      // 重写到金丝雀部署
      return NextResponse.rewrite(new URL(request.url, process.env.CANARY_URL))
    }
    return response
  }
 
  if (bucket === 'canary') {
    return NextResponse.rewrite(new URL(request.url, process.env.CANARY_URL))
  }
 
  return NextResponse.next()
}

// 基于 PostHog Feature Flag（见第 69 章）
const showNewDashboard = await isFeatureEnabled('new-dashboard', tenantId)
 
if (showNewDashboard) {
  return <NewDashboard />
}
return <OldDashboard />

// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs'
 
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 0.1,       // 生产 10% 采样
  profilesSampleRate: 0.1,
  beforeSend(event) {
    // 过滤已知的非关键错误
    if (event.exception?.values?.[0]?.type === 'AbortError') return null
    return event
  },
})

// app/api/health/route.ts
export async function GET() {
  try {
    await db.execute(sql`SELECT 1`)
 
    return Response.json({
      status: 'healthy',
      timestamp: new Date().toISOString(),
      version: process.env.NEXT_PUBLIC_APP_VERSION || 'unknown',
    })
  } catch (error) {
    return Response.json({ status: 'unhealthy', error: String(error) }, { status: 503 })
  }
}

// lib/logger.ts
type LogLevel = 'debug' | 'info' | 'warn' | 'error'
 
interface LogContext {
  userId?: string
  tenantId?: string
  requestId?: string
  [key: string]: any
}
 
function log(level: LogLevel, message: string, context?: LogContext) {
  const entry = {
    level,
    message,
    timestamp: new Date().toISOString(),
    ...context,
  }
 
  // 生产环境输出 JSON（便于日志聚合工具解析）
  if (process.env.NODE_ENV === 'production') {
    console[level === 'error' ? 'error' : 'log'](JSON.stringify(entry))
  } else {
    console[level === 'error' ? 'error' : 'log'](`[${level.toUpperCase()}] ${message}`, context)
  }
}
 
export const logger = {
  debug: (msg: string, ctx?: LogContext) => log('debug', msg, ctx),
  info: (msg: string, ctx?: LogContext) => log('info', msg, ctx),
  warn: (msg: string, ctx?: LogContext) => log('warn', msg, ctx),
  error: (msg: string, ctx?: LogContext) => log('error', msg, ctx),
}

// app/global-error.tsx
'use client'
 
import * as Sentry from '@sentry/nextjs'
import { useEffect } from 'react'
 
export default function GlobalError({
  error, reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    Sentry.captureException(error)
  }, [error])
 
  return (
    <html>
      <body>
        <div className="flex min-h-screen items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-bold">Something went wrong</h2>
            <p className="mt-2 text-muted-foreground">
              We've been notified and are working on a fix.
            </p>
            <button
              onClick={reset}
              className="mt-4 rounded bg-primary px-4 py-2 text-primary-foreground"
            >
              Try Again
            </button>
          </div>
        </div>
      </body>
    </html>
  )
}

// app/not-found.tsx
import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="text-center">
        <h1 className="text-6xl font-bold">404</h1>
        <p className="mt-4 text-lg text-muted-foreground">Page not found</p>
        <Link href="/" className="mt-6 inline-block rounded bg-primary px-6 py-2 text-primary-foreground">
          Go Home
        </Link>
      </div>
    </div>
  )
}

// lib/db/index.ts
import { drizzle } from 'drizzle-orm/neon-http'
import { neon } from '@neondatabase/serverless'
 
// Serverless 环境用 HTTP 连接（无连接池开销）
const sql = neon(process.env.DATABASE_URL!)
export const db = drizzle(sql)

# .github/workflows/deploy.yml
name: Deploy to Production
on:
  push:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm run test
 
  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Database Migrations
        run: npx drizzle-kit migrate
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

// 生产迁移原则
// 1. 只做加法（加列/加表），不做减法
// 2. 新列先 nullable，后续再改为 NOT NULL
// 3. 列重命名分两步：加新列 → 迁移数据 → 删旧列
// 4. 大表加索引用 CONCURRENTLY
 
// drizzle.config.ts
export default {
  schema: './lib/db/schema.ts',
  out: './drizzle',
  driver: 'pg',
  dbCredentials: {
    connectionString: process.env.DATABASE_URL!,
  },
}

// scripts/verify-production.ts
async function verifyProduction() {
  const baseUrl = process.env.PRODUCTION_URL!
  const checks = [
    { name: 'Health Check', url: `${baseUrl}/api/health` },
    { name: 'Homepage', url: baseUrl },
    { name: 'Login Page', url: `${baseUrl}/login` },
    { name: 'Stripe Webhook', url: `${baseUrl}/api/webhooks/stripe` },
  ]
 
  for (const check of checks) {
    try {
      const res = await fetch(check.url, { method: check.name.includes('Webhook') ? 'POST' : 'GET' })
      const status = res.status
      const ok = check.name.includes('Webhook') ? status === 400 : status === 200
      console.log(`${ok ? '✅' : '❌'} ${check.name}: ${status}`)
    } catch (err) {
      console.log(`❌ ${check.name}: ${err}`)
    }
  }
}
 
verifyProduction()

// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    default: 'YourSaaS - Project Management for Teams',
    template: '%s | YourSaaS',
  },
  description: 'The modern project management platform for growing teams.',
  metadataBase: new URL('https://yoursaas.com'),
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: 'YourSaaS',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@yoursaas',
  },
  robots: {
    index: true,
    follow: true,
  },
}

// app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  const staticPages = [
    '', '/pricing', '/features', '/about', '/blog',
    '/terms', '/privacy',
  ].map((path) => ({
    url: `https://yoursaas.com${path}`,
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: path === '' ? 1 : 0.8,
  }))
 
  return staticPages
}

// app/robots.ts
import type { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin', '/api/', '/dashboard'],
      },
    ],
    sitemap: 'https://yoursaas.com/sitemap.xml',
  }
}

// package.json
{
  "scripts": {
    "analyze": "ANALYZE=true next build"
  }
}

// next.config.ts
import withBundleAnalyzer from '@next/bundle-analyzer'
 
const nextConfig = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})({
  // ...其他配置
})

// 静态页面缓存（ISR）
export const revalidate = 3600  // 1 小时
 
// 动态数据缓存
import { unstable_cache } from 'next/cache'
 
export const getCachedPricing = unstable_cache(
  async () => {
    return db.select().from(plans).where(eq(plans.active, true))
  },
  ['pricing-plans'],
  { revalidate: 3600, tags: ['pricing'] }
)
 
// 手动失效
import { revalidateTag } from 'next/cache'
revalidateTag('pricing')