📄 Cloudflare Pages

Cloudflare Pages 是一个全栈应用部署平台，能够在 Cloudflare 全球网络上即时部署静态网站和动态应用，无需管理服务器。

产品简介

Cloudflare Pages 提供简单、快速的方式来部署现代 Web 应用。通过 Git 集成或直接上传，你的网站将自动部署到全球 330+ 个边缘节点。

✅ Git 集成

连接 GitHub/GitLab，每次提交自动部署

✅ Pages Functions

运行服务端代码，添加动态功能

✅ 即时回滚

一键回滚到任何历史版本

✅ 免费 SSL

自动配置 HTTPS 证书

核心功能

1. 静态网站托管

支持所有主流前端框架：

  • React / Next.js
  • Vue / Nuxt
  • Svelte / SvelteKit
  • Astro（就像本站！）
  • 原生 HTML/CSS/JS

2. Pages Functions（边缘函数）

在 Pages 项目中添加服务端逻辑，无需额外配置 Workers。

3. 预览部署

每个分支和 Pull Request 自动生成预览 URL，方便团队协作。

快速开始

方法一：通过 Wrangler CLI 部署

1. 安装 Wrangler

npm install -g wrangler

2. 登录 Cloudflare

wrangler login

3. 创建新项目

# 使用 C3 创建新项目
npm create cloudflare@latest my-pages-app

# 选择框架（例如：Astro、React、Vue）
# 然后按提示完成设置

4. 部署到 Pages

# 构建项目
npm run build

# 部署到 Cloudflare Pages
wrangler pages deploy dist

方法二：通过 Git 集成（推荐）

  1. 登录 Cloudflare Dashboard
  2. 进入 "Workers & Pages" → "Create application" → "Pages"
  3. 连接你的 Git 仓库（GitHub/GitLab）
  4. 配置构建设置：
    • 构建命令：npm run build
    • 构建输出目录：dist 或 build
  5. 点击 "Save and Deploy"

Pages Functions 示例

创建 API 端点

在项目根目录创建 functions 文件夹，文件路径即为 API 路由：

functions/api/hello.js
// functions/api/hello.js
export async function onRequest(context) {
  return new Response(JSON.stringify({
    message: 'Hello from Pages Functions!',
    timestamp: new Date().toISOString()
  }), {
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

部署后访问：https://your-site.pages.dev/api/hello

动态路由

functions/api/users/[id].js
// functions/api/users/[id].js
export async function onRequest(context) {
  const userId = context.params.id;

  return new Response(JSON.stringify({
    userId: userId,
    name: `User ${userId}`
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

访问环境变量和 KV

functions/api/data.js
// functions/api/data.js
export async function onRequest(context) {
  // 访问环境变量
  const apiKey = context.env.API_KEY;

  // 访问 KV 存储
  const value = await context.env.MY_KV.get('key');

  return new Response(JSON.stringify({ value }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

常用 CLI 命令

Wrangler Pages 命令
# 部署静态资源
wrangler pages deploy {build-output-directory}

# 指定项目名称
wrangler pages deploy dist --project-name=my-site

# 指定分支（默认为 production）
wrangler pages deploy dist --branch=main

# 查看所有 Pages 项目
wrangler pages project list

# 创建新 Pages 项目
wrangler pages project create my-project

# 删除 Pages 项目
wrangler pages project delete my-project

# 查看部署历史
wrangler pages deployment list

# 本地开发（模拟 Pages 环境）
wrangler pages dev dist

配置自定义域名

  1. 在 Dashboard 中打开你的 Pages 项目
  2. 进入 "Custom domains"
  3. 点击 "Set up a custom domain"
  4. 输入你的域名（例如：www.example.com）
  5. 按照提示添加 CNAME 记录到你的 DNS

环境变量配置

通过 Dashboard 配置

在 Pages 项目设置中 → "Settings" → "Environment variables"

通过 wrangler.toml 配置

wrangler.toml
name = "my-pages-app"

[env.production.vars]
API_ENDPOINT = "https://api.example.com"
ENABLE_ANALYTICS = "true"

[env.preview.vars]
API_ENDPOINT = "https://staging-api.example.com"
ENABLE_ANALYTICS = "false"

与其他服务集成

连接 D1 数据库

// functions/api/posts.js
export async function onRequest(context) {
  const { results } = await context.env.DB.prepare(
    'SELECT * FROM posts ORDER BY created_at DESC LIMIT 10'
  ).all();

  return Response.json(results);
}

连接 R2 存储

// functions/api/upload.js
export async function onRequestPost(context) {
  const formData = await context.request.formData();
  const file = formData.get('file');

  // 上传到 R2
  await context.env.BUCKET.put(file.name, file.stream());

  return Response.json({ success: true });
}

性能优化技巧

  • 启用资源缓存：配置 _headers 文件设置缓存策略
  • 图片优化：使用 Cloudflare Images 自动优化图片
  • 代码分割：使用现代打包工具进行代码分割
  • 预渲染：对于动态内容，考虑使用 SSG（静态生成）

限制与定价

项目 免费计划 付费计划
构建次数 500 次/月 5,000 次/月起
带宽 无限制 无限制
请求数 无限制 无限制
项目数量 100 个 无限制

相关资源