背景介绍

  1. 网站访问的原理

    与网站相关的关键字大致有:域名,DNS解析,CNMAE解析,CDN,回源等等。用户侧通过在浏览器输入网址(域名),由DNS服务解析出后端的IP,浏览器访问IP,获取静态文件和动态数据

    示意图如下:

    网站访问示意图

    根据示意图可以明显得出,想要优化网站的响应速度,注意力应当集中在步骤2和步骤3上。

  2. OSS介绍

    OSS中文名为对象存储服务,其实现了通过HTTP协议传输文件,文件的容灾存储,文件的元数据存储等等功能。

  3. CDN介绍

    CDN是网站速度优化的最常见方法,其只针对静态资源有效。其实现原理为利用CDN厂商在多个地方的备份存储,实现就近访问,该备份存储定期访问源站,回源率是一个衡量CDN性能的重要指标。

传统建站

传统的网站建设方案,遵循上图。其后端服务部署在ECS上,静态资源托管到CDN厂商。用户访问的时候,静态资源从CDN就近获取,动态数据则直接请求源站,也正是由于该特性,网站一般都会通过加载动画来演示页面的呈现。

很明显,该建站方案的短板在于回源的问题上,因为后端服务只有一个,当用户从远距离访问的时候就会出现延时,多用户访问更加缓慢。解决该问题的方案一般有2种,一是借助CDN厂商的异地机房,部署多个副本,人为的做负载均很方案;二是尽量减少动态数据的出现,并加上延时动画来优化用户体验。

OSS建站

标题中提到的利用OSS建站即是属于第二种。完全使用OSS建站的方案可行需要两个基本条件:

  • OSS服务商支持配置域名托管
  • 站点的绝大数资源为静态资源,即可以完全在浏览器执行的文件

PS:国内政策限制,需要域名备案

实现步骤

以下演示OSS站点的配置,以阿里云为例:

第一步 静态页

设置静态页面,点击【基础设置】>【静态页面】>【默认首页】

![image-20210923134147118](/Users/apple/Library/Application Support/typora-user-images/image-20210923134147118.png)

第二步 配置域名

配置域名

![image-20210923134324225](/Users/apple/Library/Application Support/typora-user-images/image-20210923134324225.png)

此处阿里云OSS使用的是CNAME解析,简单解释就是解析重定向。

如果域名服务商与OSS服务商不一致的话,此处的CNMAE解析配置需要注意。

第三步 设置跨域

跨域产生的原理:需要注意的是跨域是浏览器为了安全性作出的防护措施,可以通过浏览器配置关闭。假设用户访问了A网站,A网站上有JS文件需要请求B网站的资源,此时浏览器会认定出现了跨域。

解决跨域的方法一般有3种:

  1. 在A网站的html文件中设置跨域声明
  2. 在七层负载均衡器,例如nginx中批量设置相应头中带有Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Headers
  3. 使用JSONP请求替换JSON完成AJAX请求

阿里云OSS的跨域设置

![image-20210923135552702](/Users/apple/Library/Application Support/typora-user-images/image-20210923135552702.png)

![image-20210923135600782](/Users/apple/Library/Application Support/typora-user-images/image-20210923135600782.png)

备注

使用纯OSS建站会带来安全风险,原因就是因为浏览器的html和JS永远是明文存在。可能的风险如下:

  1. 验证码借口被盗用
  2. redis等中间件密码被获取