皮皮凛

教程向:使用阿里云对象存储(OSS)搭建静态网站~
想要搭建纯静态网站,最优的选择无疑是对象存储服务。
扫描右侧二维码阅读全文
29
2019/06

教程向:使用阿里云对象存储(OSS)搭建静态网站~

想要搭建纯静态网站,最优的选择无疑是对象存储服务。

简介

大部分IDC商家都有提供对象存储服务,国内的比如阿里云、腾讯云、华为云、七牛云等,国外有亚马逊、谷歌、微软等。

海量、安全、低成本、高可靠的云存储服务,提供99.9999999999%的数据可靠性。使用RESTful API可以在互联网任何位置存储和访问,容量和处理能力弹性扩展,多种存储类型供选择全面优化存储成本。这是阿里云对其对象存储(OSS)服务的描述。

(阿里云写的这段话,其实我也没看懂多少)

简单来说,对象存储服务可以用于储存文件,并且提供上传和下载接口,方便开发者用其来储存云文件。同时也支持直接通过域名访问,所以我们可以用来搭建静态网站
仅仅是搭建静态网站,对象存储无疑是最优的选择。购买云虚拟主机或者云服务器大大增加了成本,因为我们仅仅是静态网站,不需要那么多功能。而且使用对象存储操作简单方便访问速度快可以绑定自定义域名,是专门用于这项功能的。
本文章通过阿里云的服务来介绍如何使用对象存储搭建静态网站。其他商家的配置方法大同小异。

本文使用阿里云为例。另外腾讯云的对象存储提供10G免费月流量和50G免费储存空间,但我更喜欢阿里云一点,而且那点储存及流量费用非常便宜。

开始

前往阿里云官网,注册登录账号等不再赘述了,进入控制台,来到对象存储的控制台。
QQ截图20190629015537.png
如上图所示就是阿里云对象存储控制台了,因为我已经创建过Bucket(存储空间)所以跟大家显示的可能不太一样。

计费标准

存储空间费用(标准类型):0.12元/GB/月
访问流量费用(外网访问):闲时:0.25元/GB,忙时:0.50元/GB
请求费用(所有类型):0.01元/万次

此为国内存储空间按量付费计费标准,海外地域会有略微调整。小型站点建议使用按量付费,大型站点建议购买流量包套餐。点击这里查看详情。

创建Bucket

Bucket就是存储空间。点击左边Bucket列表上的加号或者右边的“创建Bucket”按钮即可创建。
QQ截图20190629211816.png
Bucket名称:这个不能和其他用户的重复所以建议在前面加上自己的id为前缀以免提示名称被占用,比如咱这个pplin-test~
区域:这个按照自己的需求选择即可,如果你的域名没有备案则必须选择海外地域,建议香港
存储类型:我们搭建静态网站,选择标准储存即可。
读写类型:必须选择公共读,不然别人怎么访问进来呢~
其他参数按照默认的即可,不需要更改,除非你有特殊需求。

Bucket 创建成功后,您所选择的存储类型、区域不支持变更。

填写完毕后单击确定按钮即可完成创建。
QQ截图20190629212432.png
页面还提供了“访问域名”,值得关注的是“外网访问”的“Bucket 域名”,这是OSS提供的默认域名,比如我的是pplin-test.oss-cn-shenzhen.aliyuncs.com,这里需要留意一下待会会用到。

上传文件

在列表中选中Bucket后,单击上方的“文件管理”,使用这个很简单方便的文件管理即可完成文件的上传。上传我们的网页文件。
比如我上传个index.html
QQ截图20190629212839.png
上传操作不再赘述,这是傻瓜式操作了。

这个文件管理器依然存在局限性,如果您的网站的目录结构较为复杂,上传后将会丢失目录结构,请使用ossbrowser,这是阿里云OSS提供的客户端,操作文件更加方便且全面。

搭建网站

文件上传好了,现在让这个Bucket可以直接通过浏览器访问。
单击上方的“基础设置”,往下滑找到“静态页面”,将“默认首页”选项内容修改为index.html
当然这个文件名可以根据您的需要进行修改,总之必须要填写一个文件名。
默认404页选项选填,根据自己的需求选择。
QQ截图20190629213457.png
这时我们访问OSS提供的默认域名(比如我的是pplin-test.oss-cn-shenzhen.aliyuncs.com),发现有反应但是是直接将文件下载下来了,这显然不是我们想要的效果。

