T-003

保姆级教程:使用 Cloudflare+Telegraph 搭建零成本图床系统

入库日期
2023-09-20
作者
诺多
类目
T-信息技术
原文出处
访问原文 ↗
主题/T-信息技术领域/科技形式/教程图床Cloudflare免费工具

本文是一篇保姆级图文教程,介绍利用 Cloudflare Pages 服务和开源项目 Telegraph 搭建零成本图床系统。文章从 Fork 项目、部署到 Cloudflare 讲起,详细说明了配置 KV 命名空间、管理后台登录验证、绑定自定义域名、开启内容审查以及更新系统等步骤,并梳理了免费额度的限制与注意事项。核心原理是利用 Cloudflare Workers 和 Pages 的免费额度托管图床系统与图片存储。

关于图床,做过建站或写博客的朋友应该都不陌生。市面上用于搭建图床的系统有很多,五花八门。单说免费开源的就有 PicGo、Chevereto、easyimage、兰空等等,一般都需要购买第三方的 OSS 服务作为存储底层,或者是基于 Github 存储搭建的一些方案。笔者今天介绍的这个与基于 Github 的方案有点类(白)似(嫖),是基于 Cloudflare Pages 服务和开源图床项目 Telegraph 来实现。

核心原理就是利用 Cloudflare Workers 和 Pages 的免费额度,将图床系统和图片储存都托管在 Cloudflare 网络中,从而实现一毛不拔!


1. 前提条件


2. 部署方法

2.1 Fork 项目

打开项目https://github.com/cf-pages/Telegraph-Image,登录自己的 Github 帐号,然后 fork 这个项目。

2.1.1 Fork Telegraph 项目

在项目主页点击Fork按钮:

2.1.2 设置 Fork

页面中什么都不要改,直接点击Create fork按钮,等待片刻就创建完成了。这时候你自己的 Github 中就有了这个项目的镜像。

2.2 连接 Github 仓库和部署图床

2.2.1 进入 Workers 和 Pages 概述界面

在 Cloudflare 主页,点击左侧Workers和Pages——>概述菜单:

2.2.2连接 Github 项目

首先,点击右上角创建应用程序,跳转到创建应用程序页面,并切换到 Pages 界面:

点击页面中的连接到Git按钮,在弹出界面中选择Github,并点击连接Github按钮:

之后,Cloudflare 会自动引导你到 Github 授权页面,如果没有登录 Github,则会先到登录界面:

接着,选择Only Select repositories,并选择上面 fork 好的项目,然后点击Install & Authorize按钮,确认完成授权和开始安装:

最后,Github 可能会要求你输入账号密码,以确认上面的授权。输入你的 Github 密码并Confirm即可:

2.2.3 部署到 Cloudflare

上面确认授权后,会从 Github 自动跳回到 Cloudflare 中,继续开始后续的部署设置。

首选,选中上面授权好的 Github 项目,点击开始设置

项目名称可以改成你自己喜欢的,生产分支建议保持默认的main,其他的不要动:

拉到页面下面,点击保存并部署,等待 Pages 自动部署项目:

当看到成功提示时,表示我们的图床已经部署完成了。此时 Cloudflare 自动分配了一个默认的域名,直接点击即可打开图床的上传页面:

如下图,Telegraph 的上传界面非常简洁,直接点击选中上传图片或视频按钮即可进行上传:


3. 设置图床

以上过程就完成在 Cloudflare 中部署 Telegraph 图床系统了,不过这时候还存在一些问题,包括如何管理用户上传的内容?如何绑定自己的域名?如何审查用户上传的内容是否违规?下面一一来解答。

3.1 配置管理后台

Telegraph 的后台管理功能和登录验证功能默认都是关闭的,我们仅需对部署的 Pages 项目进行一些设置就可以开启这些功能了。

3.1.1 创建 KV 命名空间

打开Workers和Pages——>KV管理界面,然后点击右上角创建命名空间按钮,创建一个名为img_url的命名空间:

3.1.2 查看 Pages 项目

回到Workers和Pages——>概述界面,找到上面部署好的 Telegraph 项目,直接点击名称,进入项目的详情页面:

3.1.3 绑定 KV 命名空间

点击设置-函数,拉到页面的下面,找到KV命名空间绑定模块:

点击添加绑定按钮,将变量名称KV命名空间均设置为img_url,然后保存:

3.1.4 设置管理后台登录验证

切换到环境变量页面,点击制作中的添加变量按钮,添加两个环境变量:

变量名分别是BASIC_USERBASIC_PASS,分别代表管理员的用户名和密码,然后保存:

