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

新冠肺炎期间，约翰霍普金斯大学开发的疫情地图网站单日 PV 达 10 亿次，查看源代码可以看出它是一个单页应用（-page ，缩写 SPA），JS 调用后端 API 返回动态数据。
那么，部署一个 10 亿 PV 的静态网站需要购买几台服务器？
答案是：0 台！
在云计算时代，静态网站已不再需要服务器，部署到云存储，开启 CDN 即可全球高速访问。
静态网站架构发展史
1991 年，万维网诞生，包括 3 项关键技术：统一资源标志符（URI）、HTML、HTTP 。
初期的网站架构很简单，手写 HTML 或者用程序生成 HTML，通过 FTP/SCP 等方式上传到服务器。
HTML 文件并不需要运算，不消耗性能，一台服务器可以支撑很多个网站，而自行购买一台服务器只部署一个网站，成本高昂。所以网页托管服务（Web）应运而生，价格低廉甚至免费（通过嵌入广告盈利）。
【静态网站架构的演进和最佳实践】1993 年，CGI 诞生，Web 服务器收到浏览器请求，执行对应的 CGI 程序，动态输出 HTML ，这就是前后端混合的模式。在此之后的很多年里，前后端是一个项目，一起部署到服务器。
1999 年， Ajax 诞生。
2004 年，Gmail 大规模使用符合标准的跨浏览器 Ajax ，前后端分离逐渐流行起来。
2006 年，AWS 发布了云存储，宣告了云计算时代的诞生。HTML/CSS/JS 作为简单的小文件，无需特殊处理，部署到云存储，再配合 CDN，成了静态网站架构最佳实践，有如下优点：
2010 年起，、Vue.js、React 等框架陆续诞生，开发的单页应用（SPA）使用 Ajax 技术实现了彻底的前后端分离，也意味着前后端单独部署。
目前，静态网站有 2 种：
警告：React/VUE SPA 不带内容，难以被搜索引擎收录，不适合作为公司官网、博客。如果有 SEO 需求，推荐使用、Hexo、VUE Nuxt、React Next 。
实战：静态网站自动部署到云存储
通过「持续集成」生成 HTML，自动部署到「云存储」，变成静态网站。
在「腾讯云对象存储 COS」中创建一个「公有读私有写」的「存储桶」，并在设置中开启「静态网站」，获得分配的二级域名「访问链接」。
把项目代码推送到「代码仓库」，在「持续集成」中创建一个构建计划，选择「构建并上传到腾讯云 COS」模板，填入「腾讯云 COS 访问密钥」等信息，根据自己的代码框架修改编译命令。创建后会自动触发构建，等待构建成功，访问分配的链接即可看到网站。下次推送代码即可自动部署。

文章插图
如果你的域名已备案，则可在「腾讯云对象存储」的设置中绑定「自定义加速域名」，会提示开通「内容分发网络 CDN」，小型网站推荐选择「按使用流量计费」（每月赠送 10GB，一般用不完），将会获得一个 CNAME 。
在「DNS 解析」中设置 www 和根域名，确保两者皆可访问，并且二选一进行跳转避免影响 SEO ，推荐 2 种方案：
在「内容分发网络 CDN」——「域名管理」——某个域名——「高级设置」——「HTTPS 配置」中，申请免费的 HTTPS 证书，并开启「HTTPS 回源」、「强制跳转 HTTPS」和「HTTP 2.0」。
开通「腾讯云云函数 SCF」，按照文档「使用 SCF 自动刷新被 CDN 缓存的 COS 资源」上传代码。

文章插图
提醒：
浏览完整代码。

pipeline {agent anystages {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'sh 'pip install mkdocs'}}stage('检查书写规范') {steps {sh 'lint-md docs/'}}stage('编译') {steps {sh 'mkdocs 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 ./site/ /'echo "预览 https://${env.COS_BUCKET_NAME}.cos-website.${env.COS_BUCKET_REGION}.myqcloud.com/"}}}}

持续集成环境变量