cloudflare免费无服务部署之Workers

好的，以下是使用 Cloudflare Workers 的详细介绍，从概念到部署，希望能帮助你入门：

关于 Cloudflare Workers

上期我已经介绍和对比了 Workers，没有看过的可以返回上期看一下。

传送门：https://www.cdsy.xyz/computer/recommend/250419/cd74134.html

准备工作

1. Cloudflare 账户： 你需要一个 Cloudflare 账户。注册较为简单，不再过多赘述。
   https://dash.cloudflare.com/sign-up
2. 一个域名： 在Worker开发中，cloudflare分配的免费域名在国内不可以使用，你必须有一个域名。除非你在国外。 如果你没有域名，推荐去https://spaceship.com买一个域名。输入一个6位你可以记住的数字加.xyz。每年不到5人民币。
   
3. Node.js 和 npm（非必须，但推荐）： 安装 Node.js 和 npm（Node 包管理器）。
   • 1 前往 Node.js 官网 https://nodejs.org/zh-cn
     
   • 2 双击运行安装包，一直点 Next，第二步需要勾选同意协议。
   • 按 WIN+R 键，打开“运行”对话框，输入 cmd ，按回车键。在命令提示符中输入 ：

     node -v
     npm -v

     出现版本号，证明安装成功：

     C:\Users\User>node -v
     v22.14.0
     C:\Users\User>npm -v
     11.3.0

4. wrangler CLI（非必须，但推荐）： Cloudflare 官方提供的命令行工具，用于开发、测试和部署 Workers。 使用以下命令安装:

   npm install -g @cloudflare/wrangler

   在 cmd 中输入：

   wrangler -v

   出现版本号，证明安装成功：

    ⛅️ wrangler 4.12.0

   注意：如果出现以下内容则证明你已经安装过 wrangler ,你需要卸载，并再次安装。

   C:\Users\User>npm install -g @cloudflare/wrangler
   npm error code EEXIST
   npm error path C:\Users\User\AppData\Roaming\npm\wrangler
   npm error EEXIST: file already exists
   npm error File exists: C:\Users\User\AppData\Roaming\npm\wrangler
   npm error Remove the existing file and try again, or run npm
   npm error with --force to overwrite files recklessly.
   npm error A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\2025-04-18T12_56_53_179Z-debug-0.log

   卸载命令：

   npm uninstall -g @cloudflare/wrangler

   卸载完成后，再次尝试安装。

开发步骤：

请再次确认你有一个域名，并成功托管到cloudflare上，否则你将不能访问你的Workers。

1. 点击左侧的 Workers 和 Pages
   
2. 点击 创建
   
3. 点击 Hello World
   
4. 你可以修改一下项目名，之后滑到底下，点击 部署。
   
5. 部署完成
   大概率，你点击这个链接是无法访问的。
6. 你可以点击 编辑代码 ，来编辑你的代码（不推荐，除非你的项目较为简单，不需要用到数据库，只是简单的网络转发）
7. 点击 继续处理项目
   
8. 点击 设置，然后点击 域和路由选项卡中的添加按钮。
   
9. 点击 自定义域
   
10. 输入你的域。注意这里必须要是在你的cloudflare账号上托管的域名才可以，不可以是CNAME解析。并点击 添加域
    
11. 访问你的自定义域，就是workers的内容了。
    由于仅在cloudflare上可以开发的内容比较少，更多还是要使用 wrangler。这里不细讲在线编辑了。如果有这方面的需求，请在评论区留言，如果有需求的人比较多，我会补充上去。
12. 以下为进阶部分，部分简单的操作我将不重复教了（比如打开CMD）。你需要完成 准备工作 中的第3 4 步。
    登录 Cloudflare 账户:
    在CMD中输入：

    wrangler login

    这将在浏览器中打开 Cloudflare 登录页面，点击Allow，授权 wrangler 访问你的账户。
    
    这样就是登录成功，你可以关闭这个标签页了：
    
    你的CMD中也会同步显示 Successfully logged in.
