江湖人称“赛博菩萨”的Cloudflare提供了诸多网站建设的免费服务。这次我们来看一下Cloudflare提供的对象存储服务,并利用其提供的免费计划搭建一个免费的图床。
Cloudflare R2对象存储介绍
Cloudflare R2对象存储是Cloudflare推出的一种对象存储服务,以下是关于它的详细介绍:
服务特点
- 零出口费用:R2最大的特色是出口流量免费,即用户从R2存储桶下载数据时,不会产生额外的流量费用。
- S3兼容API:与Amazon S3兼容的API,使得许多适配S3的工具和应用程序可以无缝对接R2,方便用户迁移和使用。
- 全球加速:利用Cloudflare的全球网络,为用户提供数据的加速访问,虽不及国内CDN,但实测白天可达50MB/s。
- 高可用性和一致性:R2提供对数据的强一致性访问,一旦某个PUT操作得到R2确认,未来的GET操作将总是反映该新键/值对。
功能特性
- 两个API:R2有两个API,一个是只能从Workers内访问的In-Worker API,另一个是兼容S3的API,将存储桶暴露在形如bucket.account.r2storage.com的URL上。
- 存储桶操作:用户可以创建、读取、更新、删除存储桶中的对象,支持最大约5TB的对象,每个部分的数据大小限制为5GB。
- 数据分布:R2的存储桶是自动全球分布式的,会将每个对象放置到最接近请求来源的存储地区,目前主要在北美存储数据。
定价与免费额度
- 存储:10GB/月免费,超出部分每增加1GB收费$0.015。
- A类操作:包括上传、列出等,100万次/月免费,超出后每增加100万次收费$4.50。
- B类操作:包括下载、读取等,1000万次/月免费,超出后每增加1000万次收费$0.36。
- 出口流量:完全免费。
使用场景
- 图床服务:由于其免费额度大、出口流量免费以及兼容S3 API的特点,R2非常适合用作个人或小型网站的图床。
- 静态资源存储:可用于存储网站的静态资源,如图片、CSS、JavaScript文件等,并通过Cloudflare的CDN加速分发。
- 数据备份与存档:可以作为数据备份和存档的存储解决方案,利用其高可用性和全球分布的特性,确保数据的安全和可访问性。
使用方法
- 创建存储桶:登录Cloudflare账号,添加支付信息后,在R2对象存储中创建存储桶,选择存储桶名称、位置和默认存储类。
- 配置API:创建API令牌,用于访问和操作R2存储桶。
- 上传和管理文件:可以通过Cloudflare R2的后台界面直接上传文件,也可以使用支持S3 API的工具(如PicList)进行文件的上传、查询、备份等操作。
创建Cloudflare R2存储桶
首先需要注册一个Cloudflare账户,可以在下面的网址注册:
https://dash.cloudflare.com/
进入账户的面板可以在左侧栏看到R2对象存储。
但是想要使用Cloudflare R2存储桶需要绑定一个支付方式。
可以在银行里办理一张支持visa的国际信用卡。
也可以注册一个Paypal个人账户。注册网址如下:
https://www.paypal.com/c2/webapps/mpp/account-selection
绑定好支付方式后,就可以点击创建存储桶,新建一个存储桶。
注意,我们需要选择标准存储类型。因为标准存储类型才能享受免费计划。位置选择亚太,离我们近一点。
这时,我们就有了一个云端的文件存储桶了。在网页端,我们可以直接拖放文件上传,也可以点击选择本地文件上传。
在存储桶中,我们可以启用公共访问链接。这样Cloudflare会为存储桶中的每个文件提供一个速率受限的公共访问链接。
但是不幸的是,官方提供的文件访问路径,国内无法访问。
要想国内也能访问,则需要为新建的存储桶绑定自定义域名。而要为存储桶绑定自定义域名,需要该域名由Clouflare来托管。
我之前在腾讯云上已经购买了一个域名。正好可以用来进行测试。
大家熟知的阿里云,华为云,腾讯云等等国内云服务商的网站上都可以购买域名。有些价格也很便宜。
自定义域名
在账户主页添加自己购买的域名。这里我以在腾讯云购买的域名来举例。其他地方购买的域名,其操作方法是一致的。
注意,添加的域名不需要包含www.
,且只能是一级域名。
然后选择免费计划就可以了。
下一步,Cloudflare会识别出该域名之前的DNS记录。在这个页面,我们可以自行添加或删除DNS记录。
这里简单介绍一下常用的DNS记录类型。
DNS(Domain Name System,域名系统)记录是域名解析过程中的关键组成部分,用于将域名映射到对应的IP地址或其他信息。以下是常见的DNS记录类型及其用途:
A记录(Address Record):
- 用途:将域名映射到IPv4地址。
- 示例:
example.com. IN A 192.0.2.1
AAAA记录(IPv6 Address Record):
- 用途:将域名映射到IPv6地址。
- 示例:
example.com. IN AAAA 2001:db8::1
CNAME记录(Canonical Name Record):
- 用途:将一个域名别名指向另一个域名,即别名记录。
- 示例:
www.example.com. IN CNAME example.com.
MX记录(Mail Exchange Record):
- 用途:指定邮件服务器的地址,用于电子邮件路由。
- 示例:
example.com. IN MX 10 mail.example.com.
NS记录(Name Server Record):
- 用途:指定负责该域名的权威DNS服务器。
- 示例:
example.com. IN NS ns1.example.com.
PTR记录(Pointer Record):
- 用途:将IP地址映射到域名,通常用于反向DNS查询。
- 示例:
1.2.3.4.in-addr.arpa. IN PTR example.com.
SOA记录(Start of Authority Record):
- 用途:提供有关DNS区域的信息,包括主DNS服务器、区域管理员的电子邮件、区域序列号等。
- 示例:
example.com. IN SOA ns1.example.com. admin@example.com. 2022120901 7200 3600 1209600 86400
SRV记录(Service Record):
- 用途:指定特定服务的主机名和端口号,用于服务发现。
- 示例:
_sip._tcp.example.com. IN SRV 0 0 5060 sip.example.com.
TXT记录(Text Record):
- 用途:存储文本信息,常用于SPF(Sender Policy Framework)、DKIM(DomainKeys Identified Mail)和DMARC(Domain-based Message Authentication, Reporting & Conformance)等电子邮件验证。
- 示例:
example.com. IN TXT "v=spf1 ip4:192.0.2.1 ~all"
CAA记录(Certificate Authority Authorization Record):
- 用途:指定哪些证书颁发机构(CA)可以为域名颁发SSL证书。
- 示例:
example.com. IN CAA 0 issue "letsencrypt.org"
DNSSEC记录(DNS Security Extensions):
- 用途:提供DNS数据的完整性和认证,防止DNS劫持和缓存投毒攻击。
- 示例:
example.com. IN DS 12345 1 1 ABCD1234
我们平常用的比较多的是A记录和CNAME记录。
点击继续前往激活,发现Cloudflare提示我们要去域名购买的服务商那里把DNS服务器修改成Cloudflare提供的服务器。
在腾讯云控制台,找到域名注册专题。
点击管理,就可以看到修改域名服务器的地方。
修改好DNS服务器后回到Cloudflare,点击继续。接下来就要等待一段时间,等上述修改操作生效后,我们添加的域名就会处于活动状态。这意味着,我们可以使用该域名来绑定Cloudflare R2对象存储桶了。
我们回到刚才创建的存储桶页面,在设置区域配置自定义域名。这里建议配置一个二级域名即可。比如:images.example.com
等待一段时间,域名就成功链接到创建好的存储桶了。同时,我们也可以在域名的DNS记录中发现域名链接到存储桶的DNS记录了。
这时候我们点开对象存储的文件会发现多了一个自定义域名的访问路径。
现在我们在国内使用这个自定义路径来访问存储桶的文件就可以正常访问了。
到此,云存储已经配置完毕。我们已经拥有了一个免费存储图片的地方。
配置文件访问API
由于我们是想把Cloudflare R2作为图床使用。大多数时候,都不是我们手动上传图片,也不是手动下载图片。而是使用API来上传图片和访问图片的。
接下来,我们来申请管理存储桶的API。
我们申请的API需要读写权限。
务必找个地方保存访问密钥 ID和访问密钥,因为点击完成关闭页面后就无法再重新显示出来了。
这些密钥在后面设置图片上传工具的时候会用到。
设置安全策略
设置缓存规则
选择刚才托管的域名,进入域名配置页面。
由于我们上传好图片后,基本都不会修改文件内容。所以缓存可以设置的久一点。这样即使别人使用了我们的图片链接也不会一直访问Cloudflare R2存储桶而是从本地缓存或CDN缓存中返回,避免了消耗A类操作的次数。
注意,URL设置成存储桶自定义的域名。后面用*
号通配符。
如上图所示,这里添加了三个设置。
缓存级别 – 缓存所有内容
浏览器缓存 TTL – 设置为8小时
边缘缓存 TTL – 一个月(图片文件长时间不会变动,这里设的越长越好)
设置防盗链(可选)
为了防止我们的图片链接被别人使用。可以设置这些图片链接只有在指定的网站才能访问。当别人在其他地方使用我们的图片链接的时候,图片将无法访问。
如上图所示,这里设置为自己的博客网站才可以访问存储桶中的图片。
设置CORS策略(可选)
CORS(Cross-Origin Resource Sharing,跨源资源共享)策略是一种安全机制,用于控制一个域(origin)上的网页如何访问另一个域上的资源。在Cloudflare R2对象存储中,CORS策略用于配置哪些外部域可以访问存储桶中的对象。
什么时候需要使用CORS策略?
- 跨域访问:当你需要从不同的域(例如,一个前端应用在
example.com
,而存储桶在example.r2.cloudflarestorage.com
)访问存储桶中的对象时,需要配置CORS策略。 - Web应用集成:如果你的Web应用需要从客户端直接访问存储桶中的对象(例如,通过JavaScript的
fetch
或XMLHttpRequest
),也需要配置CORS策略。 - API服务:如果你的API服务需要访问存储桶中的对象,并且API服务和存储桶不在同一个域下,也需要配置CORS策略。
如何使用CORS策略?
在Cloudflare R2对象存储中配置CORS策略的步骤如下:
登录Cloudflare账户:访问Cloudflare的控制面板并登录你的账户。
选择存储桶:在R2对象存储部分,选择你想要配置CORS策略的存储桶。
配置CORS策略:
- 在存储桶的设置页面,找到“CORS 策略”部分。
- 点击“添加”按钮来添加新的CORS规则。
- 配置规则,包括:
- 允许的源(Allowed Origins):指定哪些域可以访问存储桶中的对象。可以是具体的域(例如,
https://example.com
)或通配符(例如,*
表示所有域)。 - 允许的方法(Allowed Methods):指定哪些HTTP方法可以用于访问对象,如
GET
、POST
、PUT
等。 - 允许的头(Allowed Headers):指定哪些HTTP头可以随请求发送。
- 暴露的头(Exposed Headers):指定哪些HTTP头可以暴露给客户端。
- 最大年龄(Max Age):指定浏览器可以缓存CORS响应的时间。
- 允许的源(Allowed Origins):指定哪些域可以访问存储桶中的对象。可以是具体的域(例如,
保存配置:完成配置后,保存CORS策略。
测试:在配置了CORS策略后,测试从指定的域访问存储桶中的对象,确保配置正确。
示例配置
假设你有一个前端应用在https://example.com
,你希望从这个应用访问存储桶中的对象,可以配置如下CORS规则:
- 允许的源:
https://example.com
- 允许的方法:
GET
- 允许的头:
Content-Type
- 暴露的头:
Content-Type
- 最大年龄:
3600
(1小时)
这样配置后,只有https://example.com
域的请求可以使用GET
方法访问存储桶中的对象,并且可以发送和接收Content-Type
头。
通过合理配置CORS策略,可以确保你的Web应用安全地访问Cloudflare R2对象存储中的数据。
配置图片上传工具
首先,介绍一款功能强大的图片上传工具PicList。
PicList 是一款功能强大、界面美观的跨平台图床上传与相册管理工具。你可以把它理解为一个终极的图片管理和分发解决方案,特别适合需要频繁在网络上使用图片的博主、开发者、内容创作者和重度笔记用户。
它的核心理念是:将你的图片上传到各种云存储服务(即“图床”),并提供一个统一的界面来管理这些图片,让你能方便地获取可访问的链接(如 Markdown 格式),并直接在文章或代码中使用。
最关键的一点是,PicList 基于著名的图床工具 PicGo-Core 进行二次开发,继承了其强大的插件生态系统,并在此基础上增加了大量原生功能和优化,尤其是在相册管理方面,远超原版 PicGo。
主要功能和特点
PicList 的核心亮点可以归纳为以下几点:
强大的相册管理功能 (核心优势)
- 这可能是 PicList 与其他图床工具(包括 PicGo)最大的区别。它不仅仅是一个“上传工具”,更是一个“管理工具”。
- 你可以在应用内直接浏览、管理已经上传到云端的图片。
- 支持创建/删除文件夹、重命名文件、移动文件等操作,就像在本地文件管理器中一样。
- 支持一键复制多种格式的链接(URL, Markdown, HTML 等)。
- 提供了强大的搜索和排序功能。
广泛的图床支持与插件生态
- 内置支持:默认集成了对主流云存储的支持,如 腾讯云 COS、阿里云 OSS、七牛云 Kodo、又拍云 USS 等。
- 插件扩展:完美兼容 PicGo 的插件生态系统。你可以通过安装插件来支持更多图床,例如 GitHub, Gitee, S3 兼容平台, Cloudflare R2 等等,几乎涵盖了所有主流的对象存储服务。
多功能上传区
- 支持多种上传方式,非常便捷:
- 拖拽文件到悬浮窗或主窗口。
- 通过剪贴板直接上传截图或复制的图片。
- 选择本地文件进行上传。
- URL 地址上传(将网络图片转存到你的图床)。
- 支持多种上传方式,非常便捷:
内置图片处理工具
- 在上传前对图片进行处理,无需使用其他软件:
- 图片压缩:可以配置自动压缩图片,减小文件体积,加快网站加载速度。
- 添加水印:支持添加文字或图片水印,保护你的图片版权。
- 格式转换:例如,可以将 PNG 转换为更小的 WebP 格式。
- 在上传前对图片进行处理,无需使用其他软件:
高度可定制化
- 自定义链接格式:可以根据自己的需求,定制生成的链接格式。
- 快捷键:支持自定义全局快捷键,一键上传剪贴板中的图片。
- 配置文件管理:可以轻松导出和导入配置,方便在多台设备间同步设置。
现代化 UI 和跨平台支持
- 界面使用 Vue 3 和现代化的 UI 框架构建,美观、流畅且易于使用。
- 完全跨平台,支持 Windows, macOS (Intel & Apple Silicon), 和 Linux。
PicList vs PicGo
很多用户会关心它和 PicGo 的关系。简单来说:
特性 | PicGo (GUI 版) | PicList |
---|---|---|
核心引擎 | PicGo-Core | PicGo-Core (基于此开发) |
插件兼容性 | 兼容 | 完全兼容 |
相册管理 | 非常基础,基本没有 | 非常强大,支持浏览、搜索、移动、重命名等 |
内置功能 | 相对较少,依赖插件 | 内置图片压缩、水印等高级功能 |
UI 界面 | 经典界面,更新较慢 | 现代化界面 (Vue 3),更美观流畅 |
开发活跃度 | 社区驱动,GUI 更新较少 | 非常活跃,功能迭代快 |
结论:你可以将 PicList 视为 PicGo 的一个“超级进化版”或“精神续作”。它保留了 PicGo 的核心上传能力和插件生态,同时补足了其最大的短板——相册管理,并加入了更多实用的原生功能。对于新用户,直接选择 PicList 是更好的选择。对于 PicGo 老用户,迁移成本几乎为零。
如何开始使用PicList
- 下载:访问 GitHub 仓库的 **Releases 页面**。
- 选择版本:根据你的操作系统(Windows/macOS/Linux)下载对应的安装包(如
.exe
,.dmg
,.AppImage
)。 - 安装并配置:
- 安装后打开应用。
- 在“图床设置”中,选择你想要使用的图床(如腾讯云 COS)。
- 填入你的配置信息(如 SecretId, SecretKey, 存储桶名称等)。
- 将其设为“默认图床”。
- 开始上传:现在你就可以通过拖拽、快捷键等方式开始上传图片了!
配置PicList
PicList 默认支持ASW S3协议。而Amazon Simple Storage Service(Amazon S3)是AWS最早推出的云服务之一,它提供了一种对象存储服务,通过统一的接口REST/SOAP来统一访问任何数据。S3协议是亚马逊AWS云存储服务的一种协议,它定义了一组用于访问亚马逊AWS S3云存储服务的API。该协议允许用户在云上存储、检索和管理任意类型的数据,包括文本、图像、音频和视频等。S3协议在对象存储行业事实上已经成为标准,提供了对数据(值)的访问,其中数据在S3中以对象名(键)的形式存在。
我们今天使用的Cloudflare R2也支持ASW S3协议。这不就巧了嘛!
配置界面中的AccessKeyId对应的就是刚才在创建API页面中显示的访问密钥 ID。而secretAccessKey对应机密访问密钥。
设定Bucket里填存储桶的名称。设定自定义节点就是为 S3 客户端使用管辖权地特定的终结点,也是国内无法访问的官方提供的文件访问路径前缀。
设定上传路径这里填入{year}/{month}/{md5}.{extName}
。意思是,按年月来存放图片,并且计算图片的md5值来作为图片名称。extName
为图片的后缀名称。
设定Region这里对于Cloudflare R2来说,需要设置成“auto”。
重点来了。设定自定义域名中添加我们刚才绑定到存储桶的自定义域名,比如:https://images.example.com/
。这样图片上传后,会优先返回使用自定义域名访问文件的路径。
现在我们可以拖一个图片到PicList的上传区来测试一下。
为编辑器配置图片上传工具
配置Typora
进入到Typora的偏好配置页面,选择图像配置项。
上传服务选择PicGo(app)。
PicGo路径填写PicList执行文件的路径。默认安装的话大概就是这个路径C:\Users\ZhuanZ\AppData\Local\Programs\PicList\PicList.exe
。用户名替换成你电脑上的。
配置好后可以点击验证图片上传选项测试一下。
配置obsidian
对于obsidian,需要安装图片上传插件(Image auto upload)。
我们可以在社区插件市场上搜索这个插件并免费安装。
然后进入插件配置页面。
Default uploader 选择PicGo(app)。
设置PicGo server upload route
为http://127.0.0.1:36677/upload
。
在PicGo server delete route
中填入http://127.0.0.1:36677/delete
。
具体配置还可以参考PicList的官方说明:
https://piclist.cn/app.html
Ok。现在我们使用这两款工具写文章添加图片的时候,就会自动把图片上传到Cloudflare R2存储桶中,并返回markdown格式的图片访问链接。
顺便提一下,通过以上方法搭建的图床在国内和国外都可以正常访问。