针对中国大陆、香港地区的 OSS,如果直接使用OSS默认域名从互联网访问OSS上网页类型文件,Response Header中会自动加上Content-Disposition:'attachment=filename;'。即从浏览器访问网页类型文件时,会以附件形式进行下载。

摘自阿里云文档。

所以说如果我们的Bucket在中国大陆以及香港,需要绑定自定义域名才能达到我们想要的效果。

绑定自定义域名

终于到了关键时刻。
点击上方的“域名管理”,单击“绑定用户域名”,填写我们要绑定的域名,比如我的是test.pplin.cn
然后需要修改域名解析,记录类型为CNAME,记录值为OSS默认域名(比如我的是pplin-test.oss-cn-shenzhen.aliyuncs.com)。
修改域名解析需要前往域名DNS服务提供商修改,详细内容不再赘述。假如您的域名使用的阿里云DNS,还支持自动修改解析值,不需要我们亲自动手。
QQ截图20190629215649.png
待解析生效后,访问我们的自定义域名,大功告成!~
QQ截图20190629220351.png

HTTPS设置

虽然说网站已经成功的搭建完毕了,但HTTPS是目前的主流,且可以提高安全性,推荐配置SSL证书以启用HTTPS。
当然,这不是必须的。

在“域名管理”的列表中,可以看到“HTTPS 证书”这一列显示“未上传”,说明该域名还没有配置SSL证书。
单击域名这一行右边的“证书托管”链接,弹出证书设置页面。
.pem文件格式证书内容复制进第一个框中,将.key文件格式证书内容复制进第二个框中。
若下载证书提示"服务器类型选择证书",啧选择NGINX即可。
如果您没有SSL证书,单击“申请签发证书”即可获取免费的SSL证书。
QQ截图20190629220831.png

证书上传完毕后使用HTTPS访问,证书安全有效。
QQ截图20190629231947.png

CDN加速访问

这里使用CDN的目的主要是加速访问速度,毕竟我们是静态网站,全部缓存到CDN上面也不是不可以,对于静态资源来说简直是Awesome!
CDN具体的定义请查询百度,这里简单说下。IDC商家部署很多CDN节点,会将我们的静态网站资源缓存到各个CDN节点上,访客可以就近寻找CDN节点来获取资源内容,从而整体提升访问速度。

使用本功能,域名需要备案。当然并不是说只有备案才能使用CDN服务,只是本文介绍的是国内CDN,所以必须要备案才能使用国内CDN。

配套服务,本文使用阿里云CDN作为例子。
在“域名管理”的列表中,可以看到“阿里云 CDN 加速”这一列显示“未配置”,说明该域名还没有配置阿里云CDN服务。单击“未配置”即可跳转到CDN设置页面。
配置信息他会默认帮我们选择好,不需要多费心。
QQ截图20190629234447.png
QQ截图20190630005745.png
返回CDN域名列表,配置速度不会那么快,等配置完毕后会出现CNAME地址。
然后更改域名解析,CNAME,解析值为CDN域名列表提供的CNAME值。
QQ截图20190630010030.png
待域名解析生效,代表CDN配置成功了。
还可以根据自己的需求继续配置CDN策略已达到最佳效果。

请注意:假如之前给OSS自定义域名配置了HTTPS证书,那么挂上CDN后需要在CDN控制台重新配置HTTPS证书
如下图所示配置
QQ截图20190630010650.png
QQ截图20190630010736.png

总结

总体来说,这个配置过程并不是很困难。对象存储可以用于很多方面,搭建静态网站只是其中的一部分。低廉的价格和高速的访问大大的提升了体验效果。还是值得一试的~

Last modification:June 30th, 2019 at 09:07 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

2 comments

  1. 孤夜行者

    相比之下,那些只需登录就能创建博客的官方网站的自由度 是局限在官方特定框架下的。活动性不高,但试用于简便、方便、利存储。
    但这种傻瓜式操作系统就像是被局限范围的沙盒游戏,毫无意义可言。(不过用起来是真的爽,没技术也能装)

    个人域名创建的博客可以说是技术佬的乐园。只需在特定构架下自由编辑,设置资源存储大小,设置域名年限(没钱的别想了)
    不过优于这种所创建的技术范围,我们吃瓜群众也只远观而不可亵玩焉…。得益于自由度,个人信息的存储与查找也异常方便,就和加强版云存储一般。
    总之,,我们搬砖的不懂这些。
    (╯°A°)╯︵○○○

  2. 松鼠大大

    写的很细哈,(ฅ´ω`ฅ)用过阿里云的,国内体验还行的,就是怕被大佬特殊照顾