图床
# 13.图床
我们的博客难免少不了图片,图片管理是一个不小的难题。如果我们将图片全部放到我们自己的服务器上,那么带宽就基本上会被图片所占满了,这会导致网站加载很慢(特别是图片加载很慢)
# 什么是图床
为了解决图片的问题,市面出现了很多公司,提供图床服务,就是将图片上传到他们的服务器,然后返回一个图片链接给你,这样我们就可以在博客中引用这个图片,我们的服务器只需返回前端HTML和JS等小文件,加载速度很快。并且,图床服务的背后使用了一些CDN等技术,可以使得图片的访问速度很快
我们在选择图床的时候,请慎重选择免费图床,毕竟众多免费图床网站注册条款里有禁止商用这一条,哪天关闭了图片外链或者商用,势必给用户带来很大的麻烦,比如我们博客的所有图片突然都看不到了!很多免费图床总是好景不长,因为做图床是要投入的,比如服务器、带宽、人员、技术投资、市场宣传等,完全免费了,这些小站可能自己都难存活,所以总是不能长久使用!
也有人使用Gitee作为图床,但Gitee突然加上了防盗链功能,导致很多人的博客的图片都失效了:突发,Gitee 图床废了_程序员鱼皮的博客-CSDN博客_gitee图床 (opens new window)
# 图床的概念和常见图床
对于数字和文本类型的数据,比方说名字和电话号码相关的信息,我们通常会用数据库去存储(例如MySQL、Oracle等)。
但对于图片这样的文件对象,存储层不太可能再用数据库,应该改用专业的对象存储,比如亚马逊的S3(Amazon Simple Storage Service,简单存储服务,因为是三个S开头的单词,所以叫s3),或者阿里云的oss(Object Storage Service)。
在对象存储中,有几个概念需要了解:
桶:可以理解为一个现实生活中的桶,里面存放的就是文件了。可以有多个桶,例如这个桶用来存放图片当作图床用,另一个桶用来存放视频当网盘用等等……
对象:就是一个个文件对象了,这个对象包括三个部分:Key、Data、Metadata。**Key:**可以理解文件名,是该对象的全局唯一标识符(UID)。Data也就是用户数据本体。这个不用解释了。
Metadata叫做 元数据 ,它是对象存储一个非常独特的概念。元数据有点类似数据的标签,标签的条目类型和数量是没有限制的,可以是对象的各种描述信息。
举个例子,如果对象是一张人物照片,那么元数据可以是姓名、性别、国籍、年龄、拍摄地点、拍摄时间等。
在传统的文件存储里,这类信息属于文件本身,和文件一起封装存储。而对象存储中,元数据是独立出来的,并不在数据内部封装。
元数据的好处非常明显,可以大大加快对象的排序,还有分类和查找。
目前提供图床服务的有很多:
- 对象存储OSS_云存储服务_企业数据管理_存储-阿里云 (opens new window)
- 对象存储服务OBS官网_海量安全高可靠_数据云存储解决方案-华为云 (opens new window)
- 对象存储数据处理_COS数据处理_数据处理方案-腾讯云 (opens new window)
- 对象存储 Kodo_云存储_海量安全高可靠云存储_oss - 七牛云 (opens new window)
- 对象存储BOS_云存储_分布式存储_数据湖存储-百度智能云 (opens new window)
- 对象存储服务NOS_高性能云端存储服务_网易蜂巢-网易数帆 (opens new window)
- ................
对象存储这个技术,不同的云厂商有不同的英文缩写命名。例如阿里云把自家的对象存储服务叫做OSS,华为云叫OBS,腾讯云叫COS,七牛叫Kodo,百度叫BOS,网易叫NOS……五花八门,反正都是一个技术。
在机缘巧合之下,我用过一段时间的七牛云,因此后续也是使用的七牛云了,这里也是以七牛云为例(其他图床类似)
# 七牛云入门
先去官网七牛云 | 一站式场景化智能视频云 (opens new window) 注册一个七牛云账号,然后去对象存储 Kodo_云存储_海量安全高可靠云存储_oss - 七牛云 (opens new window)里,添加对象存储功能。
新建空间的意思就是新建一个存储空间,例如我之前新建了一个空间peterjxlblog用来当我博客图床
注意,新建的空间只有一个临时域名,如果要长久使用得有一个正式的域名,例如我图床的域名是image.peterjxl.com。
然后我们点击文件
就可以上传文件了:
然后点击选择文件,就会弹出选择文件的对话框。是否要上传覆盖按需选择
例如我上传了一张图片,上传文件后,就可以获得其访问链接:
然后访问该链接,就可以看到图片了
博主本人新建了一个blog目录,专门用来存放博客的图片;还创建了其他目录,用来存放其他项目的图片。是否创建目录看自己的需求。
# 绑定域名
七牛云默认提供的测试域名是会过期的,要想长久使用,得绑定一个域名。
这里我随意输入了一个域名:
输入域名和证书
然后在我的云服务器DNS解析记录里,加上七牛云提供的CNAME,
然后去到我的域名解析商控制台里,配置这个cname,参考如何配置域名的 CNAME - 七牛开发者中心 (opens new window)
这样用户访问的我图片image.peterjxl.com/1.jpg,就会通过CNAME重定向到七牛云的链接上去,然后获取图片。
配置完后,DNS生效后就可以在域名管理里看到状态是成功的:
需要注意的是,如果你的存储空间是私有的,那么图片的外链会有很多的参数;例如:
如果去掉jpg后面的参数,是访问不了的,这是七牛云的规则。
设置成公有的,图片才不会有这么多参数
设置完后:
# 使用HTTPS
由于我的博客使用了HTTPS,如果图床没有使用的话,会不安全,因此也得加上HTTPS。
为此,我们需要先购买一个域名证书。由于我之前已经购买过证书了,因此后续有些步骤我仅仅是演示用,没有实际购买等,具体可以参考:博客图床最佳解决方案_隔壁郑同学的博客-CSDN博客 (opens new window),这里简单提提怎么买
打开证书管理:七牛云 - 证书管理 (opens new window),点击购买证书
一般来说选个最便宜即可,我们不是企业型,用不上那么贵的
由于我之前已经购买了证书,这里就不继续往下演示了
# 图片上传工具
我的博客是基于Markdown的,如果我们每次上传图片都需要登录到控制台并上传,就太慢了,因此市面上出现了很多图片上传工具,能实现的效果是这样的:将图片拖拽到工具里,就能自动上传到对象存储里,并且获取图片链接,极大简化了我们的操作。
目前常见的工具有:
- PicGo (opens new window):支持Windows,Mac和Linux,基于Electron开发,支持多种图床上传
- iPic (opens new window):只支持Mac
博主使用的是PicGo,我们先下载,然后打开配置:
Bucket就是存储桶的意思,一般就是你新建的空间的名字
访问地址就是绑定的域名
设定存储路径:比如在存储桶里,我还分了几个目录,专门用一个blog目录用来存放博客的图床,如果你没有设置,可以不写存储路径
至于怎么配置,可以参考文档:配置手册 | PicGo (opens new window)。至于怎么获取AK和SK(AccessKey和SecretKey),要去七牛云 - 密钥管理 (opens new window)里获取。或者在右上角--密钥管理
配置完PicGo后,就可以实现将图片拖拽上传到图床的效果了,方便了不少
# Typora+PicGo
由于经常需要上传图片到图床,为了方便我们写文档,Typora(一款Markdown编辑器)也在2022年左右集成了PicGo,可以实现在Typora里,对着图片右键,就可以上传图片
配置方法:打开Typora的设置,进入图像选项卡部分:然后设置上传服务即可
更多可以参考Typora官方文档:Upload Images - Typora Support (opens new window) (需科学上网)
# 上传图片并修改Markdown文件
对于我来说,我通常是在一个思源笔记(一个支持Markdown语法的笔记软件)里写好文章,然后导出为Markdown,再上传到博客的,如果博客的图片比较多,那么一个个上传也是很麻烦的……为此博主曾打算自己写一个软件,可以一键将Markdown文件里的所有图片都上传到图床,并且自动修改Markdown文件里的图片链接,这样Markdown文件就可以直接发布到博客上了,非常方便。
但是在动手造轮子之前,先在GitHub上搜索了有没人造好了轮子,还真发现了不少……所以还是不自己写了,真香😛。以下是我搜到的:
- Markdown文件图片自动上传七牛云并更新文件_子午僧 (opens new window):也是博主目前在用的,直接在Markdown文件上右键--upload即可,非常方便,为此我还特地fork项目并加了一些说明,Peter-JXL/foureggs (opens new window)
- markdown-img-icexmoon · PyPI (opens new window):文档齐全,一个Python包,暂未使用过
- free-free/iclouder: markdown (opens new window):支持水印等功能,还未使用过
- lhui/qiniuClient: 云存储管理客户端 (opens new window):功能齐全,看上去很不错。
- img-go: Markdown图片辅助工具 (opens new window) :功能齐全,看上去很不错。
如果你觉得上述的项目都不符合自己的需求,想自己写,也不难,七牛云官方文档里提供了各种编程语言上传文件的接口。直传文件_API 文档_对象存储 - 七牛开发者中心 (opens new window)
网上也有不少人自己写的:node+express 简单的实现文件上传 到 七牛云存储中 - 掘金 (opens new window)
# 防盗链和白名单
互联网并非一片净土,只有是网站就有被攻击的风险,而被攻击最直接的损失就是金钱和时间上的损失,例如图床是有流量限制的,如果一直有人盗刷,就会造成流量耗尽,图床用不了,可以参考小林coding的博客:我的网站第一次被攻击了 (opens new window)
为此,我开启了防盗链功能,博客里的图片只能在博客里看到,如果你复制到其他网站上,是看不到的,当然这也有缺点,就是不方便了,比如博主在本地运行博客,也是看不到图片的;并且也不方便其他人转载;
但如果实在想要在其他网站显示你的图床上的图片,可以加白名单,这样就可以显示了(注意白名单还得加上七牛云,不然在七牛云里也看不到图片,为此我还特地提了个工单咨询过 😅,就离谱)
接下来说下七牛云里如何开启防盗链和配置白名单:打开存储空间,然后进入域名管理,然后点击下域名
然后在访问控制里就可以配置是否开启防盗链和白名单了
开启白名单:
# 七牛云日志下载
可以将访问的日志下载下来分析,较少用(我是用来分析防盗链的时候才用到)
下载日志地址:https://portal.qiniu.com/cdn/log (opens new window)
或者通过API来下载日志,参考文档:https://developer.qiniu.com/fusion/api/1226/download-the-log (opens new window)
CDN日志的下载方式,以及日志中字段的含义参考文档:https://developer.qiniu.com/fusion/manual/3847/cdn-log-fusion (opens new window)
# GitHub防盗链的问题
博主曾尝试在GitHub上显示七牛云的图片,即使加了白名单也不行;后续经过咨询一些朋友和分析日志,GitHub获取图片的方式可能是后台直接通过curl等工具获取的,因此refer是空的,无法通过白名单的方式获取,而Gitee的话则加上Gitee.com即可,CDN的日志对比如下:
116.21.31.192 MISS 104 [20/Feb/2023:21:51:50 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-summary.jpg HTTP/2.0" 200 43824 "https://gitee.com/peterjxl/TimeRecorder" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
140.82.115.62 MISS 1 [20/Feb/2023:21:04:54 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-label.jpg HTTP/1.1" 403 351 "-" "github-camo (325d2008)"
2
3
可以看到GitHub的refer是空的,因此无法在GitHub上显示加了防盗链的图床图片。
解决办法:将图片上传到Git项目里,然后Markdown文件里引用相对路径即可。
如果是Gitee的话,没有这样的问题。
# 七牛云CDN刷新
七牛云使用了CDN,也就是缓存,因此如果将旧的图片删除,上传一个新的图片的话,由于缓存没更新,访问的时候还是旧的图片,因此得刷新CDN缓存,才能看到新图片。缓存是有时间期限的,即使不刷新,过一段时间也会自动更新(具体多久得咨询七牛云了)
刷新方法:打开七牛云 - 刷新预取 (opens new window),然后输入要刷新的文件路径。
直接刷新整个目录也可以,这样即使目录里的图片超过500个,也会全部刷新。
如果刷新后还是看到旧图片,可以尝试更换浏览器看看是否因为缓存问题。
参考:刷新预取_使用指南_CDN - 七牛开发者中心 (opens new window)
# 小结
如果遇到什么使用上的问题,可以电话咨询七牛云;
如果是什么技术上的问题,可以发工单:
如果你使用GitHub Pages或者Gitee Pages,那么直接使用Git项目作为图床也是可以的。