静态站点迁移

写在前面

之前说好的架构改进,现在先来拿出一个好玩的,也是我比较满意的一个。

静态主页 一般用来呈现一些关键信息 吸引目光用,因此需要一个相对好看的界面,和非常快的加载速度。

但我之前发布的 inmind船新主页 虽然在界面上我是相对满意的,但加载速度实在不敢恭维,所有的资源经过cloudflareCDN加速,加载仍需 3-8秒 左右。benchmark给出了C评分,在服务器较差的情况下 甚至能给出D,太TM蔡了。

所以这次值得我认真起来 改善架构了。

优化

万事先从优化开始。

先找出慢的原因:

  • 图片加载速度慢
  • 较大的js和css
  • 大量的HTML文本

针对前两个问题无外乎就是引入CDN,但是第三个问题就比较有意思了。

因为是一个纯html模板 我在更新的时候 也是直接把某一块内容复制粘贴改改内容就可以了。但这不是一种最优雅的方式,所以我决定用 Vue.js 来重构(原是基于jQuery的)。

关于 Vue.js 重构的问题可以参考我 vue技术系列

使用模板+资源引用CDN之后 速度有了明显改进 但仍然不够,我还想进一步优化高可用。

传统模式和CDN

  1. Cloudflare DNS & CDN
  2. static file server
  3. html content
  4. GCP VM instance

先来讲讲你点进我的主页都发生了什么。

你请求我的服务器主页 -> cloudflare DNS解析 -> cloudflare CDN -> GCP server -> Nginx(in this case) -> html content

这里会有个问题 如果我的GCP server停止了 或者 Nginx 停止了,都会导致主页打不开。这里停止的可能性是指我在迁移实例或者在维护其他组件 会将 一部分服务临时停止。

但这不应该影响到我主页的内容 毕竟是静态资源。所以这个主站内容不能放到我的 主机实例上。

基于云服务(now)

  1. DNS
  2. clone & build & deploy & publish
  3. git repository

在选型的时候 发现了两个比较符合我需求的服务。

Netlifynow

前者是被我用一段时间放弃掉的,因为安装https证书意外的麻烦 并且不管在国内还是国外访问速度都不佳,虽然在整体的用户体验并不差 但不是很满足我的要求。

now 是我现在正在用的服务,支持自动化部署https证书,支持多种框架,并且国内访问速度极快(上海电信)。

现在 你访问的结构就是:

请求 ->  cloudflare DNS -> now server

不过还有一个改变很大的地方

发布流程

在传统模式 我发布一次主页需要做什么操作呢

coding -> push code -> 登录到实例 -> git pull -> build -> copy to Nginx file dir

但现在 有了 now 的自动化流水线(不需要配置)

coding -> push code

boom 后面所有的步骤都没有了.

省心省力还快速。

至此 大功告成。

TIPS

优化架构需要你把每一个步骤慢的地方都找出来 然后针对性优化。

不要盲目的找一两个文章按照步骤改就可以了。

在我优化的过程中 有很多地方其实是没有写出来的。

例如 loading 界面, html的解析顺序的一些特性之类的。

另外附图跑分:

优化前:

![before](https://imgstor.waynecommand.com/img/屏幕截图 2021-02-09 105947.jpg)

优化后:

![after](https://imgstor.waynecommand.com/img/屏幕截图 2021-02-09 105755.jpg)