白嫖服务器-Cloudflare Workers 与 Pages

前言

对于 Cloudflare 相信很多人都很熟悉， 比如笔者的网站就是白嫖 Cloudflare(CF) 的 CDN 与 SSL， 使用他的 SSL 有一个好处就是 SSL 证书会自动续签， 免去 3 个月操作一次的烦恼。

同时笔者认为他的服务是比其他免费的会稳定。如果 Cloudflare 有问题，很多知名网站也会有问题，比如上个月 11 月 18 日，Cloudflare 出现全球性网络故障，不清楚的可以去搜一下。

因为本文包含了部分代码与命令，笔者尽可能把输出结果和结果截图放出来，对于部分非专业人员阅读可能还是会有困难，所以笔者建议选择性阅读，搞清楚 Workers 与 Pages 分别有什么作用即可。

介绍

在当今的 Web 开发领域，“无服务器”与“边缘计算”已从流行概念变为强大的工程实践。Cloudflare 作为该领域的核心推动者，其提供的 Cloudflare Workers 和 Cloudflare Pages，使开发者能以极低成本，将应用部署至全球网络边缘。

传送门：https://developers.cloudflare.com/

为什么选择 Cloudflare？

在深入了解具体工具前，我们需先理解其背后的核心优势：

• • 全球边缘网络：代码运行在 Cloudflare 遍布全球 300 多个城市的数据中心，确保用户无论身处何地，请求都能由最近的节点处理，实现超低延迟。
• • 无服务器架构：无需管理服务器、配置系统或扩容。你只需专注于业务逻辑代码。
• • 颠覆性的免费额度：对于个人项目、初创公司或原型开发，其免费套餐（每日 10 万次 Workers 请求、Pages 无限带宽）极具吸引力。
• • 极速启动：基于 V8 引擎的 Isolates 技术，消除了传统 Serverless 的“冷启动”延迟，实现毫秒级响应。

Workers & Pages & Functions 之间的关系

1. Cloudflare Workers：运行在边缘的 JavaScript

它是什么？
Workers 是一个无服务器函数即服务（FaaS）平台。你可以将其理解为一段 JavaScript（或 Wasm）代码，能够复制并瞬间运行在全球网络的每一个节点上。

关键特性与技术：

• • 基于 V8 Isolates：并非虚拟机或容器，而是更轻量的执行上下文。这带来了近乎零的冷启动时间。
• • 事件驱动模型：代码响应 HTTP 请求、定时任务（Cron Triggers）等事件。
• • 标准 Web API：支持 fetch、Web Crypto、WebSocket 等熟悉的 API，学习曲线平缓。

典型应用场景：

• • 构建轻量级 API 或 微服务
• • 实现 A/B 测试、路由重写、请求/响应头修改
• • 作为 反向代理 或 网关，聚合多个后端服务
• • 编写 Discord/Telegram 机器人 的后端逻辑

2. Cloudflare Pages：为现代 Web 而生的托管平台

它是什么？
Pages 是一个针对 JAMstack 和现代前端框架优化的静态网站托管与自动化部署平台。它深度集成 Git，提供开箱即用的 CI/CD。

关键特性：

• • Git 优先的自动化：连接 GitHub/GitLab 仓库后，每次推送都会自动触发构建和部署。
• • 无限带宽与自定义域名：免费套餐即提供，非常适合博客、文档和产品官网。
• • 预览部署：每次 Pull Request 都会生成一个独立的预览 URL，便于团队协作审查。
• • Pages Functions (全栈能力)：这是 Pages 的“杀手锏”。通过在项目 /functions 目录下添加 JavaScript 文件，你可以轻松创建后端 API，将静态站点升级为动态全栈应用。

典型应用场景：

• • 托管 React、Vue、Svelte、Next.js（静态导出）等框架构建的前端应用
• • 部署 Hugo、Jekyll、Hexo 等生成的静态博客
• • 构建带有 联系表单、用户认证、动态内容 的全栈 Web 应用

3. 它们的关系

• • Workers = 纯后端逻辑（计算）。
• • Pages = 前端页面（托管）。
• • Pages + Functions = 前端 + 后端（全栈）。

实战入门：从零构建你的第一个应用

我们将通过一个完整的示例，展示如何用 Pages 和 Functions 构建一个兼具前端与后端 API 的应用。

准备工作

1. 1. 拥有一个 Cloudflare 账号。
2. 2. 安装 Node.js (LTS 版本) 和 npm。
3. 3. 安装 Wrangler CLI (Cloudflare 官方命令行工具)：

   npm install -g wrangler

4. 4. 登录 Wrangler，它将打开浏览器完成授权：

   wrangler login

示例一：项目创建与设置（纯Workers项目）

1. 初始化项目
在终端中运行以下命令创建一个新项目：

