【干货|解决方案】如何优化网站的访问速度?使用「OSS对象存储+iPic管理+Typora写作」带来一篇博客从创作、发布到访问的全流程“丝滑体验”

问题描述

这是一个关于个人网站图片显示的问题,打开笔者的个人网站(ferryxie.com),如果你没有翻墙,会发现很多图片加载的特别慢,让人看文章看得恼火!

这个问题笔者在意很久了,但因为这是一个很麻烦的问题,现在也没有很合适的解决方案,就一直都拖延着没有解决。但最近花了两天把网站上的文章归档分类、加上封面、适应移动端阅读体验、还有页面美化等工作都做了,距离让人较为满意的站点,还剩下两个大问题:

(1)解决因使用境外图床服务器和CDN,导致的访问速度极慢

(2)站点SEO,让搜索引擎可以检索到;

由图片存储问题导致的访问速度过慢是亟待解决的第一问题,这两天笔者搜索阅读了无数解决方案,在群内打扰了数次大佬站长,还电话咨询了七牛云、阿里云客服一堆问题,终于找到了较为满意的解决方案。

如果你也是使用的境外服务器,也苦恼于图床的问题,那么这篇文章绝对可以帮助你!

文中提到的方案都是笔者这几天亲自试验踩坑记录而成(昨晚弄到了凌晨四点多…),最后发现基于稳定性和速度这两个前提,不考虑第三方图床工具,而是借用成熟的服务商进行图床搭建,小网站不需要考虑太多,直接上大厂的 OSS 服务即可。

基础知识

如果没有太多网络服务相关的基础知识,你可能很难理解为什么这是一个大痛点,以及为什么要使用接下来的解决方案。为了提供更友好的阅读体验,笔者在此提供一些相关的基础知识。笔者之前也写过一篇涉及博客系统基础概念的文章,可以参考:七个阶段告诉你一个分布式系统是如何从小变大的

什么是图床服务器

图床服务器有什么用,图片放自己的服务器上不可以吗?

图床说白了就是图片在线存储服务器,提供把图片存放到网上并且引用到其他网站公开使用的服务,主要是用来节省本地服务器流量的。

一般用图床的,都是图片之类的静态文件非常多,把图片存储到第三方CDN,除了加快图片访问速速,还可以降低服务器的存储压力,后续网站迁移扩容就不受影响了。

商业的图床一般都有全国各地的节点,图片加载速度比较快,适合有大量图片需要存储的用户。如果没有太多图片的话放自己服务器也是没问题的。但需要注意的是,图片消耗带宽资源比较多。


首先,如果网站域名是境内的,且访问量很小,一天也就几百一千,而且网站也没有几张图片,那可以直接存在本地服务器。但如果你的网站域名是境外的,那么如果面向大陆的访客,即使图片不多,存在本地服务器上的图片也会很大影响加载速度,那就需要境内的服务器来存放这些图片,然后给用户提供访问了,这就是图床。

但是如果网站是专门的存放大量且高清的图片站呢?这时如果你的服务器没有顶配,你肯定不会把图片放服务器吧?或许可以选择将图片存到云空间中,这个网盘就相当于一个变相的图床;或者你也可以再买个服务器存放这些图片,那这个服务器就是图床服务器。

但如果网站访问量很高,一天几万之类的,这时候需要考虑的就不是服务器空间够不够大,而是请求的高并发,光是请求html文件的链接就处理不过来了,服务器根本没有多余的资源去读取图片了,所以就把图片存另一个服务器,给主服务器减轻压力,又需要使用到图床了。

笔者使用图床主要是因为,服务器是香港地区的轻量应用服务器,不仅配置很低,存储空间不够,而且在境外,直接加载图片对境内的访问者体验很差。

域名、服务器与备案

