专栏首页用户5909132的专栏静态网站架构的演进和最佳实践

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

 支撑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 预览效果"      }    }  }}

持续集成环境变量

变量名

含义

参考值

COS_SECRET_ID

腾讯云访问密钥ID

3Rerpwya4CEUT3xavlNbdgib4ppWv3I69Hxa

COS_SECRET_KEY

腾讯云访问密钥KEY

9MPySpAWocYYRI7B5Dp5Ww592HXs4u4Q

COS_BUCKET_NAME

腾讯云对象存储桶

devops-host-1257110097

COS_BUCKET_REGION

腾讯云对象存储区域

ap-nanjing

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

本文分享自微信公众号 - 腾讯云存储(TencentCloud_COS),作者:杨周

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 腾讯云十周年庆丨COS&CI 回馈好礼

    腾讯云今年10岁啦!为了庆祝这个特殊的时刻,腾讯云存储和大家一起分享云存储的生日大礼包,技术大咖直播秀及腾讯全球数字生态大会的最新消息! ? ? 云存储优惠享...

    云存储
  • 存储网关CSG助力企业上云

    ? 随着近几年的云服务发展和普及,公有云的优势得到了越来越多开发者的认可,无需任何的硬件投入,就可以实现内容全球分发,十一个9的数据安全性以及服务的高可用性。...

    云存储
  • 存储分发加速解决方案

    ? 概述 CDN和对象存储是经常被组合使用的一对云服务,用户可选择使用单一云厂商的组合服务,也可以选择多个云厂商的组合服务。本文对CDN-对象存储组合服务的...

    云存储
  • ​静态网站架构的演进和最佳实践

    新冠肺炎期间,约翰霍普金斯大学开发的疫情地图网站单日 PV 达 10 亿次,查看源代码可以看出它是一个单页应用(single-page application,...

    CODING
  • 腾讯云十周年庆丨COS&CI 回馈好礼

    腾讯云今年10岁啦!为了庆祝这个特殊的时刻,腾讯云存储和大家一起分享云存储的生日大礼包,技术大咖直播秀及腾讯全球数字生态大会的最新消息! ? ? 云存储优惠享...

    云存储
  • 测序数据可视化 (二)- IGV

    IGV是本地浏览测序数据功能最为强大的基因组浏览器,支持多种不同类型的输入格式和不同的显示方式,如峰图、线图、柱状图、Sashimi-plot。同时还可以配合b...

    生信宝典
  • 第56天:选中文字弹出提示框

    所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX 和 clientY 一模一样

    半指温柔乐
  • React prop类型检查与Dom

    当应用不断增长时,可以用过类型检查发现很多bug。对于某些应用,可以使用JavaScript扩展工具来完成,比如使用  Flow 或 TypeScript 来检...

    随风溜达的向日葵
  • React学习(5)—— 高阶应用:prop类型检查与真实Dom操作

    当应用不断增长时,可以用过类型检查发现很多bug。对于某些应用,可以使用JavaScript扩展工具来完成,比如使用 Flow 或 TypeScript 来检查...

    随风溜达的向日葵
  • Android 集成腾讯定位

    由于众所周知的原因,在中国境内所有的出版电子地图都必须要经过至少一次加偏(也就是所谓的国测局火星坐标系),因此国内地图提供商为了更好的对接产品,纷纷推出了自家的...

    宋天伦

扫码关注云+社区

领取腾讯云代金券