从零开始搭建你的免费图床系统（Cloudflare R2 + WebP Cloud + 图床工具）

文章来源自：从零开始搭建你的免费图床系统（Cloudflare R2 + WebP Cloud + PicGo） · Pseudoyu

背景

陆陆续续两三年了，建立博客至今也有诸多文章了，有一个问题就是图片如果放在本地显示会很慢，特别是放在服务器，如果没有cdn的话，就没有如今的效果，我现在的模式就是hexo（github page+公益cdn），后话了，先回到这这里，由于图片一多，造成发送图片源位置移动的话，还要重新找，特别是我在hexo里static下的img文件夹，本身markdown显示的都是相对路径，管理起来很麻烦，如今我了解到图床的概念，不但可以统一进行管理，还能减少博客仓库的体积，提升网站速度，（虽然我现在依然保持着，源图和文档在一起，源图片直接上传到github，毕竟上传到别人服务器的数据，就怕突然有一天倒闭了，就没了，所以我依然有着备份原图片在本地的习惯），所以我接下来讲的，只是适用于，不那么重要的项目

阿里云OSS+Picgo

阿里云oss，我个人使用来说，很方便，速度很快，结合图床来使用也是很方便的，就是唯一的缺点就是大多都是按量付费，如果内容一多，对于本身就是非盈利性的我来说，就很不妥当，通过picgo或兰空图床进行上传图片到阿里云oss，访问速度也很快，针对国内用户的访问速度明显提升（费用：存储加公网访问流量费用）

还有一个办法就是设置反向代理，你需要购买一台同区域的esc，保持和你存储桶是一个区域的，这样经过的流量就是内网流量，不会计费，但是会计算存储费用

图床搭建说明

Cloudflare R2 + WebP Cloud + 图床工具的方案尽管牵扯到了多个组件和平台，但所有操作都在 Free Plan 中，也是我最终选定的方案，下面将从零开始介绍如何搭建这个免费图床系统。

Cloudflare R2

R2 是 Cloudflare 推出的免费对象存储服务，需要免费注册一个 Cloudflare 账号才能使用，注册登录后，点击左侧边栏的 R2 访问服务，但需要注意的是开通 R2 服务需要绑定信用卡（国内外主流信用卡皆可），但并不会扣费，主要是为了验证用户身份使用。但是我最近发现他有了paypal验证方式，有了paypal，可以直接绑定国内储蓄卡，就可以通过R2验证的银行卡验证了

创建存储桶

开通 R2 服务后，点击右上角「创建存储桶」按钮进行创建。

进入创建配置界面后，需要填写存储桶（Bucket）名称，建议有一些辨识度，后续在配置上传时会用到。

位置则选择「自动」，但可以额外多配置一个位置提示，由于我后续还将使用「WebP Cloud」服务的美西机房进行图片代理优化，所以在此处选择的是「北美洲西部（WNAM）」，根据需求选其他区域也可以，但 Cloudflare 并不保证一定会分配到所指定的区域。

进入设置

首先我们需要打开「R2.dev 子域」，这是为了后续访问图片时需要的公网地址，点击「允许访问」，并按照提示输入「allow」即可开启。

完成后会显示一个以 r2.dev 结尾的公网网址，即我们后续访问图片的网址。

自定义图床域名（可选）

但是分配的网址比较长，不易于记忆，我们可以通过「自定义域」来绑定我们的专属域名，点击「连接域」按钮，填入想要访问的域名

然后在你域名服务商那添加dns解析，由于我是将域名托管到了cloudflare，直接自动添加解析了

效果就是这样了

配置存储桶访问api

当我们回到对象页面，上传一张测试图片

就有链接可以进行访问了

但是如果每次都打开cloudflare手动上传图片的话都会很麻烦。R2 提供了 S3 兼容的 API，可以方便地使用一些客户端/命令行工具进行上传、删除等操作。

这时候就会有api令牌信息，这里的内容只会出现一次，可以记下来，但是不要给别人哦

至此，我们需要在 Cloudflare R2 上配置的部分就完成了，接下来我们需要配置图床工具吧。

PicGo（可选，无需服务器）

PicGo 是一个用于快速上传并获取图片 URL 的工具软件，有着较为丰富的插件生态，支持多种图床服务，其 GitHub 仓库为「GitHub - Molunerfinn/PicGo」，可以下载对应平台客户端使用。

