Cloudflare Pages 不仅是一个静态网站托管平台，结合 Workers 后更是一个强大的全栈 Serverless 平台。本文将带你了解如何充分利用 Cloudflare 的生态系统。

为什么选择 Cloudflare？

• 免费额度慷慨 - 每月 500 次构建，无限请求和带宽
• 全球 CDN - 300+ 边缘节点，确保全球快速访问
• 自动 SSL - 免费提供 SSL 证书
• Git 集成 - 与 GitHub/GitLab 无缝集成
• 零配置部署 - 推送代码即自动部署

部署静态网站

将静态网站部署到 Cloudflare Pages 非常简单：

第一步：准备工作

1. 注册 Cloudflare 账号
2. 将代码推送到 GitHub

第二步：创建项目

1. 登录 Cloudflare Dashboard
2. 进入 Pages 菜单
3. 点击 "Create a project"
4. 选择 "Connect to Git"

第三步：配置构建

# 对于纯静态网站
Build command: (留空)
Build output directory: /

# 对于需要构建的项目（如 Vite）
Build command: npm run build
Build output directory: dist

使用 Workers 添加动态功能

Cloudflare Workers 让你可以在边缘运行 JavaScript 代码。

// functions/api/hello.js
export async function onRequest(context) {
    return new Response(
        JSON.stringify({ message: 'Hello from Workers!' }),
        {
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }
        }
    );
}

Workers 运行在 Cloudflare 的边缘网络上，离用户最近的节点，因此响应延迟极低。

实用场景

1. API 代理

// functions/api/proxy.js
export async function onRequest(context) {
    const url = new URL(context.request.url);
    const target = url.searchParams.get('url');
    
    const response = await fetch(target);
    return new Response(response.body, {
        headers: { 'Content-Type': 'application/json' }
    });
}

2. 访问统计

// functions/api/stats.js
export async function onRequest(context) {
    const { env } = context;
    
    // 使用 KV 存储统计数据
    const count = parseInt(await env.BLOG_KV.get('visits') || '0');
    await env.BLOG_KV.put('visits', (count + 1).toString());
    
    return new Response(JSON.stringify({ visits: count + 1 }));
}

3. 图片处理

// functions/api/image.js
export async function onRequest(context) {
    const { searchParams } = new URL(context.request.url);
    const imageUrl = searchParams.get('url');
    
    // 使用 Cloudflare Image Resizing
    const resizedUrl = `https://images.weserv.nl/?url=${imageUrl}&w=800&h=600&fit=cover`;
    
    return Response.redirect(resizedUrl, 302);
}

性能优化

Cloudflare 提供了多种性能优化选项：

• Auto Minify - 自动压缩 HTML/CSS/JS
• Brotli Compression - 更高效的压缩算法
• HTTP/3 - 最新的网络协议
• Early Hints - 提前加载关键资源

安全特性

Cloudflare 提供全面的安全保护：

• DDoS Protection - 自动防御 DDoS 攻击
• WAF - Web 应用防火墙
• Rate Limiting - 请求频率限制
• Bot Management - 机器人管理

总结

Cloudflare Pages + Workers 是一个强大的组合，让开发者可以免费构建和部署全栈应用。无论是简单的静态博客，还是复杂的 Web 应用，Cloudflare 都能提供出色的性能和可靠性。