按道理现在云服务这么普遍,按照上面所说的,租一个服务器在境内的服务器,绑定自己的域名,从而搭建一个自己的图床不就解决问题了吗,使用七牛云、阿里云或者腾讯云完成此类服务都很便宜,对于已经备案的域名来说确实是如此简单。 但对于没有备案的域名,要想在境内正常加载网页,就没这么简单了。

如果说今天这篇文章所说的这些麻烦有一个“罪魁祸首”,那笔者想它就是“备案”。(BS…

什么是备案?域名备案(DNICP,Domain Name Internet Content Provider),根据中华人民共和国信息产业部第十二次部务会议审议通过的《非经营性互联网信息服务备案管理办法》条例,域名备案目的就是为了防止在网上从事非法的网站经营活动,打击不良互联网信息的传播。在中华人民共和国境内提供非经营性互联网信息服务,应当办理备案。未经备案,不得在中华人民共和国境内从事非经营性互联网信息服务。

所以国内的域名是需要备案的,备案其实是备案服务器,这样管理单位就能知道你的网站在哪里托管,在哪台服务器运行…正因为这个规定,如果你的域名,或者说是服务器没有在国家备案,那就没法使用七牛云、阿里云、又拍云等服务商提供的存储空间来绑定自己的域名,从而实现自己搭建的图床服务器。

既然要求备案,那就遵守国家规定吧…但香港服务器做为境外服务器,是备不了案,这就从先天上限制了国内用户的访问,如果不是为了搭建机场以及便宜,也没有太多面向境外访问的需求,笔者建议还是买境内的服务器吧,虽然国内域名的备案也是特别麻烦,没有十天半个月审批不下来…

OSS和CDN

什么是OSS

接下来的图床搭建过程会涉及到两个关键的概念:OSS和CDN。

OSS(Object Storage Service)即对象存储服务,说白了就是服务商有很多的服务器资源,从其中分离出一些服务器的存储空间卖给你使用。具体的概念可以参考这里:科普贴:什么是对象存储 – 陈大黑的文章 – 知乎

img

什么是CDN

而CDN(Content Delivery Network,内容分发网络)这个技术最初的核心理念,就是将内容缓存在终端用户附近。内容源不是因为离得远导致访问慢么?那我就在靠近用户的地方,建一个缓存服务器,把远端的内容,复制一份,放在这里,距离变近了不就访问更快了吗?

所以,具体来说,CDN就是采用更多的缓存服务器(CDN边缘节点),布放在用户访问相对集中的地区或网络中。当用户访问网站时,利用全局负载技术,将用户的访问指向距离最近的缓存服务器上,由缓存服务器响应用户请求。 参考:到底什么是CDN?

动图

OSS+CDN的原理

而用OSS和CDN来搭建图床的原理是这样的:(参考:国内自建图床指南

OSS 前面说是用来存文件的。OSS 都有对应的域名,文件保存在 OSS 后,会生成URL链接,可以通过 URL 下载这个文件。

但是直接通过 OSS 下载的成本很高,价格十分昂贵,所以我们需要 CDN 来分发,节约成本。在阿里云,可以把 CDN 绑定到 OSS, 通过 CDN 去访问这个文件时,如果是首次访问,CDN 会从 OSS 取得这个文件,这个过程叫「回源」,之后再访问会直接从 CDN 读取。

原理图

关于图床的所有解决方案

说了这么多,回到我们的初始问题:境外服务器因为没有备案域名,在境内的访问很慢到底应该怎么办呢?笔者展开搜索,目前所有解决方案基本都是在这5种种选择:

  1. 将图片放在本地服务器
  2. VPS自建
  3. 白嫖大平台的图床
  4. 网盘挂载
  5. 大厂OSS

将图片放在本地服务器

如果网站使用的是Wordpress,可以批量上传到媒体库,生成外链,再复制到文章中。但这种方法很不方便,要打开仪表盘边拖拉上传边复制链接,有没有可以像Typora1+uPic2一样边写作边自动复制粘贴生成外链的工具呢?

还真有,可以使用兰空图床(lsky)3这款开源工具搭建一个本地图床,再使用picgo4进行快捷键搭配,这就相当于将图床搭建到了本地服务器,这个项目现在看来对于境内服务器而言很靠谱,毕竟这可是十年之约的官方指定图床!

关于搭建教程,可以查看兰空图床(Lsky Pro)安装教程(无宝塔+LNMP)

结论:这种方案优点是免费且方便,但是对服务器性能要求高,且笔者的香港服务器尝试了本地图床后,发现境内访问速度还是不高。

VPS自建

如果是网站是面向境内用户的话,那这个方法只适用于域名已经备案的情况,自建就是将域名绑定到服务商提供的服务器(提供OSS和CDN服务)上,这样就相当于搭建了属于自己的图床服务器,文件可以生成自己域名前缀的URL。

具体可以看前文OSS和CDN部分,此处不再赘述,搭建教程可以参考:国内自建图床指南

结论:这种方案对于有备案域名的小伙伴来说是首选,但笔者没有备案的域名,尝试了使用七牛云东南亚的OSS搭建后,发现境内访问完全不行,也pass。

白嫖大平台的图床

很多大平台都会给作者提供图床服务,所以有很多人白嫖这个资源,比如在今年之前很多人使用「picgo+gitee+typora」来配置图床,但这些平台也会设置防盗链,清理外链,像今年Gitee禁止外链后,原先将Gitee作为图床的这些图片外链就都访问不了,想再转移也很麻烦。

出了Gitee,Github是一个更稳定的平台,但在国内的速度实在太慢,但有一个很牛逼的CDN:JsDelivr做为分发,速度也很快。所以使用「Github + JsDelivr」作为图床的方案是首先。但今年jsDelivr 备案被吊销后,这些外链又需要转移了。(此事件可以参考:jsDelivr 备案被吊销后,网页静态资源何去何从

结论:所以白嫖大平台的图床也不是办法,说不定什么时候就挂了。这些大平台都这么不稳定,更不用说各种新起的新平台,说不定什么时候就跑路了,所以也放弃这条路。

网盘挂载

笔者还在这个写的很好的文章(参考:个人图床的最终抉择)看到这么一条评论,说也可以使用OneDrive来作为挂载盘。这就是笔者上一期文章(参考:利用OneManger+Onedrive+阿里云服务器(VPS)搭建5T大容量私有云,实现服务器磁盘扩容+可公有也可私有的个人网盘)提供的思路吗!看我的网盘 pan.ferryxie.com !

image-20220804011240810

想想都很美,但是,一是笔者这里使用的是淘宝购买的Onedrive,特别不稳定,也不知道哪天就被官方给封了;二是这个网盘目前也还没中转流量,境内的访问速度也很慢,等有了自己的账号再折腾这个;三是咨询了站主群内的大佬们,大家也都说这种方式不稳定。

结论:不稳定,pass。

大厂OSS

考察了这么多方案,直接上结论:如果跟笔者一样对图床的稳定性和速度都有比较高的要求,那么这套方案是你最好的选择!

因为想要的优点都有:

  • 安全:大厂跑不了;
  • 稳定:加了CDN加速后,访问速度会提升;
  • 便宜:如果没有被恶意刷流量,一个月就几块钱;
  • 方便:不用域名备案;可以使用图床管理软件,自动上传下载;

OSS和CDN目前都有免费的,也有付费的,如前所说,两者一般是搭配使用的:

  • 付费:腾讯的COS、阿里的OSS、华为云的OBS等
  • 免费:Backblaze + Cloudflare

关于Backblaze(美国的云存储和数据备份公司) + Cloudflare(美国内容分发网络及分布式域名解析服务公司)这个对境外访问来说很友好的OSS+CDN方案,笔者在这里暂且不谈,有需求请自行Google。

既然选定了方案,那接下来就开始动手解决搭建。

最终:阿里OSS+iPic

阿里云OSS配置及购买

目前国内主要从三大厂中选择:腾讯的COS、阿里的OSS、华为云的OBS。操作步骤和其他方面都差不多。

笔者最终选择的是阿里的OSS,原因很简单,价格其实相差不多,都不贵,但由于笔者的服务器和域名都是阿里的,图床也一起,都在一个控制台里操作方便很多。(但对于功能,腾讯的COS有流量封顶,一定程度上可以防止恶意刷流量)


好了,下面步入正题。

登录阿里云,在产品 -> 存储 -> 中选择对象存储 OSS,开通服务,然后右上角进入阿里云控制台,左边列表中选择对象存储 OSS。

image-20220804213751657

阿里的OSS有两种计费模式,一种是流量计费,这是最直接方式,如果流量不大的情况下,直接往账户充点钱就完事了;另一种是购买资源包,这也是笔者使用的付费模式,点击右边的购买资源包。

image-20220804214246062

首先,购买这个1年9块钱40G的标准存储包,但这只是买到存储空间,也就是说9块钱,可以在1年内往OSS里存储40G的东西。

image-20220804214926894

注意这里选择LRS还是ZRS其实营销不大,只是存储方式的不同,官方介绍如下:

标准存储(Standard)提供标准存储-本地冗余(LRS)和标准存储-同城冗余(ZRS)两种数据冗余存储方式。

  • 标准存储-本地冗余(LRS)

采用数据冗余存储机制,将每个对象的不同冗余存储在同一个可用区内多个设施的多个设备上,确保硬件失效时的数据持久性和可用性。

  • 标准存储-同城冗余(ZRS)

采用多可用区(AZ)机制,将用户的数据分散存放在同一地域(Region)的3个可用区。当某个可用区不可用时,仍然能够保障数据的正常访问。

如果跟个人网站的访问量不大, 也只用来做一般文章的图片存储,每月有5G的免费下行流量够用了。就不需要再购买「下行流量包」和「回源流量包」了。

image-20220804221556501

但如果网站的访问很大且使用了CDN服务,就还有两个资源包需要买,一个是下行流量包,一个是回源流量包。

前面所购买的标准存储包,只能抵抗存储所占的空间,在资源包抵抗范围内,不产生额外的存储费用。即:把文件放OSS,会占用存储空间,存储包覆盖这部分费用。

下行流量包是指:也可以叫下载流量包,将图片等文件资源存储到OSS上,OSS会生成一个可以直接访问的公网地址,直接在公网访问这个地址就会产生下行流量。

回源流量是指:如果在OSS套了CDN,访问CDN没用命中,CDN去问OSS要文件,文件从OSS流向CDN服务器,回源流量包覆盖这部分费用。如果不开启CDN,可以不买回源流量包。(CDN是独立的产品,可以通过OSS绑定的域名页面进行开通,您可以到阿里云cdn 控制台开通CDN 功能。)


购买完了OSS(和CDN),接下来就可以开始创建存储块了。

创建存储块和AccessKey

点击左侧菜单的 Bucket 列表,创建一个新的 Bucket,一个 Bucket 可以理解为一个单独存储仓库,这个仓库可以用来存放任何文件,不只是图片。

image-20220804222112872

根据提示填写名称,配置。注意:Bucket 名称要全网唯一,读写权限改为公共读。

image-20220804222249370

接下来需要获取阿里云账户 AccessKey ID 和 AccessKey Secret,这样就可以使用 iPic来管理仓库了。

官方这里建议在当前账户创建一个 RAM 子账号,使用子账号的 AccessKey 更加安全,笔者这里就不使用子账号了(具体操作可以看阿里云的官方帮助:阿里云:如何获取AccessKey ID和AccessKey Secret阿里云:创建RAM用户。)

鼠标点击右上角头像,选择AccessKey管理,点击开始使用子账号

image-20220805001930502

如果还没用户,就添加一个新用户。创建成功后,点击添加权限,选择OSS存储权限即可。

Xnip2022-08-04_2229

image-20220805002309177

Xnip2022-08-04_2234

这样就创建成功了,保存好信息。

配置iPic

打开iPic的偏好设置(Window平台可以使用PicGo,配置是一样的),配置阿里云OSS存储的地址信息。Bucket填存储块的名字(前面你自定的,唯一的),然后分别填Key的信息。

网址前缀填入带http: + Bucket域名//或https://+ Bucket域名(在OSS控制台可以看到Bucket域名和https是否支持的信息)(如果不知道怎么填,也可以先点击应用,再在Typora随便上传一张图片,然后在OSS后台的文件管理看看这张照片的前缀是什么再填入)。

最后点击验证,如果通过就配置完成了。

Xnip2022-08-04_2235

image-20220805003818558

可以上传所有本地图片。在阿里云OSS后台可以看到所有上传的文件和流量服务信息。

image-20220805004311623

笔者到这一步,就完成了OSS搭建,可以愉快地在Typora中写作了。下一步需要做的,就是将个人网站中的笔者原先存储在个人网站中的外链替换了。

批量更新所有外链

首先,使用qshell从七牛云下载所有图片(下载安装qshell工具->配置conf文件->绑定account->下载文件,具体可以查看七牛云官网)

Xnip2022-08-04_0006

将下载下来的文件夹上传到阿里云OSS

image-20220805005452350

批量替换文章中的外链将原先文章中的外链头缀https://ferryxie.com/wp-content/uploads/2022/iqiniu/替换为新的外链头缀
https://images-ferry.oss-cn-shenzhen.aliyuncs.com/iqiniu/,使用到的WordPress插件是Better Search Replace

image-20220805010135095

这样就完成了所有外链的替换了,笔者的网站这样做完现在访问速度都快了很多!几天的努力终于解决了这个问题,希望也给大家一些启发。

参考


  1. Typora 一款Markdown 编辑器和阅读器 ↩︎
  2. uPic(upload Picture) 是一款Mac 端的图床(文件)上传客户端可将图片、各种文件上传到配置好的指定提供商的对象存储中 ↩︎
  3. Lsky Pro – 只属于您自己的云上相册。https://www.lsky.pro ↩︎
  4. PicGo 不仅是图片上传工具,同时也提供简易的图床相册管理功能。PicGo 开源且免费,跨平台支持Windows、macOS、Linux 系统,使用极为简单。 ↩︎

评论

  1. Windows Chrome
    已编辑
    2 年前
    2022-8-06 11:40:58

    大佬的文章写的不错,可是大佬有没有想过,如果域名没有备案,那么是否有这种情况可以作为一种解决方案呢?即便uniCloud+阿里云CDN的解决方式不是那么稳定(我指的是免费的计费计划),但至少可以作为一种加速静态资源的方式存在。

    • 博主
      寒山
      Macintosh Chrome
      2 年前
      2022-8-06 23:19:15

      谢谢分享啊,我原先还没有发现这种方法,刚看了一下,阿里云的CDN没有特别便宜,你分享的方法里面免费的CDN看着不错,如果无备案域名境内需要加速的话,确实可以考虑使用。我目前的个人网站用的华南OSS,没有套CDN,这几天测试下来速度还可以,等之后如果需要的话再试试,再次谢谢你的分享。

  2. Windows Chrome
    2 年前
    2022-8-07 12:03:36
    1. 外链替换直接操作数据库就可以,最好的方法是在上传插件用Hook实时修改而不是直接修改数据库内容。
    2. OSS直接开启外网访问是绝对不可行的,OSS没有应用于HTTP流量的监测策略,很容易出现一晚上被刷几万张单的情况!OSS + CDN 也很容易挨打,阿里云CDN目前提供的几个防护策略都不是很好用,不是很推荐。
    3. 图片存储的服务器和源站建议尽可能不要放在同一台,高峰期会有带宽出口问题。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