Sanakey

使用阿里云OSS让你的个人网站起飞
前言相信不少个人网站的带宽都不会太高,大多都是1M,还不是因为没钱。 加载网站时通常都难以忍受那个令人捉急的速度。...
扫描右侧二维码阅读全文
26
2019/11

使用阿里云OSS让你的个人网站起飞

本教程基于handsome主题版本5.3.1编写

前言

相信不少个人网站的带宽都不会太高,大多都是1M,还不是因为没钱。 加载网站时通常都难以忍受那个令人捉急的速度。
这也是不少小水管网站站长的痛处,接下来我就教大家利用阿里云的OSS服务,让你的小水管网站起飞。

阿里云OSS简介

阿里云对象存储服务(Object Storage Service,简称 OSS)为您提供基于网络的数据存取服务。使用 OSS,您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。

说得通俗点,阿里云OSS就是一块网络硬盘,你把文本、图片、音视频之类的静态资源文件放在这块磁盘。

你自己的服务器只提供网页内容之类的动态资源,通常一个网页文本量只有十几KB到几十KB不等。加上OSS自带cdn服务与图片压缩服务,这样网站的速度将得到大幅提升。

具体使用方式

开通并配置 OSS 服务

首先你与要按照官网教程开通OSS服务,创建存储空间,生成你的专属Bucket域名。具体教程请点击这里

你可以根据自己的需求选择是否开通资源包。

  • 在对象存储服务界面,点击你刚才创建的存储空间。然后在基础设置里找到读写权限,设置为公共读
  • 基础设置里找到镜像回源,依次点击设置->创建规则,你将看到这个页面:

镜像回源设置
按照图中的步骤配置好你的网站地址,点击确认。

设置修改handsome主题配置

在后台handsome主题设置外观界面找到速度优化->本地图片云存储(镜像)加速配置项,填入你配置好的Bucket域名如:
https://xxxx.oss-cn-shanghai.aliyuncs.com | ALIOSS,点击保存就大功告成了。

进阶配置

如果你比较懒,下面的可以不用看,但是为了你的钱包,建议还是看看。

开启防盗链

为了防止他人盗用 OSS 数据,你需要开启防盗链设置。

  • 在对象存储服务界面,点击你刚才创建的存储空间。然后在基础设置里找到防盗链,添加你的域名白名单,建议把阿里云控制台与你的Bucket域名都添加进去。每行一个域名,通过回车键隔开。
    你的Bucket域名最好加进去,否则可能出现设置跨域后依然无法加载字体文件的问题。
  • 允许空 Referer设置为 不允许为空
//阿里云域名
https://oss.console.aliyun.com/
//你的Bucket域名
https://xxxx.oss-cn-shanghai.aliyuncs.com/  
//你的网站域名
https://keymoe.com/  

配置跨域设置

为了解决 JavaScript 的跨域访问问题,你还需要以下配置:

  • 基础设置里找到跨域设置,点击创建规则,配置域名白名单
  • 勾选你允许的 Methods,一般选择GET就够了,具体配置按你自己的需求来。
  • 允许 Headers设为access-control-allow-origin: *,保存。

跨域设置

使用图片压缩裁剪服务

为了进一步加快访问速度,你还可以使用图片压缩裁剪服务

  • 在后台handsome主题设置外观界面找到速度优化->云存储选项配置项,勾选为文章中的图片自动转换合适的大小和格式
    handsome 5.3.1这里有个bug还需要处理,需要修改主题原文件,注意备份。
  • handsome主文件夹的libs文件夹,找到Utils.php,搜索启用了图片缩放,我这里是419-453行,把原文件改为下面的代码
if (!($width == 0 && $height == 0) && @in_array('0',$options->cloudOptions)){//启用了图片缩放 TODO:优化这个缩放

    if (trim($addOn) == ""){
        if ($cdnType == "UPYUN"){//又拍云
            $addOn .= "!";//分隔符
        }else if($cdnType == "ALIOSS" || $cdnType == "QINIU"){//阿里云和七牛云
            $addOn .= "?";//分隔符
        }
    }
    if ($height == 0){//根据宽度尺寸进行缩放
        if ($cdnType == "UPYUN"){
            $addOn .= "/fw/$width";
        }else if ($cdnType == "ALIOSS"){
            $addOn .= "x-oss-process=image/resize,w_$width";
        }else{//七牛云
            $addOn .=  "/imageView2/2/w/$width";
        }
    }else if ($width === 0){//根据高度尺寸进行缩放
        if ($cdnType == "UPYUN"){
            $addOn .= "/fh/$height";
        }else if ($cdnType == "ALIOSS"){
            $addOn .= "x-oss-process=image/resize,h_$height";
        }else{//七牛云
            $addOn .=  "/imageView2/2/h/$height";
        }
    }else{
        if ($cdnType == "UPYUN"){
            $addOn .= "/fwfh/".$width."x".$height;
        }else if ($cdnType == "ALIOSS"){
            $addOn .= "x-oss-process=image/resize,m_lfit,h_".$height.",w_".$width;
        }else{//七牛云
            $addOn .=  "/imageView2/2/w/".$width."/h/".$height;
        }
    }
}
  • 保存之后就成功开启图片压缩裁剪服务了。