当然,你也可以不设置这两个变量,这时候管理后台就是无需验证即可登录。但是你可以结合Cloudflare Access服务实现支持邮件验证码、Microsoft、Github 等第三方帐号登录方式,更加灵活强大。如果使用Cloudflare Access,则需要对/admin/api/manage/*两个路径进行保护。由于不是本文的重点,笔者就不展开了。

3.1.5 重新部署

做完以上的操作并不会立即生效,需要重新部署下系统才可以。

重新部署也非常简单,点击查看详细信息,在项目部署详情信息页面的右上角有个管理部署,点击其中的重新部署,等待重新部署完成即可。

3.1.6 登录管理后台

以上步骤操作完就实现了图床系统的管理后台功能和登录验证功能的设置,可以输入图床域名+/admin路径,就能打开管理后台了。例如:https://telegraph-image-xxx.pages.dev/admin:

打开后,在弹出框中输入上面设置好的用户名和密码即可:

管理界面有点简陋,可以看到图片的状态信息,也可以对图片进行黑/白名单设置或删除操作:

图片状态信息字段含义:

字段含义
ListType表示图片当前是否在黑白名单当中。None 则表示既不在黑名单中也不在白名单中,White 表示在在白名单中,Block 表示在黑名单中。
TimeStamp图片首次加载的时间戳
Label图片审查的结果。

3.2 绑定自定义域名

Cloudflare 自动分配的域名不好记(当然,如果你能忍受就可以不自定义),我们可以设置成我们自己的域名,方便使用,设置也很简单。

3.2.1 进入 Pages 项目

同样先进入项目页面,切换到自定义域页面:

3.2.2 添加自定义域

点击设置自定义域,输入你自己想用的二级域名,并点击继续按钮:

3.2.3 激活自定义域

可以看到 Cloudflare 将自动在域名 DNS 中添加一个CNAME解析记录,将自定义域名指向默认分配的域名。直接点击激活域按钮,然后等待验证即可:

验证中:

验证完成:

3.2.4 使用自定义域

自定义域验证完成后,而且自动帮你配置好了 SSL 证书,非常贴心了。此时就可以使用新的域名访问你的图床系统了。例如

https://imghub.yourdomain.com/

3.3 开启内容审查

图床中上传的图片或视频默认是不经过审查的,上传后就可以被访问了。作为一个上传无需登录的图床,没有审核还是很危险的。如果被人恶意上传了不法内容,作为域名持有人,躺枪荣获”银手镯”就不妙了。Telegraph 支持使用“moderatecontent”来进行自动内容审查,进行简单的配置就可以开启这项功能,强烈建议开启!

3.3.1 获取 API Key

打开”moderatecontent.com”网站,点击SIGN UP,输入你的邮箱,点击SUBMIT,界面上就直接为你生成API Key,复制并保存下来:

3.3.2 设置环境变量

与上文中设置管理后台登录验证的步骤一样,到项目的设置——>环境界面中,添加一个环境变量,名称为:ModerateContentApiKey,值就是上面获得的 API Key。

3.3.3 重新部署

同样的,做完以上的操作并不会立即生效,需要重新部署下系统才可以。

特别说明:开启图片审查后,因为审查需要时间,首次的图片加载将会变得缓慢,审查完成后的图片加载由于存在缓存,就不会受到影响了。


4. 更新图床系统

如果Telegraph-Image项目更新了,如何才能更新自己部署的图床呢?

很简单,如果项目更新后,需要添加新的 KV 命名空间或环境变量,则先在 Cloudflare 的项目中配置好。然后到你自己的 Github 中,在Telegraph-Image项目页面上点击Sync fork——>Update branch即可。
图片

操作完成后,稍等一会,等 Cloudflare Pages 那边检测到你的仓库更新了之后就会自动部署最新的代码了。


5. 注意事项

以上就是关于如何利用 Cloudflare Workers 的和 Pages 搭建无成本图床的全部过程了,内容稍微有点长,但都不复杂,基本上属于一劳永逸的事。

不过,说完好听的,还是得提一下稍微需要注意的事项,主要有以下方面:

如果你搭建的图床仅供自己使用,以上限制其实可以忽略。绝大多数情况下,免费额度都基本够用,并且可以稍微超出一点,不是一超出就立马停用了,而且每项额度都是单独计算。某项操作超出免费额度后只会停用该项操作,不影响其他的功能。例如免费写入额度用完了,读取功能不受影响,图片能够正常加载,只是不能在图片管理后台看到新的图片了。

另外,还有一些特殊的注意事项,需要关注下: