🚀 5 分钟构建：基于 Cloudflare 的极简多用户 OKR 追踪器（免费、Serverless 全栈）

在追求高效的今天，OKR (目标与关键结果) 框架已成为个人和团队管理目标的首选。但为什么不利用 Serverless 技术，快速搭建一个完全属于自己的、免费且高度安全的 OKR 追踪器呢？

本文将带您使用 Cloudflare Pages、Workers 和 Workers KV，从零开始构建一个支持 多用户数据隔离 的全栈 OKR 追踪应用。为了简化部署，我已将代码部分转化为可直接复制的 Prompt。您可以将其喂给大模型（如 Grok 或其他 AI），让它生成完整的代码，从而轻松自定义或扩展。

🎯 项目亮点

全栈 Serverless：无需管理任何服务器，完全运行在 Cloudflare 的边缘网络。
多用户隔离：利用 Cloudflare Access，实现安全认证，确保每个用户的数据独立存储，互不干扰。
极低成本：整合 Cloudflare Pages、Workers 和 Zero Trust 的免费额度，成本几乎为零。
低延迟体验：数据存储在 KV 中，全球分布式，读取速度极快。

架构概览

该应用采用前后端分离架构，并使用 Cloudflare Access 注入用户身份 Header，以实现安全的用户认证和数据隔离。

技术栈：

前端：单页应用 (SPA)，使用 Cloudflare Pages 托管。
后端：使用 Cloudflare Workers 处理业务逻辑。
数据库：使用 Cloudflare Workers KV 进行持久化存储。
身份验证与安全：通过 Cloudflare Access 实现用户认证与数据隔离。

🛠️ 第一步：环境与代码准备

创建 KV 命名空间

在 Cloudflare 仪表板中，进入 Workers & Pages → KV → 创建命名空间，命名为 OKR_STORAGE。

部署 Workers 后端

使用以下 Prompt 生成 Workers 代码，并将其部署到您的 Workers 服务中。

绑定 KV：在 Workers 设置中，将 OKR_STORAGE KV 命名空间绑定到同名变量 OKR_STORAGE。
设置路由：为前端与 API 的 Cookie 共享配置路由，建议使用子域名：okr.tiannianqi.com/api/*。

部署 Pages 前端

使用以下 Prompt 生成前端 app.js 代码，并部署到 Cloudflare Pages。

关键修改：确保 app.js 中的 WORKER_URL 指向您 Pages 的域名。例如：

     const WORKER_URL = "https://okr.tiannianqi.com";

🔒 第二步：配置多用户安全隔离 (Cloudflare Access)

启用 Cloudflare Zero Trust

配置身份提供商 (IdP)

进入 Settings → Authentication → Login Methods。
添加您希望的登录方式，如 One-time PIN（邮箱验证码）或 Google/GitHub 登录。

创建 Access 应用程序

在 Access → Applications → Add an application 中创建应用：
应用名称：OKR Tracker
子域名：okr.tiannianqi.com
Cookie 域名：如果使用统一域名，则无需设置。

定义访问策略

策略名称：Authorized Users
操作：Allow
包含条件：例如：Email Ends with @tiannianqi.com。

Header 注入

Cloudflare Access 会在登录成功后，自动在请求中注入 CF-Access-Authenticated-User-Email Header，用于标识用户身份。

💻 项目代码 Prompt（喂给大模型生成代码）

1. Workers 后端代码 Prompt (多用户隔离版)

生成一个 Cloudflare Workers 的 JavaScript 代码，用于构建一个多用户 OKR 追踪器的后端 API。核心功能包括：
- 从请求的 'Cf-Access-Authenticated-User-Email' Header 中获取用户邮箱，如果缺失，返回 401 Unauthorized。
- 将用户邮箱小写标准化，作为 KV Key 的前缀。
- 支持以下 API 端点：
  - GET /api/okr/periods：获取用户的周期列表。
  - POST /api/okr/periods：添加新周期。
  - GET /api/okr/{period}：获取特定周期的 OKR 数据。
  - PUT /api/okr/{period}：更新特定周期的 OKR 数据。
  - DELETE /api/okr/{period}：删除周期数据。

Pages 前端 app.js 代码 Prompt

生成一个 JavaScript 代码，用于 Cloudflare Pages 的前端 OKR 追踪器 SPA。核心功能：
- 使用统一的 `apiFetch` 函数与后端交互。
- 支持周期的选择与新增、编辑、删除操作。

🎉 恭喜！

通过 Cloudflare Pages、Workers 和 Zero Trust，您已经成功构建了一个具有企业级安全认证和数据隔离能力的个人 OKR 追踪器。现在，您可以安全地与团队成员共享您的追踪器，而无需担心数据泄露或混淆！

Cloudflare OKR 追踪器