wrangler init my-first-worker

• • 选择 "Hello World" 模板。
• • 您想使用哪个模板？ （选择 Worker only）。
• • 您想使用哪种语言？ （选择 JavaScript）。
• • 您想使用 Git 作为版本控制器？ （选择 Yes）。
• • 您想部署您的应用？ （选择 No）。

2. 编写代码
进入项目目录，打开 src/index.js。你会看到类似下面的代码：

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World from Cloudflare Workers!');
  },
};

让我们改得更有趣一点，编写一个返回 JSON 数据并根据用户位置打招呼的 API：

export default {
  async fetch(request, env, ctx) {
    // 获取用户的国家代码（Cloudflare 自动注入）
    const country = request.cf?.country || 'Unknown';
    
    const data = {
      message: `你好！看来你来自 ${country}`,
      timestamp: new Date().toISOString(),
      method: request.method
    };

    // 返回 JSON 响应
    return new Response(JSON.stringify(data), {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
      },
    });
  },
};

3. 本地测试
在部署之前，先在本地模拟环境运行：

wrangler dev

运行成功会输出：

nukix@nukixdeMacBook-Pro my-first-worker % wrangler dev

Cloudflare collects anonymous telemetry about your usage of Wrangler. Learn more at https://github.com/cloudflare/workers-sdk/tree/main/packages/wrangler/telemetry.md

 ⛅️ wrangler 4.53.0
───────────────────
╭──────────────────────────────────────────────────────────────────────╮
│  [b] open a browser [d] open devtools [c] clear console [x] to exit  │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://localhost:8787

按下键盘上的 b 打开浏览器，你应该能看到返回的 JSON 数据。

4. 部署上线

wrangler deploy

几秒钟后，控制台会输出一个 *.workers.dev 的网址。打开这个网页就是已经部署的接口。

示例二：项目创建与设置（全栈应用）

我们将创建一个使用 Vite 构建的 React 前端，并为其添加一个后端 API。

1. 创建前端项目

# 使用 Vite 快速创建一个 React 项目
npm create vite@latest my-global-app -- --template react
cd my-global-app
npm install

运行成功会输出：

> my-global-app@0.0.0 dev
> vite

You are using Node.js 20.18.0. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version.

  VITE v7.2.7  ready in 388 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

打开这个网页可以看到：

2. 添加 Pages Functions (后端API)
Cloudflare Pages 约定：/functions 目录下的文件会自动映射为 API 路由。

• • 在项目根目录创建文件夹：functions。
• • 在 functions 内创建子文件夹 api。
• • 在 api 文件夹内创建文件 greeting.js。

编辑 functions/api/greeting.js：

// 文件: /functions/api/greeting.js
// 此端点将响应 `/api/greeting` 的请求

export async function onRequest(context) {
  // `context` 包含请求对象、环境变量等
  const { request } = context;

  // 从 Cloudflare 获取访问者的大致地理位置信息（如城市）
  const city = request.cf?.city || "某地";
  const country = request.cf?.country || "全球";

  // 构建响应数据
  const data = {
    message: `你好！欢迎来自 ${city}, ${country} 的朋友！`,
    servedBy: "Cloudflare Edge Network",
    timestamp: new Date().toISOString(),
    yourIP: request.headers.get('cf-connecting-ip')
  };

  // 返回 JSON 响应
  return new Response(
    JSON.stringify(data, null, 2), // 美化 JSON 输出
    {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*' // 仅在示例中允许 CORS，生产环境应限制
      },
    }
  );
}

3. 修改前端以调用 API
编辑 src/App.jsx：

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [greeting, setGreeting] = useState('正在加载问候...');
  const [info, setInfo] = useState(null);

  useEffect(() => {
    // 调用我们刚创建的 Pages Function
    fetch('/api/greeting')
      .then(response => response.json())
      .then(data => {
        setGreeting(data.message);
        setInfo(data);
      })
      .catch(err => {
        console.error('API 调用失败:', err);
        setGreeting('抱歉，暂时无法获取问候信息。');
      });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h1>? 我的全球边缘应用</h1>
        <p>前端托管于 Cloudflare Pages，API 运行于 Cloudflare Workers。</p>
        <div className="card">
          <h2>{greeting}</h2>
          {info && (
            <pre className="api-response">
              {JSON.stringify(info, null, 2)}
            </pre>
          )}
        </div>
        <p className="explain">
          尝试从不同地区访问此页面，问候语中的地理位置信息会动态变化，展示边缘计算的威力。
        </p>
      </header>
    </div>
  );
}

export default App;

4. 本地预览与测试
在部署前，使用 Wrangler 在本地完整模拟生产环境：

# 1. 构建前端静态文件
npm run build

# 2. 在本地启动 Pages 开发服务器（包含 Functions）
npx wrangler pages dev ./dist

