写在前面

最近在研究记账软件，偶然刷到一个叫做cent的项目，声称纯静态，无需后端也能运作，还能作为PWA应用安装到手机上，这种好东西不得自己部署一个玩玩呀，说干就干，结果发现项目仓库的readme中关于自行部署方法的介绍并不详细，而且如果真的使用纯静态无后端的部署方式是无法支持Github/Gitee一键登录的，只能手动填写token登录，体验不太好，好在作者还给出了后端的代码，这让自行部署后端也变得简单的多
说干就干，开整……但是话又说回来了，前端好歹还在readme中提了一嘴如何部署，后端的readme则干脆只有一句介绍，部署的事一点没提，本想着没提就没提吧，网上总有大佬会写教程的吧，结果最终也没搜到部署教程，罢了罢了，既然没人写，那就我自己来写好了，于是就有了这篇文章

部署前端

对比后端来说，前端还是比较好部署的
前端仓库链接如下：
https://github.com/glink25/Cent
Fork这个前端仓库到自己的Github中
来到Cloudflare，在左侧菜单找到计算-Workers和Pages
右上角找到创建应用程序
在页面下方写着“想要部署Pages？”，点击旁边的开始使用
选择导入现有 Git 存储库
此时，如果你之前没有将Github连接到Cloudflare，那么你可能需要连接一下（说白了就是登录Github，给Cloudflare授个权，很简单，跟着引导来就好）
连接好后，选择你刚刚Fork好的那个前端仓库，点击右下角的开始设置
项目名称可自定义
生产分支默认即可
预设框架选无即可
构建命令如下：

pnpm run build

构建输出目录如下：

dist

根目录（高级）无需配置
环境变量（高级）按需配置，变量如下：
%VITE_GTAG_SCRIPT%：必填，似乎是谷歌分析脚本的秘钥，不知道是什么的可以填一个空格，但是不能不写，不写会导致报错（这里有个坑，变量名两边的百分号也得带上，不带百分号也会报错，其他的变量就不需要写百分号）
VITE_LOGIN_API_HOST：选填，是后端的链接，如果不打算部署后端，这个变量可以不创建，示例：https://hd.example.com,也可以用其他别的什么协议头，但是那样部署后端的时候会比较麻烦，所以建议还是用https://
VITE_RATE_API_HOST：选填，似乎是填货币汇率API的地方，我是没创建这个变量，实测也能获取到货币汇率，感兴趣的小伙伴们可以研究研究
上面的都填好后，点击右下角的保存并部署，不出意外的话，过几分钟就能部署好，部署好后Cloudflare会提供一个用于访问的域名，当然，你也可以绑定自己的域名用于访问
至此，前端部署完毕

部署后端

对比前端来说，后端部署起来会复杂一些，有些东西需要修改后才能部署
后端仓库链接如下：
https://github.com/glink25/cent-github-backend
Fork这个后端仓库到自己的Github中
来到刚刚Fork好的这个后端仓库
对后端仓库根目录下的wrangler.toml进行修改
将name的值改为你要在Cloudflare Workers中创建的项目名，要注意符合相关的命名规则
将GITHUB_CLIENT_ID和GITEE_CLIENT_ID的值替换为你自己的
GITHUB_CLIENT_ID获取方式如下：
来到Github，点击右上角你自己的头像，选择Settings
左侧菜单栏中拉到最下面，找到Developer settings
进入后，还是在左侧菜单栏找到GitHub Apps，右侧找到New GitHub App
GitHub App name可自定义
Homepage URL写你的前端链接，例如：https://qd.example.com
Callback URL写你的后端回调链接，例如https://hd.example.com/api/github-oauth/authorized，将你的后端域名替换上就可以了
取消勾选Request user authorization (OAuth) during installation
取消勾选Webhook下方的Active
点击Repository permissions，将下方的Administration和Codespaces设置为Read and write
来到页面最下方，在Where can this GitHub App be installed?处选择Any account项
其他部分留空即可
点击最下方的Create GitHub App按钮
如果创建成功，你应该能够在页面上找到Client ID，这就是你的GITHUB_CLIENT_ID
接下来我们来获取GITEE_CLIENT_ID
来到Gitee，鼠标移至右上角你的头像上，选择设置
在左侧菜单栏中找到第三方应用
右上角点击创建应用
应用名称可自定义
应用主页写你的前端链接，例如：https://qd.example.com
应用回调地址写你的后端回调链接，例如https://hd.example.com/api/gitee-oauth/authorized，将你的后端域名替换上就可以了
权限勾选projects即可
点击下方创建应用
如果创建成功，你应该能够在页面上找到Client ID，这就是你的GITEE_CLIENT_ID
至此，wrangler.toml就修改完成了
接下来我们修改后端仓库中的src/white_list.ts
这个文件中记录的是后端的白名单，需要确保前端的域名在这份白名单中，否则前端在访问后端时会返回400，里面默认有作者的域名，修改为你自己的域名即可
至此，src/white_list.ts就修改完成了
接下来我们修改后端仓库中的src/index.ts
找到注释写着配置常量的地方，将下方的GITHUB_APP_SLUG的值修改为你前面创建的那个GitHub App的名字
至此，src/index.ts就修改完成了
接下来我们来的Cloudflare，主页左侧找到计算-Workers和Pages
右上角找到创建应用程序
选择Continue with GitHub
选择你刚刚Fork并修改好的后端仓库，点击下一步
项目名称可自定义
构建命令留空即可
部署命令如下：

npx wrangler deploy

取消勾选非生产分支构建
高级设置无需修改
点击右下角的部署按钮，大约几分钟后就能部署好
部署好后，我们还需要到这个Workers的设置页面填写一些比较敏感的环境变量
来到这个Workers的设置页面后，在变量和机密栏中应该可以看到之前在wrangler.toml中填写的GITHUB_CLIENT_ID和GITEE_CLIENT_ID
接下来我们需要继续添加几条环境变量，由于比较敏感，所以不便写进wrangler.toml，变量如下：
ENCRYPTION_SECRETS：不确定是否必填，但是建议填上，这是用于加密state的秘钥，防止CSRF，如果你不知道该填什么，可以在浏览器控制台执行以下命令，随机生成一个

(async () => {
  const key = crypto.getRandomValues(new Uint8Array(32));
  const base64 = btoa(String.fromCharCode(...key));
  console.log(base64);
})();

SIGN_SECRETS：选填，用于使用自定义协议头时加密时间戳的秘钥，本文使用的是https://协议头，故无需创建
GITHUB_CLIENT_SECRET：必填，这是GitHub App的秘钥，在前面创建的那个GitHub App的编辑页面可以找到，默认是没有的，点击Generate a new client secret可以生成一个，这个秘钥只会在生成时显示一次，之后会被隐藏一部分，所以务必及时复制并保存
GITEE_CLIENT_SECRET：必填，这是Gitee应用的秘钥，在前面创建的那个Gitee应用的详情页面可以找到，与GitHub App秘钥不同的是，Gitee应用的不需要手动创建，默认会自动创建，且不会部分隐藏
以上秘钥一定不要泄露
添加好以上环境变量后，重新部署Workers，同样，Cloudflare会提供一个域名用于请求，你也可以绑定自己的域名用于访问
至此，后端部署完毕
在浏览器中直接访问你的前端链接，享受你的成果吧~

标签: 部署, Cloudflare, Cent, 记账, 资金管理

添加新评论