静态网站架构的演进和最佳实践

 支撑10亿PV的云存储

新冠肺炎期间，约翰霍普金斯大学开发的疫情地图网站单日PV达10亿次，查看源代码可以看出它是一个单页应用(single-page application，缩写SPA)，JS调用后端API返回动态数据。那么，部署一个10亿PV的静态网站需要购买几台服务器呢？

答案是：0台！

在云计算时代，静态网站已不再需要服务器，部署到云存储，开启CDN即可全球高速访问。

 静态网站架构发展史

1991年，万维网诞生，包括3项关键技术： 统一资源标志符(URI)、HTML、HTTP。

初期的网站架构很简单，手写HTML或者用程序生成HTML，通过FTP/SCP等方式上传到服务器。

HTML文件并不需要运算，不消耗性能，一台服务器可以支撑很多个网站，而自行购买一台服务器只部署一个网站，成本高昂。

所以网页托管服务(Web hosting service)应运而生，价格低廉甚至免费(通过嵌入广告盈利)。

1993年，CGI诞生，Web服务器收到浏览器请求，执行对应的CGI程序，动态输出HTML，这就是前后端混合的模式。在此之后的很多年里，前后端是一个项目，一起部署到服务器。

1999年，Ajax诞生。

2004年，Gmail大规模使用符合标准的跨浏览器Ajax，前后端分离逐渐流行起来。

2006年，AWS发布了云存储，宣告了云计算时代的诞生。HTML/CSS/JS作为简单的小文件，无需特殊处理，部署到云存储，再配合CDN，成了静态网站架构最佳实践，有如下优点：

• 成本低：云存储CDN比服务器便宜很多(比如腾讯云对象存储约0.1元/GB/月、腾讯云CDN每月赠送10GB流量)，一个典型的公司官网一年费用不超过10元；
• 访问快：CDN 能在全国甚至全球快速访问，比服务器更快；

2010年起，AngularJS、Vue.js、React等框架陆续诞生，开发的单页应用(SPA)使用Ajax技术实现了彻底的前后端分离，也意味着前后端单独部署。

目前，静态网站有 2 种：

• 无内容的单页应用(SPA)：React/VUE等框架开发的应用；
• 有内容的HTML：手写或程序生成HTML；

提示：React/VUE SPA不带内容，难以被搜索引擎收录，不适合作为公司官网、博客。推荐使用MkDocs、Hexo、VUE Nuxt、React Next。

 实战：静态网站自动部署到云存储

通过持续集成生成HTML，自动部署到云存储，变成静态网站。

1. 在腾讯云对象存储COS中创建一个公有读私有写的存储桶，并在设置中开启静态网站，获得分配的二级域名访问链接。

2. 把项目代码推送到CODING代码仓库，在CODING持续集成中创建一个构建计划，选择构建并上传到腾讯云COS模板，填入腾讯云COS访问密钥等信息，根据自己的代码框架修改编译命令。创建后会自动触发构建，等待构建成功，访问分配的链接即可看到网站。下次推送代码即可自动部署。

3. 如果你的域名已备案，则可在腾讯云对象存储的设置中绑定自定义加速域名，会提示开通内容分发网络CDN，小型网站推荐选择按使用流量计费(每月赠送10GB，一般用不完)，将会获得一个CNAME。

4. 在DNS解析中设置www和根域名，确保两者皆可访问，并且二选一进行跳转避免影响SEO，推荐 2 种方案：

• 此域名无邮箱：根域名指向CDN，www跳转到根域名(本文采用此方案)；
• 此域名有邮箱：www指向CDN，根域名跳转到www；

5. 在内容分发网络域名管理中，选择高级设置里面的HTTPS配置，申请免费HTTPS证书并开启HTTPS回源、强制跳转HTTPS和HTTP2.0。

6. 开通腾讯云云函数，并上传代码。

提示：

• 如果网站面向中国境内用户，需要进行域名备案，然后才能绑定到境内的云存储CDN。本文以腾讯云为例，其他云计算厂商的流程也类似；
• 如果网站面向中国境外用户，可直接使用境外云存储CDN 搭建静态网站；

Jenkinsfile完整代码

pipeline {  agent any  stages {    stage('检出') {      steps {        checkout([$class: 'GitSCM',branches: [[name: env.GIT_BUILD_REF]],userRemoteConfigs: [[          url: env.GIT_REPO_URL,          credentialsId: env.CREDENTIALS_ID        ]]])      }    }    stage('安装依赖') {      steps {        sh 'npm i -g lint-md-cli && pip install mkdocs'      }    }    stage('单元测试') {      steps {        sh 'lint-md docs/'      }    }    stage('编译') {      steps {        sh 'mkdocs build && mv site build'      }    }    stage('上传到 COS Bucket') {      steps {        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"        sh 'coscmd upload -r ./build/ /'        echo "上传成功，访问 https://${env.COS_BUCKET_NAME}.cos.${env.COS_BUCKET_REGION}.myqcloud.com/index.html 预览效果"      }    }  }}

持续集成环境变量

点击阅读原文，查看一站式云端软件服务平台CODING！