配置 R2 图床

PicGo 本体并不包括 S3 图床，但可以通过「GitHub - wayjam/picgo-plugin-s3」插件来支持。

windows下的稳定版2.3.1会出现搜索不到插件的情况,下载里面的beta版本就行了

Bug: 插件设置页无法搜索到插件 · Issue #1297 · Molunerfinn/PicGo

我只能安装1.0.2的，第一个安装不了，无关紧要

然后填写信息

这里有几项配置需要尤其注意。

应用密钥 ID，填写 R2 API 中的 Access Key ID（访问密钥 ID）
应用密钥，填写 R2 API 中的 Secret Access Key（机密访问密钥）
桶名，填写 R2 中创建的 Bucket 名称，如我上文的 blog-r2
文件路径，上传到 R2 中的文件路径，我选择使用 {fileName}.{extName} 来保留原文件的文件名和扩展名。
自定义节点，填写 R2 API 中的「为 S3 客户端使用管辖权地特定的终结点」，即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
自定义域名，填写上文生成的 xxx.r2.dev 格式的域名或自定义域名，如我配置的 image.qianyisky.cn

其他配置保持默认即可，确认参数无误后点击「确定」与「设置为默认图床」即可。

图片上传

完成上述配置后，我们就可以在「上传区」直接拖入文件进行图片上传了，如上传后显示无误则为配置成功，生成的链接会自动在系统剪贴板中，直接在需要的地方粘贴即可。

根据你想要的链接格式，我这里是markdown，就选择markdown格式，然后在相册里复制链接，在markdown文档看看

Lsky Pro图床（可选，需要服务器）

官网：Lsky Pro+ - 属于您自己的云上相册。

部署教程：Lsky Pro图床 | 严千屹博客

我这里就展示自己搭建好lsky pro图床进行演示了

创建存储策略

确认即可

图片上传

设置上传图片的限制大小为10M

点击保存即可

两者路径修改位置

这就是统一管理的方便性

这是lsky pro设置上传路径的位置

这是PicGo设置上传路径的位置

再去测试上传看看

效果

当然你可以在设置里选择这两个

WebP Cloud 图片优化

至此我们已经完成了整个图床的搭建、配置和上传，但通常我们本地截图或是相机拍摄的图片体积较大，对于访客来说加载时间会较长，并不直接适合互联网发布。

根据从零开始搭建你的免费图床系统（Cloudflare R2 + WebP Cloud + PicGo） · Pseudoyu写到WebP Cloud的方法

它可以实现图片的压缩，加快页面显示的速度

简单来说这是一个类 CDN 的图片代理 SaaS 服务，可以在几乎不改变画质的情况下大幅缩小图片体积，加快整体站点加载速度。发展到现在除了图片体积减少外，还提供了缓存、添加水印、图片滤镜等更多实用的功能，并提供了自定义 Header 等配置选项。

配置webp cloud

首先通过 GitHub 授权登录 WebP Cloud 平台。

回到主页，点击创建代理

为了优化国内访问，我「Proxy Region」选择的是美西「Hillsboro, OR」区域
「Proxy Name」填写一个自定义名称即可
「Proxy Origin URL」，比较重要，需要填写上文我们配置好的 R2 自定义域名，如我填写的是 image.qianyisky.cn，如果没配置自定义域名则填写 R2 提供的 xxx.r2.dev 格式的域名

之后点击你创建的代理，将代理地址更新到存储策略的配置里

PicGo配置

Lsky Pro配置

再进行上传图片的测试

就是我们通过图床工具上传的图片上传了之后，就可以通过这个WebP Cloud Services提供的代理节点进行访问

如果觉得默认代理地址不好看，可以进行设置自定义域名

最后确认，等待十分钟这样子，点击刷新按钮，就会更新代理地址了，然后点击启用

这时候你就可以去修改之前的图床工具的代理地址了

https://images.qianyisky.cn/PicGo/test.png

WebP Cloud 用量

免费用户每天有 3000 Free Quota，即能够代理 3000 次图片访问请求，并提供 200M 的图片缓存，对于一般用户来说完全够用，如有一些流量较大的特定时期也可以购买额外 Quota，价格很便宜。

