通过使用OSS+CDN搭建私人图床进行图片资源加速
本文最后更新于 347 天前,其中的信息可能已经有所发展或是发生改变。

本文将会介绍阿里云OSS使用上的一些经验,以及如何使用OSS+CDN来搭建一个HTTPS图床。


准备工作

申请OSS

阿里云官方快速入门: https://help.aliyun.com/document_detail/31883.html?spm=a2c4g.11186623.6.573.1be56ab3t4RPWB

OSS产品页: https://www.aliyun.com/product/oss


总的来说OSS的申请非常的简单,但是有几点是我们需要注意的。

首先,我们需要在控制台创建一个Bucket,这个Bucket就是我们的储存桶。因为我们是用来搭建图床的,所以读写权限一定要设置为公共读。区域自然是选择国内,越近越好。储存类型要选择标准存储,也就是LRS。后面如果要购买资源包的话就得根据这些选项来买,否则资源包不会被使用到。

分配域名

申请结束后我们可以在控制台看到Bucket域名,这个域名非常重要,但是太过冗长。我们需要另外给这个Bucket分配一个简单的域名。

我们需要前往你所购买的域名的控制面板,找到域名解析并添加一条CNAME记录,来指向你的Bucket域名。分配域名还有个原因就是,不分配域名的话,直接用 Bucket域名访问图片链接会直接跳转到下载,而不会正常的访问图片。

当然,也不用着急添加CNAME记录,因为在后面我们会为OSS套上阿里的CDN来优化访问以及降低资费。添加CNAME记录的操作可以等后面套CDN的时候再做。

申请SSL证书

由于我的博客使用了SSL,所以里面的图片元素也必须使用SSL。我们可以申请免费的SSL证书来给OSS使用,以保证我们的图片外链是以HTTPS开头的。

申请渠道很多,阿里云腾讯云百度云这些国内知名的云平台都可以申请到,过程不多赘述。

PS: 也可以使用阿里云CDN的一键签发功能。

开始部署

Lsky Pro

Lsky Pro(兰空)是一个免费开源的图床项目,它可以轻松部署在WEB端提供简单方便的服务。

官网: https://www.lsky.pro/
项目地址: https://github.com/wisp-x/lsky-pro
使用手册: https://www.kancloud.cn/wispx/lsky-pro

这个图床搭建起来还是很容易的,只是有几个坑需要注意一下。一是记得开启PHP的fileinfo拓展,二是将网站的运行目录改为./public,三是记得写Rewrite规则。 这三点都是比较容易踩的坑 。

详细的安装使用流程可以参见作者的使用手册,该手册从兰空的安装配置到它支持的各种对象储存服务的使用都有详细的介绍说明。

CDN

使用CDN主要有两个好处:

1、利用CDN的回源流量费用和CDN本身的流量费用都低于OSS的外网流出费用来降低我们的流量成本。OSS 的源文件会被CDN分发到全国的服务器节点上,用户访问时,访问到的是CDN自动给用户分配的最近的节点数据,并不会访问到OSS本身的数据,从而节约了OSS的外网流出流量费用。

2、因为全国大部分地区都有阿里的CDN节点,CDN又会给用户分配最近的节点,所以可以明显提升用户的访问速度。

阿里云CDN产品页: https://www.aliyun.com/product/cdn 
AliyunCDN官方快速入门: https://help.aliyun.com/document_detail/27112.html

我们要用前面给OSS准备的域名来开通CDN服务,开通时记得选用443端口,并上传你的SSL证书开启HTTPS。

  注意!申请国内的CDN服务是需要域名备案的!   

配置CNAME

在CDN的控制面板添加完域名后我们需要在我们的域名供应商那里添加CNAME记录,来指向阿里的CDN。这样我们才不会访问到OSS本身的数据。

添加完记录后大概10分钟左右CDN就会生效。这个时候,我们的图床系统就基本上搭建完成了。

访问优化

OSS静态页面

以我为例,图床得到的外链是这个样子的: https://oss.haor233.com/2020/03/11/720386501791e.png

前面的oss.haor233.com是域名,后面的结构可以自由在兰空的后台里更改。

如果不给OSS设置静态页直接访问OSS域名的话,那么我们会看到并不美观的XML文件页。所以可以开启静态页面功能,将美观的静态页上传到Bucket中并设置首页。这样直接访问域名时就可以看到上传的静态页了。

给图床套CDN

这一步可做可不做,如果你搭图床的服务器带宽确实小的话,那图片传多了在后台加载缩略图可能会比较慢,那么再给图床套一层CDN就会好很多。

资源替换

External Media without Import

External Media without Import是一个Wordpress插件,它可以将图片外链加入WP的媒体库,这样就可以实现WP图片资源的替换了。

WordPress的官方插件链接: https://wordpress.org/plugins/external-media-without-import/

其他

OSS与CDN资费

OSS官方价目表: https://cn.aliyun.com/price/detail/oss
CDN官方价目表: https://cn.aliyun.com/price/detail/cdn

我的OSS: https://oss.haor233.com/  
图床: http://pic.haor233.com/  (暂不对外开放注册) 

写的并不是特别详细,不能说是教程,只是简单记录一下昨天折腾的流程。其实从一开始就踩了很多的坑,搞了很久才终于搞好。写这篇文算是纪念一下我浪费掉的时间。

评论

  1. Ghost_chu
    Android Chrome
    2年前
    2022-3-29 0:00:39

    都跑的是Wordpress了,装个插件直接把媒体库搬到OSS走CDN上不是更好

    • 椎名 晴樹
      博主
      Ghost_chu
      Windows Edge
      2年前
      2022-3-29 0:02:55

      搭个通用的图床主要用途还是在其他地方,比三方的更快更好用

发送评论 编辑评论


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