完全免费、开源的多人协作记账Web App，在CloudFlare部署过程

​ Cent 是一个 完全免费、开源的多人协作记账 Web App， 基于 GitHub 仓库 实现数据同步与版本控制，无需服务器，即可实现跨平台实时同步。本文主要描述了这个项目前后端再cloudflare上部署的额外需要注意事项。

一、App 源码地址

1.1 前端

项目地址：https://github.com/glink25/Cent

1.2 后端（oAuth app）

项目地址：https://github.com/glink25/cent-github-backend

二、准备工作

  1. 拥有 Cloudflare 账户
  2. 注册域名（本文档示例：cent.example.com），并托管至 Cloudflare
  3. 拥有 Gitee 账号
  4. 拥有 GitHub 账号
  5. 代码准备：
    1. 下载 Cent 前端代码至本地，提交至个人 GitHub 仓库（需修改代码，不建议直接 Fork 源项目）
    2. Fork cent-github-backend 后端项目至个人 GitHub 仓库

三、部署步骤

3.1 前端部署

  1. 修改 Cent 前端代码：在 src/sw.ts 中添加 API 请求放行逻辑，修改后推送至个人 GitHub 仓库。核心目的：避免 Service Worker 缓存 API 请求，防止返回 HTML 内容而非接口数据。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      clientsClaim();
     self.skipWaiting();
     
    +// 🔥 核心新增：全局 fetch 事件拦截，优先放行 /api 开头的所有请求
    +self.addEventListener('fetch', (event) => {
    +  const request = event.request;
    +  const url = new URL(request.url);
    +  const pathname = url.pathname;
    +
    +  // 匹配 /api 开头的路径，直接放行（发起网络请求，不经过 Service Worker 拦截）
    +  if (/^\/api\/.*/.test(pathname)) {
    +    // 直接返回原始网络请求，不做任何缓存/拦截处理
    +    event.respondWith(fetch(request));
    +    return; // 终止后续 Workbox 路由匹配逻辑
    +  }
    +});
    +
     // 预缓存由 VitePWA 注入的所有静态资源
     precacheAndRoute(self.__WB_MANIFEST);

  2. Cloudflare 部署配置：

    1. 新建 Pages 项目，关联个人 GitHub 中的 Cent 仓库
    2. 添加自定义域名：cent.example.com
    3. 配置环境变量：进入「Workers 和 Pages」-「设置」-「变量和机密」，添加变量 VITE_LOGIN_API_HOST，值为 https://cent.example.com

  3. 前端部署完成

3.2 Gitee OAuth 认证应用配置

  1. 进入 Gitee 个人设置 → 数据管理 → 第三方应用，点击「新建应用」
  2. 填写应用基础信息：
    1. 应用名称：自定义（如「Cent 登录认证」）
    2. 生成 Client Secret（需妥善保存）
    3. 应用主页：https://cent.example.com
    4. 应用回调地址：https://cent.example.com/api/gitee-oauth/authorized
  3. 权限配置：勾选「Projects」权限
  4. 提交配置，应用创建完成

3.3 GitHub 应用配置

  1. 进入 GitHub 个人 Settings → Developer Settings → Github Apps，点击「New Github App」
  2. 生成密钥：点击「Generate a new client secret」，保存生成的密钥
  3. 基础信息配置：
    1. App Name：自定义
    2. App Home Url：https://cent.example.com
    3. Callback Url：https://cent.example.com/api/gitee-oauth/authorized
    4. 勾选「Request user authorization (OAuth) during installation」
  4. 关闭 Web Hook：取消勾选「Active」（Web Hook 功能暂不使用）
  5. 权限配置（Repository permissions 组）：
    1. Administration：读写权限（Read & write）
    2. Contents：读写权限（Read & write）
    3. Metadata：只读权限（Read only）
  6. 提交配置，GitHub 应用创建完成

3.4 后端（cent-github-backend）部署

  1. 修改后端代码：
    1. 编辑 src/white_list.ts，删除原有测试网址和项目网址
    2. 添加允许的域名："https://cent.example.com"
    3. 推送修改至个人 GitHub 仓库
  2. Cloudflare Worker 部署：
    1. 新建 Worker 项目，关联个人 GitHub 中的 cent-github-backend 仓库
    2. 完成基础部署后，进入 Worker 项目设置页进行后续配置
  3. 路由配置：
    1. 进入「域和路由」配置项
    2. 添加 2 条路由，区域均选择 example.com：
      • 路由 1：https://cent.example.com/api/github-oauth/**
      • 路由 2：https://cent.example.com/api/gitee-oauth/**
  4. 环境变量配置：进入「变量和机密」，添加以下 5 个纯文本变量： 类型名称值说明纯文本ENCRYPTION_SECRETS自定义字符串（用于数据加密）纯文本GITEE_CLIENT_IDGitee 第三方应用的 Client ID纯文本GITEE_CLIENT_SECRETGitee 第三方应用的 Client Secret纯文本GITHUB_CLIENT_IDGitHub App 的 Client ID纯文本GITHUB_CLIENT_SECRETGitHub App 生成的 Client Secret

四、完成与调试

以上所有配置部署步骤完成后，即可进入应用调试阶段，验证 OAuth 认证流程及前后端交互是否正常。