如超过了 Quota，访问则会被 301 转发到源站图片地址，不经 WebP Cloud 服务压缩，但依然可用；超过 200M 的缓存则会按照 LRU 算法清理，所以依然能够保障一些高频请求的图片能够有较好的访问体验。

总结

以上就是Pseudoyu的图床系统搭建方案，如果你的项目是在国内的服务器上，用这个方法勉强够用哦，基本都是免费订阅的

那么接下来就要讲到安全这几块了

以下内容来自使用 WebP Cloud 与 Cloudflare WAF 为你的图床添加隐私和版权保护 · Pseudoyu

可以看看作者的一个图片被盗用的经历，就可以知道隐私保护的重要性

使用 WebP Cloud 与 Cloudflare WAF 为你的图床添加隐私和版权保护

在使用 WebP Cloud 的过程中，Pseudoyu发现它还提供了自定义 Proxy User Agent、水印等功能，于是萌生了一个想法，是不是可以通过 WebP Cloud 对Pseudoyu的图床源站链接进行保护，使 WebP Cloud 的代理链接成为访问我所有图片的唯一入口，并统一添加Pseudoyu的专属版权水印。

本文是对这一实践的记录，也算是图床搭建番外篇了。

需求分析

理论上两个地址都可以进行访问到我图床里的图片，但是前者是代理后经过处理的图，后者是直接访问cloudflare R2的原图

隐私保护

事实上我们通过手机、数码相机等设备拍摄的照片都会携带 EXIF(EXchangeable Image File Format) 信息，通常会包含拍摄设备、时间和地点等敏感信息，我们可以通过一些技术方式手动去除这些元数据，但操作十分繁琐且容易遗漏。

Pseudoyu查阅了一下 WebP Cloud 的文档，发现它果然提供自动擦除 EXIF 信息的功能，无须额外配置操作，但其实访客依然可以可以通过 Cloudflare R2 暴露出的源站信息访问到原图，为了避免这一点，我们需要限制用户只能通过 WebP Cloud 代理链接进行请求，访问 Cloudflare R2 源站链接时获取不到任何有用信息。

版权保护

这是作者图片被盗用的经历

实现方案

需求清晰了，其实主要分为两部分：

让用户只能通过 WebP Cloud 代理链接访问到我的图片，禁止直接访问原图链接
在 WebP Cloud 代理层面为所有的图片统一自动添加自己的版权水印，无须手动操作

以下是我的实现方案与详细步骤。

WebP 自定义 User Agent + Cloudflare WAF

WebP Cloud 配置

当我们访问互联网上的网页或图片链接时，请求通常会包含一个 User Agent 字段，一般包含浏览器版本等信息，网站可针对不同的 User Agent 进行一些特定逻辑处理。

WebP Cloud 默认会使用 WebP Cloud Services/1.0 作为值，也就是不论用户访问图片时使用的是什么终端设备和浏览器，请求到 Cloudflare R2 时都会被统一为 WebP Cloud 定义的 User Agent 值，而这个值又是用户可以自定义的。

因此，我们登录 WebP Cloud 的控制台，将「Proxy User Agent」字段设置为一个自定义值，如 ABC.com/1.0。

随后更新代理

Cloudflare WAF 配置

WAF（Web Application Firewall）是 Cloudflare 提供的一个防火墙服务，可以自定义规则来限制特定请求以保护网站安全，登录 Cloudflare 后在左侧边栏点击「网站」，点击进入需要保护的域名，选择侧边栏「安全性」 - 「WAF」即可免费使用（注：不是最外层的账户级 WAF），免费账户可设定五个自定义规则。

点击右侧的「编辑表达式」，填入以下规则：

1	(http.user_agent ne "ABC.com/1.0") and (http.host eq "image.qianyisky.cn")

其他默认，然后点击保存

方便理解：

1.代理链接的User Agent会包含在网络请求里，也就是设置了ABC.com/1.0（A钥匙）

2.cloudflare WAF：设置了只有A钥匙才可以访问

3.一般用户浏览网页的User Agent是这样的
1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
也就是说没有A钥匙，是访问不了的

4.所以在代理链接设置了A钥匙，那么他会把访问原地址的流量请求加入A钥匙，达到访问的目的，如果没有A钥匙直接访问原地址就会出现如下图