前言

相信不少个人网站的带宽都不会太高,大多都是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://XXX.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 流量,应该也够用了。

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