作者：CODING - 楊周
新冠肺炎期間，約翰霍普金斯大學開發的疫情地圖網站單日 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 比服務器便宜很多（比如「騰訊云 物件存盤 COS」約 0.1 元/GB/月、騰訊云 CDN 每月贈送 10GB 流量），一個典型的公司官網一年費用不超過 10 元；
- 訪問快：CDN 能在全國甚至全球快速訪問，比服務器更快，
2010 年起，AngularJS、Vue.js、React 等框架陸續誕生，開發的單頁應用（SPA）使用 Ajax 技術實作了徹底的前后端分離，也意味著前后端單獨部署，
目前，靜態網站有 2 種：
- 無內容的單頁應用（SPA）：React/VUE 等框架開發的應用；
- 有內容的 HTML：手寫或「程式生成 HTML」；
警告：React/VUE SPA 不帶內容，難以被搜索引擎收錄，不適合作為公司官網、博客，如果有 SEO 需求，推薦使用 MkDocs、Hexo、VUE Nuxt、React Next，
實戰：靜態網站自動部署到云存盤
通過「持續集成」生成 HTML，自動部署到「云存盤」，變成靜態網站，
-
在「騰訊云 物件存盤 COS」中創建一個「公有讀私有寫」的「存盤桶」，并在設定中開啟「靜態網站」，獲得分配的二級域名「訪問鏈接」，
-
把專案代碼推送到「CODING 代碼倉庫」，在「CODING 持續集成」中創建一個構建計劃，選擇「構建并上傳到騰訊云 COS」模板，填入「騰訊云 COS 訪問密鑰」等資訊，根據自己的代碼框架修改編譯命令，創建后會自動觸發構建，等待構建成功，訪問分配的鏈接即可看到網站，下次推送代碼即可自動部署，
-
如果你的域名已備案，則可在「騰訊云 物件存盤」的設定中系結「自定義加速域名」，會提示開通「內容分發網路 CDN」，小型網站推薦選擇「按使用流量計費」（每月贈送 10GB，一般用不完），將會獲得一個 CNAME，
-
在「DNS 決議」中設定 www 和 根域名，確保兩者皆可訪問，并且二選一進行跳轉避免影響 SEO，推薦 2 種方案：
- 此域名無郵箱：根域名指向 CDN，www 跳轉到根域名，本文采用此方案，把 www.devops.host 跳轉到了 devops.host；
- 此域名有郵箱：www 指向 CDN，根域名跳轉到 www；
-
在「內容分發網路 CDN」——「域名管理」——某個域名——「高級設定」——「HTTPS 配置」中，申請免費的 HTTPS 證書，并開啟「HTTPS 回源」、「強制跳轉 HTTPS」和「HTTP 2.0」，
-
開通「騰訊云 云函式 SCF」，按照檔案「使用 SCF 自動重繪被 CDN 快取的 COS 資源」上傳代碼，
提醒：
- 如果網站面向中國境內用戶，需要進行域名備案，然后才能系結到境內的云存盤/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'
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/"
}
}
}
}
持續集成環境變數
| 變數名 | 含義 | 參考值 |
|---|---|---|
| COS_SECRET_ID | 騰訊云訪問密鑰 ID | stringLength36stringLength36string36 |
| COS_SECRET_KEY | 騰訊云訪問密鑰 KEY | stringLength32stringLength323232 |
| COS_BUCKET_NAME | 騰訊云物件存盤桶 | devops-host-1257110097 |
| COS_BUCKET_REGION | 騰訊云物件存盤區域 | ap-nanjing |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/41123.html
標籤：其他
上一篇：WIN10—更改電腦桌面路徑