感想

至此,阿里云的OSS服务就基本配置好了,再次打开你的网站,是不是起飞了?

本篇教程主要是些基本配置,想要服务器访问速度更快,还有不少可以优化的地方,但往往就会更花钱。加带宽太贵,这个OSS服务价格相对而言就划算多了,一般的个人网站每个月可能就几块钱,我想这几块钱应该还是在大部分人的可接受范围内的。

如果你想白嫖到底,可以去看看又拍云的联盟服务,每月 10GB 存储空间 + 15GB 流量,应该也够用了。

如果你有相关问题或好的意见,欢迎留言,谢谢各位阅读。

Last modification:November 26th, 2019 at 03:13 pm
如果觉得我的文章对你有用,请随意赞赏

18 comments

  1. Reburn Google Chrome 84.0.4147.89 Windows 10

    怎么会弄不到质量高、带宽猛的服务器呢?你应该是大学生吧?成年的话可以去工商银行app申请一张visa双币卡,要校园版的,一般都给过的。然后你就可以拿着这张卡嫖谷歌云了,一年300美金赠金如果只是跑个博客绰绰有余。带宽是国际虚拟主机中应该是T1的吧。最重要的是,这张卡可以反复白嫖。假如1年过去到期了,你还可以再去注册一个新的谷歌账号,银行卡绑定之前的继续嫖,可以一直白嫖下去。
    我自己的服务器是双核4g带宽至少100m

  2. 穷游佬 Google Chrome 84.0.4147.105 Windows 10

    学习了。。o(////▽////)q

  3. 冰梦ice Edge 84.0.522.28 Windows 10

    咱把cdn+oss关了...
    加上之后有时候速度还不如本地服务器...QAQ(oss发送请求时间超长...不知道为什么...)
    好在源站服务器带宽比较大...

    1. Sanakey Google Chrome 83.0.4103.97 Windows 10
      @冰梦ice

      搞不懂,cdn+oss正常情况下,应该是比直接访问要快很多才对。

      1. 冰梦ice Edge 84.0.522.28 Windows 10
        @Sanakey

        呜呜呜 ...
        用oss的速度跟源站差不多(换字体前)...在1s以内 ...算上正常的网络波动...可以说是忽略不计了(?)...
        全站CDN速度还是受限于源站速度...区别不大...

        1. Sanakey Google Chrome 83.0.4103.97 Windows 10
          @冰梦ice

          oss提速的主要点还是静态资源。我是1M的小水管,没上oss前,初次进入首页加载完图片等静态资源得花上30秒以上,上了oss后一般10秒内了。

          1. 冰梦ice Edge 84.0.522.28 Windows 10
            @Sanakey

            现在动态资源多...如果源站链路不行靠cdn和oss也带不起来呜...
            咱用的是AzureHK,带宽很大国内延迟也才50ms左右(虽然流量超贵QAQ)...用oss的区别就不大了...

            1. Sanakey Google Chrome 83.0.4103.97 Windows 10
              @冰梦ice

              我这种穷人只买得起小水管。土豪,我们做朋友吧!

              1. 冰梦ice Edge 84.0.522.28 Windows 10
                @Sanakey

                呜呜呜...如果不是因为咱用的是me,uk,live这种小众域名不能备案...咱才不会去用海外服务器呢...

  4. 233 Google Chrome 81.0.4044.138 Windows 10

    亲测6.0版本修改Utils.php出现return错误,并且用阿里云代理图片之后排版是乱的

    1. Sanakey Google Chrome 81.0.4044.92 Windows 10
      @233

      这篇文章是基于handsome 5.3.1版本写的,6.0没有测试。

  5. 青城 ViVO Android 9

    不显示图片了

    1. Sanakey Google Chrome 80.0.3987.132 Windows 10
      @青城

      什么图片不显示了?

      1. 青城 ViVO Android 9
        @Sanakey

        https://0m1.cn
        你看一下
        我按照提示来的

  6. 皮皮凛 Google Chrome 79.0.3945.88 Windows 10

    我以前是用阿里云OSS+阿里云CDN,现在用jsdelivr。
    将静态文件放到Github的公开repo里,然后用jsdelivr加速访问。
    jsdelivr是融合CDN,在中国也有很多CDN节点,是真正的白嫖+全球极速体验

    1. Sanakey Google Chrome 78.0.3904.97 Windows 10
      @皮皮凛

      感谢你的推荐,之后有时间我也试试

  7. zeruns QQ浏览器 6.2 Android 9

    直接用cdn不就好了吗,有些cdn每个月都有一定量的免费流量吧

    1. Sanakey Google Chrome 78.0.3904.97 Windows 10
      @zeruns

      确实可以,我这里只是提供一种可选方案。听说又拍云和百度云免费的都不错,不过我没用过。

Leave a Comment

lamu.png