极具诱惑!阿里云OSS+CDN引爆超酷图床潮流!

如何用阿里云OSS搭建图床

前言

最近使用阿里云的OSS服务搭建了一个图床,但是里面水太深了,踩了好多的坑,网上也没有一篇完整的教程,对菜坤选手太不友好了。我把自己踩过的坑记录下来,希望能够帮助到跟我一样菜的同学。

为什么需要图床?

我们存放任何文件都会有一个文件路径,比如我们平时在桌面的路径为:D:\图片.jpg。但是这只能是在本地上访问,要是在浏览器上输入这个地址的话,别人是访问不到的。

那么我们该如何让别人可以访问到我们的图片文件呢?这时候,图床闪亮登场!

抽象来说,可以把图床看作我们在互联网上的存储空间,大家都可以通过url地址来访问到这个地址空间,而不仅仅局限于本地访问。

比如大家可以访问https://img.pidanxia.ink/image/gege.jpeg就可以访问到我家哥哥的图片。

创建OSS Bucket

我们需要阿里云的OSS服务作为我们的图床载体,对象存储 OSS

我们需要先创建一个OSS Bucket

  1. 地域:如果有ECS服务器的话,最好跟ECS服务器保持一致(原因后面解释)

    这里地域的Endpoint要记一下,后面配置PicGo的时候要用到

  2. 存储类型一般来说选标准存储就够了

  3. 读写权限要改为公共读,其他可以保持默认

    image-20230716202705133

  4. 购买存储空间

    新建了一个Bucket之后,我们还得购买存储空间。我们可以买一个资源包

    image-20230716220004784

    一般来说这样的配置就够用了,一年也才9块钱而已

给Bucket配置域名

这一步,如果有ECS服务器的同学建议先看看下面的使用ECS反向代理OSS的内容,以免重复配置

如果没有ECS服务器或者不在乎流量费用的同学可以直接按照这个步骤来~

如果按照使用ECS反向代理OSS的步骤来,就不用看接下来单元的步骤了,直接按照使用ECS反向代理OSS单元的步骤走就可以了

二者选其一就可以

图床的话用二级域名就好了,一般来说主域名的话都是留给网站使用的

想要配置一个二级域名,你得有一个主域名(已备案的)

  1. 打开对象存储OSS–>Bucket 列表–>点击刚刚创建的OSS Bucket

  2. Bucket配置–>域名管理–>绑定域名

    image-20230716224209449

  3. 填写二级域名,记得打开自动添加 CNAME 记录,然后点击提交

    不需要提前创建二级域名,在这里填写好想要创建的二级域名名称后,会自动创建

    image-20230716224342762

    比如我的主域名是xxx.com,我想添加的二级域名是pidan.xxx.com。这里就填pidan.xxx.com

提交完成后我们可以看到域名已经成功绑定了,但是我们还没配置阿里云 CDN 加速HTTPS 证书

image-20230716224931837

配置阿里云CDN加速

在上图中,点击未配置就会跳转到相应的页面

  1. 跳转出来的页面我们都只是选择默认配置就好,不用做任何修改,然后点击下一步

    image-20230716225545180
    image-20230716225634794

  2. 点击一键配置

    image-20230716225942336

  3. 点击打开CNAME配置向导–>阿里云DNS控制台

    点击我们的顶级域名

    按照下面给出的值修改原来的CNAME值

    刚才我们配置二级域名的时候打开了自动添加 CNAME 记录

    所以会自动生成一条CNAME解析记录

    但我们现在要配置CDN加速,刚才自动生成的CNAME解析就要修改了

    image-20230716230202206
    image-20230716231351370

  4. 记录值要换成上面给出来的记录值,其他不用修改。然后点击确认

    image-20230716231750210

  5. 然后我们回去点击点击查询看看配置有没有生效

    域名DNS的CNAME解析记录生效可能需要5-10分钟,查询不成功的可以等一等再试一次

    image-20230716232226783

    看到CNAME已生效字样后,点击完成

  6. 配置成功后,我们打开阿里云的对象存储OSS–>Bucket 列表–>点击刚刚创建的OSS Bucket

  7. Bucket配置–>域名管理,打开CDN 缓存自动刷新

    image-20230716233406222

