返回博客列表
•约 1095 字•预计阅读 4 分钟

极速体验：将 Astro 部署至 Cloudflare Pages + R2

#Astro#Cloudflare#技术
极速体验：将 Astro 部署至 Cloudflare Pages + R2

现代化前端部署的新范式

随着 Serverless 和边缘计算的蓬勃发展，传统的服务器托管博客正逐渐被以全球网络为基础的边缘计算架构所取代。今天，我们将探讨如何组合 Astro、Cloudflare Pages 与 Cloudflare R2，来构建我们这个超快速的个人博客。

Cloudflare Pages: 极速边缘托管

Cloudflare Pages 是一个专为前端开发者设计的部署平台。它有以下几个无可比拟的优势：

  • 全球 CDN 分发：部署的代码会被瞬间分发至 Cloudflare 遍布全球的 300 多个数据中心。
  • 自动构建与集成：与 Git 仓库绑定后，每次推送均能自动触发构建，并生成预览链接。
  • 边缘 Workers 函数：通过 Astro 的 Cloudflare 适配器，我们可以在边缘无缝执行动态代码，处理 API 请求。

Astro 的 Hybrid 混合模式

在这个项目中，我们开启了 output: 'hybrid' 模式：

// astro.config.mjs
export default defineConfig({
  adapter: cloudflare(),
  output: 'hybrid',
});
  • 静态路由（默认）：像首页、文章列表页、文章正文等，全部在构建时生成静态 HTML，部署到 CDN 上。用户访问时秒开，且对 SEO 极其友好。
  • 动态路由（声明）：对于需要动态操作 R2 存储桶的 API 接口，我们通过在文件顶部声明 export const prerender = false，将其指定为边缘 Worker 动态运行。

Cloudflare R2 存储与图片分发

传统的博客将图片直接存在 Git 仓库或本地，随着时间推移，Git 库会变得异常臃肿。我们选择将多媒体文件托管在 Cloudflare R2 上：

  1. 零流出费用 (Zero Egress Fees)：与 AWS S3 不同，Cloudflare R2 不收取数据下载流出费用，这对于展示大量高解析度摄影作品的图集来说，能省下巨额开销。
  2. S3 兼容 API：我们可以使用现有的 S3 SDK 或 Cloudflare Bindings 来读取和列出桶内文件。
  3. 安全绑定：在 Astro 的 Worker 中，我们可以直接通过 Astro.locals.runtime.env.R2_BUCKET 与存储桶进行交互，无需暴露任何敏感的 API 密钥。

这种架构不仅带来了无与伦比的加载速度，而且在低流量下几乎是完全免费的，是开发者搭建个人站点的终极方案。