使用阿里云OSS让你的个人网站起飞
4 分钟
1734 字
标签 # oss # 存储服务 # 阿里云

前言

相信不少个人网站的带宽都不会太高，大多都是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;
    }
}



}

  * 保存之后就成功开启图片压缩裁剪服务了。

## 感想 {#toc-9}

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

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

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

如果你有相关问题或好的意见，欢迎留言，谢谢各位阅读转自[Sanakey][3]
署名 - 非商业性使用 - 禁止演绎 4.0