至此,阿里云CDN加速配置成功

配置HTTPS 证书

首先我们需要在阿里云申请一个免费的SSL证书,然后绑定到我们的二级域名pidan.xxx.com上,然后才能进行下面的操作

  1. 打开阿里云的CDN–>证书服务–>配置证书

    image-20230716233548169

  2. 配置证书

    证书来源:云盾(SSL)证书中心

    证书名称:选择刚刚创建好的证书编号,然后点击下一步

    关联域名中选择全部证书域名,然后找到我们的二级域名,选中,点击确认

    image-20230716233902976

CDN使用https访问也是需要收费的,虽然也很便宜

但还是推荐买个资源包比较划算

这里推荐买静态HTTPS请求包,一年时间10,000,000次访问40块钱

打开阿里云CDN–>用量查询–>资源包管理–>购买资源包

至此,证书配置完成~

配置OSS防盗链

这里可以配置也可以不配置,看个人选择

注意:

如果配置了CDN加速的话,就不要在OSS配置防盗链,直接跳到配置CDN防盗链

简介: 防盗链是指通过一些措施,避免非法用户在未经授权的情况下获取到存储在OSS中的资源。阿里云OSS的防盗链设置对于保护数据安全具有重要的意义。如果没有防盗链设置,那么非法用户可以通过获取OSS中的资源链接,直接访问和下载数据,这将导致用户数据泄露、流量被盗等问题。通过设置防盗链,用户可以控制谁能够访问他们存储在OSS中的数据,避免敏感数据被非法获取,提高数据的安全性和可靠性。因此,阿里云OSS防盗链的重要性不容忽视,用户应当根据自己的需求合理设置防盗链,保护数据安全。

  1. 打开阿里云对象存储,选中我们的Bucket,Bucket配置–>数据安全–>防盗链,点击开启防盗链

    image-20230716234154705

  2. 白名单 Referer里要填入你想要放行的白名单就可以了

    比如你的网站,你的二级域名为pidan.xxx.com,那么你可以加上:*.xxx.com

注意:

这里有个小坑,如果你开了防盗链的话,记得把阿里云的网址也加上

否则你放在OSS中的文件将没有办法在阿里云预览,如图:

image-20230716235213015

要解决这个问题,我们只需要在防盗链的白名单 Referer中加上*.console.aliyun.com即可,如图:

如果白名单 Referer有多个url,则用换行隔开

image-20230716235359272

配置CDN防盗链

