深入理解两个产品的区别，选择最适合的解决方案

      请求 → Workers Runtime → 你的代码处理一切 → 响应
         ↓
    可以返回HTML、JSON、二进制等任何内容
    

      // Workers - 完全控制请求处理
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    
    // 你需要自己处理所有路由
    if (url.pathname === '/') {
      return new Response('<h1>Home</h1>', {
        headers: { 'Content-Type': 'text/html' }
      });
    }
    
    if (url.pathname === '/api/data') {
      return Response.json({ data: 'value' });
    }
    
    if (url.pathname.startsWith('/static/')) {
      // 需要自己处理静态文件
      return fetch(`https://cdn.example.com${url.pathname}`);
    }
    
    return new Response('Not Found', { status: 404 });
  }
}
    

      请求 → Pages 路由系统
         ↓
    静态文件? → 直接返回文件
         ↓
    /api/* 或 Functions? → Pages Functions 处理
         ↓
    都不是? → 返回 404 或 index.html（SPA）
    

      // Pages Functions - functions/api/hello.js
// 自动处理 /api/hello 路由
export async function onRequest(context) {
  return Response.json({ message: 'Hello' });
}

// 静态文件自动托管，无需编写代码
// public/
//   ├── index.html      → /
//   ├── about.html      → /about
//   ├── css/style.css   → /css/style.css
//   └── js/app.js       → /js/app.js
    

      // 1. Cron Triggers - 定时任务
export default {
  async scheduled(event, env, ctx) {
    // 每小时执行一次
    await cleanupOldData(env);
  },
  
  async fetch(request, env, ctx) {
    // 常规 HTTP 处理
  }
}

// wrangler.toml
// [triggers]
// crons = ["0 * * * *"]

// 2. Queue Consumer - 消息队列
export default {
  async queue(batch, env, ctx) {
    for (const message of batch.messages) {
      await processMessage(message);
      message.ack();
    }
  }
}

// 3. TCP Sockets (beta)
export default {
  async fetch(request, env, ctx) {
    const socket = new Socket({
      address: 'tcp.example.com',
      port: 8080
    });
    
    await socket.connect();
    await socket.write('Hello TCP');
    const response = await socket.read();
    
    return new Response(response);
  }
}

// 4. 完全自定义路由
export default {
  async fetch(request, env, ctx) {
    const router = new Router();
    
    router.get('/users/:id', async ({ params }) => {
      return Response.json({ userId: params.id });
    });
    
    router.post('/api/*', async (request) => {
      // 处理所有 API 请求
    });
    
    return router.handle(request);
  }
}
    

      // 1. 文件系统路由
// functions/api/users/[id].js
export function onRequestGet({ params }) {
  return Response.json({ userId: params.id });
}

// 2. 中间件链
// functions/_middleware.js
export async function onRequest(context) {
  const { request, next } = context;
  
  // 认证检查
  if (!request.headers.get('Authorization')) {
    return new Response('Unauthorized', { status: 401 });
  }
  
  // 继续处理
  const response = await next();
  
  // 添加响应头
  response.headers.set('X-Custom', 'value');
  
  return response;
}

// 3. 静态文件配置
// _redirects
/old-page /new-page 301
/api/* https://api.backend.com/:splat 200

// _headers
/static/*
  Cache-Control: public, max-age=31536000
  
/*.js
  Content-Type: application/javascript
  X-Content-Type-Options: nosniff

// 4. 框架预设
// 自动识别并构建：
// - React (Create React App, Next.js)
// - Vue (Vue CLI, Nuxt)
// - Angular
// - Svelte (SvelteKit)
// - Astro, Gatsby, Hugo, Jekyll, 等等
    

      // RESTful API 服务
export default {
  async fetch(request, env) {
    const api = new API(env);
    
    return api
      .route('GET', '/users', getAllUsers)
      .route('POST', '/users', createUser)
      .route('GET', '/users/:id', getUser)
      .route('PUT', '/users/:id', updateUser)
      .route('DELETE', '/users/:id', deleteUser)
      .handle(request);
  }
}
    

      // 认证网关
export default {
  async fetch(request, env) {
    // 验证 JWT
    const token = request.headers.get('Authorization');
    const valid = await verifyJWT(token, env.JWT_SECRET);
    
    if (!valid) {
      return new Response('Unauthorized', { status: 401 });
    }
    
    // 代理到后端
    return fetch('https://backend.internal' + request.url, {
      headers: {
        ...request.headers,
        'X-User-Id': getUserId(token)
      }
    });
  }
}
    

      // WebSocket 服务器
export default {
  async fetch(request, env) {
    if (request.headers.get('Upgrade') === 'websocket') {
      const pair = new WebSocketPair();
      const [client, server] = Object.values(pair);
      
      handleWebSocket(server, env);
      
      return new Response(null, {
        status: 101,
        webSocket: client
      });
    }
    
    return new Response('WebSocket server');
  }
}
    

      // 数据同步服务
export default {
  async scheduled(event, env) {
    // 每天凌晨 2 点执行
    const data = await fetchExternalData();
    await env.DB.prepare('INSERT INTO ...').run();
    
    // 发送报告
    await sendEmail(env);
  },
  
  async queue(batch, env) {
    // 处理异步任务
    for (const message of batch.messages) {
      await processJob(message.body);
      message.ack();
    }
  }
}
    

      my-blog/
├── public/
│   ├── index.html
│   ├── blog/
│   │   ├── post1.html
│   │   └── post2.html
│   └── css/style.css
└── functions/
    └── api/
        ├── posts.js       # API: 获取文章列表
        └── comments.js    # API: 评论功能
    

      // React 应用 + API
// 自动构建和部署

// functions/api/auth.js
export async function onRequestPost({ request, env }) {
  const { username, password } = await request.json();
  const user = await authenticate(username, password, env);
  
  if (user) {
    const token = await generateJWT(user, env);
    return Response.json({ token });
  }
  
  return new Response('Invalid credentials', { status: 401 });
}
    

      docs-site/
├── public/
│   ├── index.html
│   ├── docs/
│   │   ├── getting-started.html
│   │   ├── api-reference.html
│   │   └── guides/
│   └── search.json
├── functions/
│   └── api/
│       └── search.js  # 搜索 API
└── _redirects         # 重定向规则
    /v1/* /docs/v1/:splat 301
    /latest/* /docs/v2/:splat 302
    

      <!-- 营销网站with表单处理 -->
<!-- public/index.html -->
<form action="/api/subscribe" method="POST">
  <input name="email" type="email" required>
  <button>订阅</button>
</form>

<!-- functions/api/subscribe.js -->
export async function onRequestPost({ request, env }) {
  const formData = await request.formData();
  const email = formData.get('email');
  
  // 保存到数据库
  await env.DB.prepare('INSERT INTO subscribers...').run();
  
  // 发送欢迎邮件
  await sendWelcomeEmail(email, env);
  
  return Response.redirect('/thank-you');
}
    

      免费额度：
- 每天 100,000 请求
- 每月 1000 万请求

付费（$5/月起）：
- 前 1000 万请求包含在内
- 超出部分 $0.50/百万请求
- CPU 时间额外计费

示例：
- 月 5000 万请求
- 成本：$5 + (40 * $0.50) = $25
    

      免费额度：
- 无限请求（静态文件）
- 每月 500 次构建
- 1 个并发构建

付费（$20/月起）：
- 无限请求
- 每月 5000 次构建
- 5 个并发构建
- Pages Functions 按 Workers 计费

示例：
- 静态网站 + 少量 API
- 成本：$0（免费层足够）
    

      graph TD
    A[开始] --> B{需要静态文件托管?}
    
    B -->|是| C{API 需求多吗?}
    B -->|否| D{是纯 API 服务?}
    
    C -->|多| E{需要构建系统?}
    C -->|少| F[Pages ✅]
    
    D -->|是| G[Workers ✅]
    D -->|否| H{需要定时任务?}
    
    E -->|是| I[Pages ✅]
    E -->|否| J{团队熟悉度?}
    
    H -->|是| K[Workers ✅]
    H -->|否| L{需要 WebSocket?}
    
    J -->|前端团队| M[Pages ✅]
    J -->|后端团队| N[Workers ✅]
    
    L -->|是| O[Workers ✅]
    L -->|否| P[两者皆可]
    

      架构：
┌─────────────┐     ┌──────────────┐
│   Pages     │────▶│   Workers    │
│  (前端SPA)  │     │  (API后端)   │
└─────────────┘     └──────────────┘
       ↓                    ↓
   静态文件CDN          业务逻辑处理
    

      // Pages - 前端应用
// public/app.js
const API_URL = 'https://api.example.workers.dev';

async function fetchData() {
  const response = await fetch(`${API_URL}/data`);
  return response.json();
}

// Workers - API 后端
export default {
  async fetch(request, env) {
    // 设置 CORS
    const headers = {
      'Access-Control-Allow-Origin': 'https://app.example.pages.dev',
      'Content-Type': 'application/json'
    };
    
    // 处理 API 请求
    return Response.json({ data: 'value' }, { headers });
  }
}
    

      // Workers 作为主入口，代理到 Pages
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    
    // API 请求自己处理
    if (url.pathname.startsWith('/api/')) {
      return handleAPI(request, env);
    }
    
    // 静态内容代理到 Pages
    return fetch(`https://content.pages.dev${url.pathname}`);
  }
}
    

      主站（Pages）: example.com
├── 博客（Pages）: blog.example.com
├── 文档（Pages）: docs.example.com
├── API（Workers）: api.example.com
└── 管理后台（Pages）: admin.example.com
    

      ecommerce-site/
├── public/
│   ├── index.html         # 首页
│   ├── products/          # 产品页面
│   └── assets/            # 静态资源
├── functions/
│   ├── api/
│   │   ├── auth.js        # 认证
│   │   ├── cart.js        # 购物车
│   │   ├── orders.js      # 订单
│   │   └── payment.js     # 支付
│   └── _middleware.js     # 认证中间件
└── wrangler.toml
    

      // Workers 实现
export class CollaborationRoom {
  constructor(state, env) {
    this.state = state;
    this.sessions = [];
  }
  
  async fetch(request) {
    // WebSocket 处理
    const pair = new WebSocketPair();
    this.handleSession(pair[1]);
    
    return new Response(null, {
      status: 101,
      webSocket: pair[0]
    });
  }
  
  handleSession(webSocket) {
    // 实时协作逻辑
    webSocket.accept();
    this.sessions.push(webSocket);
    
    webSocket.addEventListener('message', event => {
      // 广播给其他用户
      this.broadcast(event.data, webSocket);
    });
  }
}
    

      corporate-site/
├── public/
│   ├── index.html
│   ├── about/
│   ├── products/
│   ├── blog/
│   └── locales/         # 多语言
├── functions/
│   └── api/
│       └── contact.js    # 表单处理
├── _redirects            # URL 重定向
└── _headers              # 缓存策略
    

      export default {
  async fetch(request, env, ctx) {
    // 限流检查
    const rateLimitOk = await checkRateLimit(request, env);
    if (!rateLimitOk) {
      return new Response('Too Many Requests', { status: 429 });
    }
    
    // 认证
    const auth = await authenticate(request, env);
    if (!auth.valid) {
      return new Response('Unauthorized', { status: 401 });
    }
    
    // 路由到后端服务
    const backend = selectBackend(request.url);
    const response = await fetch(backend, {
      headers: {
        ...request.headers,
        'X-User-Id': auth.userId
      }
    });
    
    // 记录日志
    ctx.waitUntil(logRequest(request, response, env));
    
    return response;
  }
}
    

      // Workers 原代码
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    
    if (url.pathname === '/') {
      return new Response(HTML_CONTENT, {
        headers: { 'Content-Type': 'text/html' }
      });
    }
    
    if (url.pathname === '/api/data') {
      return Response.json(await getData(env));
    }
    
    return new Response('Not Found', { status: 404 });
  }
}

// 迁移到 Pages
// 1. 将 HTML 放到 public/index.html
// 2. 创建 functions/api/data.js
export async function onRequest({ env }) {
  return Response.json(await getData(env));
}
    

      // Pages Functions
// functions/api/users/[id].js
export async function onRequestGet({ params, env }) {
  const user = await getUser(params.id, env);
  return Response.json(user);
}

// 迁移到 Workers
import { Router } from 'itty-router';

const router = Router();

router.get('/api/users/:id', async ({ params }, env) => {
  const user = await getUser(params.id, env);
  return Response.json(user);
});

export default {
  async fetch(request, env) {
    return router.handle(request, env);
  }
}
    

      npm create cloudflare@latest my-worker
# 选择 "Hello World" Worker
cd my-worker
npm run dev
npm run deploy
    

      npm create cloudflare@latest my-site
# 选择框架或 "None"
cd my-site
npm run dev
npm run build
npm run deploy

# 或通过 Git
# 1. 推送到 GitHub
# 2. 在 Cloudflare Dashboard 连接仓库
# 3. 自动部署
    

      name = "my-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

[env.production]
vars = { API_KEY = "secret" }
kv_namespaces = [
  { binding = "KV", id = "xxx" }
]