Vercel 部署 Astro 与 SvelteKit 实战：内容站点与交互应用上云指南

# 使用官方模板
npm create astro@latest my-astro-site
# 选择：
#   - Template: 推荐 "Astro Basics" 或 "Blog"
#   - TypeScript: 是
#   - Install dependencies: 是
#   - Initialize git: 是

cd my-astro-site
npm install

# Astro 3.0+ 推荐安装
npm install -D @astrojs/vercel

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'static', // 或 'server' / 'hybrid'
  adapter: vercel(),
});

// astro.config.mjs
export default defineConfig({
  output: 'static',
  adapter: vercel(),
});

// astro.config.mjs
export default defineConfig({
  output: 'server',
  adapter: vercel({
    edgeMiddleware: false, // SSR 用 Node runtime
    functionPerRoute: true, // 每个路由一个 Function（推荐生产环境）
  }),
});

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',
  adapter: vercel(),
});

npm install -D @astrojs/mdx

// astro.config.mjs
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { posts };

git push origin main

# 首页（应极速加载，纯 HTML）
curl -w "@curl-format.txt" https://my-astro-site.vercel.app/

# 博客文章页
curl https://my-astro-site.vercel.app/blog/hello-world

# 检查 TTFB
curl -s -o /dev/null -w "%{time_starttransfer}" https://my-astro-site.vercel.app/
# 期望值：< 200ms（静态页面 Cloudflare 加速后）

# 创建 SvelteKit 项目
npm create svelte@latest my-sveltekit-app
# 选择：
#   - Skeleton project
#   - TypeScript: Yes
#   - ESLint + Prettier: Yes

cd my-sveltekit-app
npm install

# 安装 Vercel 适配器
npm install -D @sveltejs/adapter-vercel

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      // Edge Functions 模式
      runtime: 'edge',
      // 或 Node.js 模式：runtime: 'nodejs20.x'
    }),
  },
};

export default config;

<!-- src/routes/+page.svelte -->
<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<h1>{data.title}</h1>
<p>{data.description}</p>

// src/routes/+page.server.ts（服务端数据获取）
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  // 这里可以查数据库或调用 API
  return {
    title: 'Welcome to SvelteKit',
    description: 'Deployed on Vercel',
  };
};

// src/routes/api/users/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async () => {
  // const users = await db.user.findMany();
  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  return json(users);
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  // const newUser = await db.user.create({ data: body });
  return json({ created: true }, { status: 201 });
};

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  // 认证检查
  const token = event.cookies.get('session');
  if (!token && event.url.pathname.startsWith('/dashboard')) {
    return new Response('Unauthorized', { status: 401 });
  }

  const response = await resolve(event);

  // 添加安全头
  response.headers.set('X-Frame-Options', 'DENY');

  return response;
};

# .env
DATABASE_URL="postgresql://user:pass@host/db"
PUBLIC_API_BASE="https://api.example.com"
SECRET_KEY="your-secret"

// SvelteKit 环境变量规则：
// - PUBLIC_ 前缀：客户端 + 服务端都可访问
// - 无前缀：仅服务端
import { env } from '$env/dynamic/private';       // 服务端动态
import { PUBLIC_API_BASE } from '$env/static/public'; // 客户端静态

npm install @prisma/client @prisma/extension-accelerate

// src/lib/db.ts（Edge-compatible）
import { PrismaClient } from '@prisma/client';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient().$extends(withAccelerate());

export { prisma };

// ❌ Edge 下不可用
import fs from 'fs';
fs.readFileSync('./data.json');

// ✅ 改用 fetch 从外部加载
const data = await fetch('https://cdn.example.com/data.json').then(r => r.json());

git push origin main

# 测试首页 SSR
curl https://my-sveltekit-app.vercel.app

# 测试 API
curl https://my-sveltekit-app.vercel.app/api/users

# 测试 POST
curl -X POST https://my-sveltekit-app.vercel.app/api/users \
  -H "Content-Type: application/json" \
  -d '{"name":"Alice"}'