利用CloudFlare和Telegraph实现免费托管图片

一.前言

之前一直是将图片存放在阿里云的oss上，它是按照存储和流量来计费，一年也是笔不小的费用。最近一直在了解CloudFlare,发现通过他的pages，可以将图片无限制的存储到Telegraph上。这对于我们这种独立开发者或者初创型的小公司来说，简直太适合了！

优点

1.因为是存放到Telegraph，图片无存储限制
2.完全免费
3.无需购买服务器
4.支持图片审查
5.支持后台图片管理

缺点

1.因为是存放到Telegraph，单张图片/视频大小不能超过5M
2.使用cloudflare提供访问，每日浏览量不超过100万
虽然有上述缺点，但是对于大部分用户来说，其实已经足够，如果真的超过了100万的浏览量，购买cloudflare的付费服务，每月也只需要5美元。

二.所需工具

1.github账号
2.cloudflare账号
3.域名(cloudflare分配的域名国内直接访问不了，需要科学上网，如果需要国内访问，需要绑定自己的域名)
4.需要将域名托管到cloudflare(可选)
参考教程：如何将域名托管到CloudFlare-点击查看

注意：
1.如果只是实现图片的托管，域名可以不用托管到cloudflare;
2.如果要实现图片的图片压缩缩放、剪裁、水印、滤镜，需要将域名托管到cloudflare,因为使用的是workers，workers如果要绑定自定义域名，必须将域名托管到cloudflare

5.git

三.实现图片托管

1.fork代码到自己的github

开源项目：Telegraph-Image
原项目地址
 增加auth项目地址
 我的项目地址

注意：
1.原项目指的是这个项目的原作者开源的代码
2.增加auth是其他人在原项目的基础上增加auth身份验证，防止任何人都可以上传
3.我的项目是合并了原项目和auth的功能，因为原项目已经做了更新，我这个既保存了原项目的最新功能，又同时拥有auth功能

fork之后会在你的代码仓库看到这个开源项目，后面cloudflare中需要用到

2.cloudflare创建pages

2.1 登录到CloudFlare>Workers和Pages>概述，点击创建应用程序

2.2 进入创建应用程序页面，点击Pages>连接到Git

2.3 添加你的github账户，选择一个存储库，点击开始设置

注意：
1.连接github需要二次验证，需要输入验证码授权才能登录和授权cloudflare访问你的github,ios使用的Authenticator App获取github验证码
2.存储库必须要点击一下，开始设置按钮才能点击

2.4 选择你的github仓库中的Telegraph-Image，或者你也可以授权让他访问整个账号下的仓库

2.4.1 输入github二次验证码

2.4.2 选择存储库，点击开始设置

2.4.3 参数默认就行,也可以根据更改项目名称，环境变量也可以根据需要填写或者后面再更改，点击保存并部署

注意：通过cloudflare给我们分配的域名如果访问失败，需要开启科学上网工具。这就是需要一个自己域名的原因，域名的绑定可以继续看后续的操作。

四.绑定域名

4.1 在workers和pages下的概述中，找到创建的pages

4.2 点击自定义域下的设置自定义域

4.3 填写域名或二级域名，点击继续

4.4 根据cloudflare提供的DNS信息，到你的域名管理DNS中添加一条CNAME解析

注意：如果域名是托管在cloudflare中，点击激活域名会自动添加一条解析记录。其他的需要到自己的域名供应商的管理中添加

4.5 生效后，即可使用自定义域名访问

五.配置参数,实现图片管理

5.1 获取图片审查API的key

前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的 API key

5.2 配置函数,开启后台管理

5.2.1 配置KV

进入workers和pages菜单下的KV，点击创建命名空间

5.2.2 配置函数

进入pages项目下，点击设置>函数>KV 命名空间绑定，点击添加绑定

添加变量名和上一步设置的命名空间，注意变量名一定不要填错
变量名：img_url

5.2.3 重新部署，访问管理后台

进入pages项目下，点击部署>重试部署
待部署成功之后，通过域名+/admin即可访问管理后台

5.3 配置变量，开启auth,账号访问,白名单,图片审查

5.3.1 进入pages项目下，点击设置>环境变量>为生产环境定义变量,添加变量

注意：
环境变量的变量名必须与下面的相同，内容根据自己的设定。
BASIC_USER:图片管理的登录用户名
BASIC_PASS:图片管理的登录密码
ModerateContentApiKey:图片审查API的key。配置图片审查之后，一些不合规的图片会自动屏蔽，不会显示。
WhiteList_Mode:开启白名单，true表示开启，false表示关闭。开启白名单之后，所有上传的图片默认都是不能访问，需要到管理中把图片加入白名单才可访问
AUTH_CODE:设置一个密码后，访问上传页面需要输入你设置的这个密码才能上传。这个功能原项目中并没有，需要从fork我的项目才能使用。

5.3.2 重新部署，访问管理后台

设置更改环境变量后函数，都需要重新部署

设置了管理后台的登录账号和密码，需要输入正确的账号和才能访问管理后台

设置了auth之后，需要输入密码才能上传图片

开启白名单功能后，上传的图片无法直接访问，需要到管理后台把上传的图片加入白名单才能访问

六.进阶玩法：实现图片压缩缩放、剪裁、水印、滤镜

上面实现了图片的存储，访问及管理，但是还缺少一个类似oss的图片处理功能，比如oss上可以在图片地址后加一些参数即可改变返回图片的大小，这个还是非常有用的，对于优化图片的加载速度非常好！利用cloudflare的workers同样可以实现。
这个功能是利用开源项目cloudflare-worker-image来实现，项目地址

特点

1.支持 PNG、JPEG、BMP、ICO、TIFF 格式图片处理
2.可输出 JPEG、PNG、WEBP 格式图片，默认输出 WEBP 格式图片
3.支持管道操作，可以执行多个操作
4.支持 Cloudflare 缓存
5.支持图片地址白名单，防滥用

6.1 下载cloudflare-worker-image到本机

1
2
3

# 克隆此项目
git clone https://github.com/ccbikai/cloudflare-worker-image.git
cd cloudflare-worker-image

6.2 安装依赖

需要安装pnpm,node的版本要大于18

# patch 功能依赖 pnpm, 如果不使用 pnpm, 需要自己处理 patch-package https://www.npmjs.com/package/patch-package
npm i -g pnpm 

# 安装依赖
pnpm install

6.3修改白名单配置，改为图片域名或者留空不限制图片地址

白名单设置的域名就是你图片地址的访问域名，比如http://img.xxx.com/file/2329032093.png,你可以设置完整的二级域名img.xxx.com也可以设置顶级域名xxx.com，建议设置顶级域名。

6.4 部署项目

在项目的根目录下运行npm run deploy将项目部署到cloudflare workers
部署成功后可以通过cloudflare分配的域名访问(如果访问不了，需要开启科学上网)

1 2	`# 发布 npm run deploy`

6.5 绑定域名

由于这个项目是用workers方式，和pages的方式不同，pages中有个自定义域选项，这个workers是没有的。如果要绑定域名，必须要先把域名托管到cloudflare上。
域名托管cloudflare参考教程：如何将域名托管到CloudFlare-点击查看
在你的cloudflare域名管理中，点击菜单 Workers路由>添加路由