13. 创建 Worker 项目:
    如果你是第一次使用，推荐在workers界面创建新项目。
    如果你需要其他配置，那么你就需要在CMD创建项目。
    在CMD创建项目的的另一个的好处是，在后续你不需要手动创建文件，在你的文件夹中包含了所有wrangler配置好的文件。

    wrangler init my-worker
    cd my-worker

    这会创建一个名为 my-worker 的新目录，并初始化一个 Worker 项目。
    当出现类似的提示，输入y，并按回车

    Need to install the following packages:
    create-cloudflare@2.44.1
    Ok to proceed? (y)

    wrangler init  会提示你选择一个模板，可以选择 "hello-world"  或者其他合适的模板.键盘上下键切换，回车确定，一般直接用 Hello World Example，就可以
    
    如果选择 "hello-world" , 则会生成 wrangler.toml, index.js,  和一个 .git 目录 (如果你的系统支持).
    这里直接按回车。
    
    这里继续按回车。
    
    之后就会开始创建项目。
    这里选择是否开启Git版本控制，这个自行决定吧。
    
    这里选择是否立刻部署项目，按默认来即可。
    
    这样就是部署成功的：
    
    最完整的项目框架：
    
    注意：你可能需要额外创建wrangler.toml。这是 Worker 的配置文件

2.5. 如果你使用的是workers界面创建新项目，你需要根据文件树创建出最简项目框架。

文件树
./project
└─src
    └─index.js
└─package.json
└─wrangler.toml

3. 编写 Worker 代码:
   打开 index.js 文件，编写你的 Worker 代码。一个简单的示例如下：

   addEventListener('fetch', event => {
     event.respondWith(handleRequest(event.request));
   });
   
   async function handleRequest(request) {
     return new Response('Hello Cloudflare Workers!', {
       headers: { 'content-type': 'text/plain' },
     });
   }

   • addEventListener('fetch', ...):  监听 fetch 事件，这是 Worker 接收 HTTP 请求的入口。
   • event.respondWith(...):  使用 handleRequest 函数的返回值来响应请求。
   • handleRequest(request):  处理请求的函数，这里简单地返回一个包含 "Hello Cloudflare Workers!" 的文本响应。
4. 本地测试:
   使用 wrangler dev 命令在本地测试你的 Worker。

   wrangler dev

   这会启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:8787 来测试你的 Worker。  wrangler dev 会自动监视你的代码更改，并在你保存文件时自动重新加载。
   重要的本地测试选项：
   • --local: 使用本地模式，不连接到 Cloudflare 的网络。  这在某些情况下可以更快地进行测试，但可能无法完全模拟 Cloudflare 边缘环境。
   • --persist:  允许 Worker 在本地保存数据 (例如，使用 KV 存储)。
5. 配置 wrangler.toml 文件:
   wrangler.toml 文件是 Worker 的配置文件，用于指定 Worker 的名称、路由、环境变量等。  一个基本的 wrangler.toml 文件可能如下所示：

   name = "my-worker"
   main = "src/index.js"
   compatibility_date = "2023-04-01"
   
   [vars]
   MY_VARIABLE = "my_value"
   
   [[d1_databases]]
   binding = "DB" # 绑定 D1 数据库的名称
   database_name = "logs" # 你的 D1 数据库名称
   database_id = ""  # 你的 D1 数据库 ID
   

   • name:  Worker 的名称，必须是唯一的。
   • main:  Worker 的入口文件。
   • compatibility_date:  指定 Worker 使用的 Cloudflare Workers API 的兼容性日期。  选择一个较新的日期可以让你使用最新的功能。
   • vars:  定义 Worker 可以访问的环境变量。
   • [[d1_databases]]: 绑定D1数据库，注意这是一个二维列表，不要少打一层中括号。
6. 部署 Worker:
   使用 wrangler deploy 命令将你的 Worker 部署到 Cloudflare 的全球网络。

   wrangler deploy

   部署成功后，wrangler 会输出 Worker 的 URL。