运行成功会输出：

nukix@nukixdeMacBook-Pro my-global-app % npx wrangler pages dev ./dist 

 ⛅️ wrangler 4.53.0
───────────────────
▲ [WARNING] No compatibility_date was specified. Using today's date: 2025-12-08.

  ❯❯ Add one to your Wrangler configuration file: compatibility_date =
  "2025-12-08", or
  ❯❯ Pass it in your terminal: wrangler pages dev [<DIRECTORY>]
  --compatibility-date=2025-12-08

  See https://developers.cloudflare.com/workers/platform/compatibility-dates/
  for more information.


✨ Compiled Worker successfully
╭──────────────────────────────────────────────────────────────────────╮
│  [b] open a browser [d] open devtools [c] clear console [x] to exit  │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://localhost:8788

打开终端输出的本地地址（通常是 http://localhost:8788），你应该能看到页面并成功获取到包含你地理位置信息的 API 数据。

打开这个网页可以看到：

部署上线

这里有两种方式部署：Git 集成部署（推荐）和 CLI 直接上传。

方法 A：Git 集成部署（推荐，支持自动更新）

1. 1. 将代码推送到 GitHub：

   git init
   git add .
   git commit -m "初始提交：我的第一个 Cloudflare Pages 全栈应用"
   # 在 GitHub 创建新仓库，并按指示链接并推送
   git remote add origin <你的仓库URL>
   git branch -M main
   git push -u origin main

2. 2. 在 Cloudflare Dashboard 中连接并部署：
• • 登录 Cloudflare Dashboard。
• • 侧边栏选择 “Workers & Pages（Workers 和 Pages）”。
• • 点击 “Create application（创建应用程序）” > “Looking to deploy Pages? Get started” > “Connect to Git（导入现有 Git 存储库）”。
• • 授权并选择你刚创建的仓库。
• • 配置构建设置：
• • Framework preset（框架预设）：选择 React(Vite)。
• • Build command（构建命令）：npm run build。
• • Build output directory（构建输出目录）：dist。
• • 点击 “Save and Deploy（保存并部署）”。

部署完成后，你将获得一个 https://<你的项目名>.pages.dev 的永久链接。

这个入口可能有点难找，我在这标注了：

方法 B：CLI 直接部署

如果你不想用 Git，可以直接在命令行上传 dist 文件夹：

npm run build
npx wrangler pages deploy dist --project-name my-global-app

如何选择：Workers 还是 Pages？

简洁建议：

• • 要做一个网站（带或不带后端）？ → 选 Pages。
• • 要做一个纯 API 服务 或 边缘逻辑层？ → 选 Workers。

扩展生态：为应用添加数据持久化

Cloudflare 提供了一套完整的边缘原生存储方案，可与 Workers 和 Pages Functions 无缝集成。

1. 1. Workers KV
• • 是什么：全球复制的低延迟键值存储。
• • 特点：读取极快（毫秒级），写入采用最终一致性。
• • 适合：缓存、用户配置、静态配置、会话存储。
• • 在 Functions 中使用示例：

  // 在 Functions 中，KV 通过环境变量传递
  export async function onRequest(context) {
    const { request, env } = context; // env 中包含绑定的 KV
    await env.MY_KV_NAMESPACE.put("last_visit", new Date().toISOString());
    const data = await env.MY_KV_NAMESPACE.get("last_visit");
    return new Response(`Last visit was: ${data}`);
  }

2. 2. D1 (Cloudflare 的 SQL 数据库)
• • 是什么：基于 SQLite 的全球无服务器 SQL 数据库。
• • 特点：完整 SQL 支持，强一致性。
• • 适合：需要关系型数据模型的用户数据、产品目录等。
• • 使用：通过 Wrangler CLI 创建和管理数据库，在代码中执行 SQL 查询。
3. 3. R2 对象存储
• • 是什么：兼容 S3 API 的对象存储服务。
• • 最大优势：零出口流量费用。你只需为存储付费，下载流量免费。
• • 适合：存储用户上传的图片、视频、文档，或托管大型静态资源。

总结

通过 Cloudflare Workers 和 Pages，你将获得：

• • 极致的性能：代码运行在用户身边。
• • 简化的运维：无需操心服务器、扩容和全球负载均衡。
• • 极低的成本：免费额度足以支撑大多数个人项目和早期创业阶段。
• • 完整的全栈能力：从前端托管到后端逻辑，再到数据存储，生态齐全。

希望这篇教程能帮你顺利开启建站之旅

打赏

支付宝微信扫一扫，打赏作者吧～

本文链接：https://kinber.cn/post/6065.html 转载需授权！

推荐本站淘宝优惠价购买喜欢的宝贝:

 您阅读本篇文章共花了：