配置了CDN加速的不要在OSS里配置防盗链!!!

  1. 进入阿里云的CDN–>域名管理–>点击二级域名

  2. 访问控制–>Referer防盗链–>修改配置

    image-20230717005203100

  3. 配置Referer防盗链

    Referer类型:白名单

    规则:填入你想要放行的白名单的url就可以(可参考配置OSS防盗链

    记得加上*.console.aliyun.com

    重定向URL:可不填

    高级配置:勾上允许通过浏览器地址栏直接访问资源URL忽略scheme

    点击确定

到这里,我们的图床就已经搭建好了!有ECS服务器或者不在乎流量费用的同学可以不用看使用ECS反向代理OSS部分的内容了~直接跳过这部分


使用ECS反向代理OSS

只有ECS和OSS在同一地域,才能使用ECS内网访问OSS!!!

这也是前面为什么说如果有ECS服务器的话,Bucket地域最好跟ECS服务器保持一致的原因

使用阿里云的OSS是要收费的,前面我们买了40G的资源包,但这只是代表你在OSS中拥有了40G的存储空间而已

使用外网访问资源也是要付费的,虽然收费不贵,但是积少成多呀~

针对这种情况,给出两种解决办法

  1. 购买资源包
  2. 通过在ECS实例上配置OSS的反向代理,实现通过固定IP地址访问OSS的存储空间

通过ECS反向代理OSS,走的是ECS的流量,是内网访问。所以是不收费的

原理大概就是:

通过一个域名绑定ECS服务器主机,然后访问这个域名的时候,通过nginx反向代理ECS服务器就会把链接转到OSS的内网链接,是直接通过ECS内网访问的。

简单来说,就是你访问的是ECS服务器,ECS服务器又来访问OSS;而我们之前是使用我们自己的电脑(或者说是外部的电脑)直接访问的OSS

内网访问不用经过外网,就不会产生下行流量,所以就不会产生消费

内网访问有一个弊端,就是ECS的带宽被占用了,速度会相应变慢

但是我觉得对于访问量小的网站来说,这点速度无伤大雅


那接下来,就来看看怎么使用反向代理吧~

配置二级域名

这里跟上面的直接给Bucket配置域名不同,这里配置的域名是绑定ECS主机的,所以要提前配置好

  1. 打开阿里云的域名控制台,然后域名列表,点击要创建二级域名的主域名,然后点击域名解析

    image-20230716213308039
    image-20230716213436487

  2. 点击添加记录,

    记录类型:A

    主机记录:想要添加的二级域名

    比如我的主域名是xxx.com,我想添加的二级域名是pi.xxx.com。那么主机记录就填pi

    记录值:ECS的外网ip地址

    image-20230716214100727

宝塔快速配置反向代理

自己一点点配置nginx的话要修改很多东西,比较繁琐而且不熟悉的话很容易出错

这里推荐使用宝塔快速配置,既方便又省事

宝塔的安装教程

  1. 在宝塔面板中,选中网站–>添加站点

    image-20230717010721287

  2. 编写站点资料

    域名:就写刚刚配置好的二级域名

    备注:可以自己写

    根目录:会自动生成不用修改

    PHP版本:选中纯静态

    其他的按照默认配置不用动,点击提交

    image-20230717011905887

  3. 提交了之后点击创建好的站点,选择反向代理–>添加反向代理

    image-20230717012150052

  4. 找到Bucket的内网访问地址

    打开阿里云的对象存储OSS–>Bucket列表–>点击对应的Bucket 名称

    点击概览,往下滑找到访问端口,记住这里的ECS 的经典网络访问(内网),待会要用到

    image-20230717012734289

  5. 填写反向代理内容

    要开启代理

    目标URL:填入上一步的ECS 的经典网络访问(内网)的URL,要在前面加上:https://

    发送域名:会根据填入的URL自动生成,不用修改

    点击提交

    image-20230717012949112

  6. 配置SSL

    宝塔面板点击SSL,配置证书

    开启强制HTTPS:,然后填入阿里云的证书密钥(KEY)证书(PEM格式)

    打开阿里云的数字证书管理服务–>SSL证书–>免费证书–>找到自己对应的证书–>下载Nginx类型证书

    image-20230717013306027

配置阿里云CDN加速

这一步也会跟上文的配置阿里云CDN加速有所不同

  1. 打开阿里云的CDN–>域名管理–>添加域名

  2. 填写业务信息

    加速域名:填注册好的二级域名

    业务类型:图片小文件

    image-20230717014604382

  3. 填写源站信息

    点击新增源站信息

    源站信息选择IP,

    IP:填写ECS的外网IP地址

    端口:443

    记得!记得!端口是443!!443!!

    点击确定

    image-20230801150155356

点击下一步

然后接下来的步骤可以参考上文的配置阿里云CDN加速,操作一模一样

配置HTTPS 证书

参考上文的配置HTTPS 证书,内容、操作一模一样

配置OSS防盗链

参考上文的配置OSS防盗链,内容、操作一模一样

配置CDN防盗链

参考上文的配置CDN防盗链,内容、操作一模一样

看到这里,使用ECS反向代理OSS已经完成啦~!

在配置的过程中,我遇到了很多很多的坑,自己搞不定,期间咨询了阿里云的在线工程师。

在这里实名表扬阿里云的工程师,非常有礼貌而且很有耐心!就算我问了一些白痴问题也会很耐心很有礼貌的一一解答~

踩坑点

我把我踩过的坑都罗列出来,有些是我自己摸索的,有些是咨询了阿里云工程师之后才解决的,希望对大家能有帮助

1. F12暴露了端口号

通过宝塔面板配置好反向代理后,可以访问到资源,但是在控制台中,暴露了我的真实ip和端口号:Remote Address: xxx.xxx.xxx.xxx:443

原因:因为我之前出了点小问题,所以删掉了CDN加速,而我的域名是直接解析到的我ECS服务器上的,所以才会暴露了端口号

解决方法:重新添加CDN域名


重新添加CDN后,还是会暴露我的端口号

原因:

固定cdn节点访问http://…… 正常 ,但访问https报错。

是因为CDN要访问https需要开启https。

解决方法:

参考 从CDN域名中配置下证书,然后域名解析到cdn的cname 就可以了


添加了SSL证书之后还是暴露IP地址

原因:解析生效需要时间的,一般本地ldns有缓存,可能得半个小时左右,解析才会生效。

2. 使用url访问图片资源的时候,会直接下载而不是在线浏览

原因:直接请求oss的时候,oss有限制会导致强制下载 使用自定义域名访问的时候,理论上就不会强制下载了 如果使用自定义域名还是强制下载,可能是文件的content-type不对

阿里云的工程师用17ce 探测到大部分监测点都是可以解析到cdn的,部分监测点还是解析到我服务器的,还是dns缓存导致的

解析到我服务器访问的时候有Content-Disposition: attachment 这个响应头,所以是强制下载的,解析到cdn的话就没有这个响应头了 ,所以可以直接打开

解决方法:

稍等一会,等CDN解析生效

3. 报301 Moved Permanently

原因:因为我源站有http跳转https,cdn使用80回源,默认是http,这种情况下就有可能导致我这种301重定向过多的现象

解决方法:

把cdn中的源站端口改成443,然后从cdn中执行 目录刷新,刷新 https://……(我的图床目录)

把cdn中的源站端口改成443,这样回源就走https了,就不会有301了

可以从cdn中的https配置那开启http强制跳转https

4. 403 Forbidden

配置了OSS防盗链后,访问资源的时候变成了403 Forbidden了

原因:使用cdn的情况下,不要从oss中添加防盗链,建议从oss侧删除防盗链配置,cdn这边添加防盗链 因为cdn是有缓存的,如果访问的时候命中缓存,不会回源,oss侧配置的防盗链不生效的

解决方法:cdn配置防盗链参考


取消了OSS的防盗链,在CDN中配置了防盗链。然后也是403

原因:通过F12查看到,referer请求头是 https://xxx.com/但是我配置的防盗链中的值是 *.xxx.com,这个只能匹配上二级 三级域名等,匹配不到一级域名

解决方法:把xxx.com(主域名)加入到防盗链白名单中


配置PicGo和Typora

配置PicGo

PicGo,是一个开源的上传工具,可以帮助我们更方便地上传图片到图床上

首先我们需要创建一个阿里云的权限控制用户

为了安全起见,一般来说我们很少说一个用户赋予全部权限的

都是需要用阿里云的到什么功能,然后创建一个子用户,赋予相对应的权利

  1. 打开阿里云的RAM控制访问–>身份管理–>用户–>创建用户

    image-20230717104614526

  2. 填好登录名称显示名称,然后选择OpenAPI调用访问,点击确定

    image-20230717105244474

  3. 千万要记好AccessKey IDAccessKey Secret!复制下来粘贴到小本本上

    因为这两个值就在这里出现一次,以后就找不到了~

    后面配置PicGo的时候要用到这两个值

    image-20230717105535517

  4. 返回用户界面,找到刚刚创建的用户,点击添加权限

    image-20230717110125673

  5. 在搜索框搜索“OSS”,然后找到并添加管理对象存储服务(OSS)权限,点击确定–>完成

    image-20230717110242069

  6. 回到我们PicGo界面的图床设置–>阿里云OSS

    设定KeyId设定KeySecret:填写刚刚的AccessKey IDAccessKey Secret

    设定Bucket:填写Bucket 名称

    设定存储区域:填写注册Bucket时候的Endpoint

    如果刚才没有记下来的话可以重新走一下创建Bucket的步骤看一看Endpoint值

    注意:如果你的Endpoint值是oss-cn-guangzhou.aliyuncs.com,这里只需要填oss-cn-guangzhou

    需要去掉后缀.aliyuncs.com

    设定存储路径:可以自己根据自己的情况来填写

    设定自定义域名:填写刚刚创建的二级域名

    记得带上https://

    设定网址后缀:可不填

    我一般是用来区分这个图片从哪里上传的

  7. 点击确定

  8. 打开PicGo设置,下滑找到时间戳重命名上传后自动复制URL

    image-20230717113448150

PicGo配置完成~!

设置Typora

  1. 打开Typora,文件–>偏好设置–>图像
  2. 插入图片时选择上传图片
  3. 上传服务选择PicGo(app),PicGo路径选择PicGo安装路径的PicGo.exe文件

image-20230717112648628

设置好这些后,在Typora粘贴图片的时候,就可以直接把图片上传到图床了

不过也有一个不好的地方,写文章的时候难免会一张图贴了之后觉得不合适又删掉了,

但是每次粘贴到Typora的图片都会上传到图床里,就算你删掉了图片,也只是删掉了本地的图片,

就算在PicGo的相册里删除了图片,也只是删除了本地记录,图床上的资源并不会删除,

想要删除资源只能登陆阿里云到OSS里面手动删除

这样会造成资源浪费~

创作不易!转载请注明作者及文章链接或作者博客链接——
- 作者:pidanxia
- 链接:https://pidanxia.ink
(链接可为:**文章链接**或者**作者博客链接**)

评论

  1. 帅小伙
    10 月前
    2023-9-08 22:16:43

    博客的上下滑动体验起来不是很舒服啊,老是会自己跳一段距离

    • 博主
      帅小伙
      10 月前
      2023-9-09 17:07:34

      是用的平板吧😂我设置的那个下拉模糊好像跟平板端不太兼容,网页端就不会

  2. Enndfp
    10 月前
    2023-9-28 22:54:15

    请问配置CDN加速提示““A”记录和“CNAME”记录有冲突,请暂停或删除现有的“CNAME”记录后重试”怎么弄

    • 博主
      Enndfp
      10 月前
      2023-9-28 23:41:42

      域名解析中,A记录和CNAME同一个记录值只能存在一个,要么是A,要么是CNAME。你可以先暂停两个的其中一个。如果要用CDN的话,可以先暂停A记录的解析

      • Enndfp
        pidanxia
        10 月前
        2023-9-29 0:11:07

        我现在只开了一个img.xxx.cn的A记录,记录值是外网ip,使用反向代理,代理的是ECS 的经典网络访问(内网)的Bucket 域名,为什么没用啊

        • 博主
          Enndfp
          10 月前
          2023-9-29 9:04:52

          按理来说应该是没有问题的,你对比一下前面的步骤看看是不是哪一步配置错了或者漏了~

          • Enndfp
            pidanxia
            10 月前
            2023-9-29 10:09:18

            用反向代理那么桶还要配置域名吗,同一个二级域名,配CDN占用一个解析,那同一个域名就不能配了,那怎么通过域名访问到ecs

          • 博主
            Enndfp
            10 月前
            2023-9-29 10:55:47

            比如二级域名是img.pidanxia.ink,配置反向代理的时候,主机记录为:A,记录类型为:服务器IP;到后面配置CDN加速的时候,会修改主机记录为:CNAME,记录类型为配置CDN时给出的值,主机CDN加速中填写的源站信息是填的服务器IP

  3. Enndfp
    10 月前
    2023-9-29 13:45:50

    博主,又来麻烦你了,用cdn加速oss,是买静态资源包吗,那产生的流量费用呢?又要另外算吗,请问你是怎么弄的,谢谢啊

    • 博主
      Enndfp
      10 月前
      2023-9-29 16:20:53

      使用CDN是要额外收费的,在不被攻击的情况下日常使用消耗的流量很小,不购买流量包也没事(正常使用一个月不到几块钱),当然也可以购买流量包划算点~CDN记得要设置封顶流量,否则会被盗刷,我之前不懂就被攻击了导致损失小600块钱😭

发送评论 编辑评论


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