支撑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}.myzijiebao.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！