7. 配置自定义域:
   你需要返回你的cloudflare控制台，并添加自定义域。

高级特性

• KV 存储:  Cloudflare KV 是一个全球分布的键值存储，你可以使用它来存储和检索数据，而无需依赖传统的数据库。  适合存储配置信息、会话数据等。
  • 绑定 KV 命名空间:  在 wrangler.toml 文件中，使用 kv_namespaces  配置项来绑定 KV 命名空间。

    kv_namespaces = [
      { binding = "MY_KV", id = "your-kv-namespace-id" }
    ]

    你需要先在 Cloudflare 控制台中创建一个 KV 命名空间，并将其 ID 填入  your-kv-namespace-id  的位置。
  • 在 Worker 代码中使用 KV：

    addEventListener('fetch', event => {
      event.respondWith(handleRequest(event.request));
    });
    
    async function handleRequest(request) {
      const value = await MY_KV.get("my_key");
      return new Response(`Value from KV: ${value}`);
    }

• Durable Objects:  Durable Objects 提供了一种强大的方式来构建有状态的、协调的应用程序。  它们允许你在 Cloudflare 的边缘存储和管理数据，并提供强大的并发和一致性保证。  适用于构建实时协作应用、游戏服务器等。
• 环境变量和 Secrets:  使用环境变量来存储配置信息，使用 Secrets 来存储敏感信息 (例如 API 密钥)。  Secrets 会被加密存储，只能在 Worker 运行时访问。  通过 wrangler secret put <secret_name> 来创建secret。
• 中间件:  使用中间件来提取通用逻辑，比如身份验证、日志记录等。
• Streams API:  Workers 支持 Streams API，允许你处理大型文件和流数据，而无需将整个文件加载到内存中。
• WebAssembly (Wasm):  你可以使用 WebAssembly 来运行高性能的计算密集型代码。

重要提示

• 配额限制： Cloudflare Workers 有一定的配额限制，包括请求数量、CPU 时间、内存使用等。  请仔细阅读 Cloudflare 的文档，了解配额限制，并根据你的需求进行优化。
• 错误处理：  确保你的 Worker 代码包含适当的错误处理机制，以防止意外错误导致服务中断。
• 安全性：  注意保护你的 Worker 免受安全威胁，例如代码注入、跨站脚本攻击等。  使用安全编码实践，并定期审查你的代码。
• 日志和监控： 使用 Cloudflare 的日志和监控工具来跟踪 Worker 的性能和错误，并及时进行优化和修复。

示例：简单的 API 网关

以下是一个简单的 API 网关示例，用于对 API 请求进行身份验证：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const apiKey = request.headers.get('X-API-Key');

  if (!apiKey || apiKey !== API_KEY) {
    return new Response('Unauthorized', { status: 401 });
  }

  // Forward the request to the origin server
  const url = new URL(request.url);
  url.hostname = 'your-origin-server.com';
  const modifiedRequest = new Request(url, request);

  return fetch(modifiedRequest);
}

在这个例子中，我们首先检查请求头中是否存在 X-API-Key，并验证其是否与环境变量 API_KEY 的值匹配。如果验证失败，则返回一个 401 错误。如果验证成功，则将请求转发到源服务器。

总结

Cloudflare Workers 是一个功能强大的工具，可以用来构建各种各样的边缘应用程序。 通过合理利用 Workers，可以显著提升网站和应用的性能、安全性和可扩展性。 掌握本文介绍的基本概念和步骤，你就可以开始使用 Cloudflare Workers 来构建你自己的边缘应用程序了。记得查阅 Cloudflare 官方文档，深入了解更多高级特性和最佳实践。

关于D1数据库的使用，后续会再出一篇。

之后还会有项目讲解，本人现在正在做学校图书馆的网站（完全使用Cloudflare），完成后，这个项目的代码会放出来。如果对这个项目感兴趣的可以在社区私信我。