靜態網站架構的演進和最佳實踐

做者：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，自動部署到「雲存儲」，變成靜態網站。

1. 在「騰訊雲 對象存儲 COS)」中建立一個「公有讀私有寫」的「存儲桶」，並在設置中開啓「靜態網站」，得到分配的二級域名「訪問連接」。

1. 把項目代碼推送到「CODING 代碼倉庫」，在「CODING 持續集成」中建立一個構建計劃，選擇「構建並上傳到騰訊雲 COS」模板，填入「騰訊雲 COS 訪問密鑰」等信息，根據本身的代碼框架修改編譯命令。建立後會自動觸發構建，等待構建成功，訪問分配的連接便可看到網站。下次推送代碼便可自動部署。

1. 若是你的域名已備案，則可在「騰訊雲 對象存儲」的設置中綁定「自定義加速域名」，會提示開通「內容分發網絡 CDN」，小型網站推薦選擇「按使用流量計費」（每個月贈送 10GB，通常用不完），將會得到一個 CNAME。

1. 在「DNS 解析」中設置 www 和 根域名，確保二者皆可訪問，而且二選一進行跳轉避免影響 SEO，推薦 2 種方案：

   • 此域名無郵箱：根域名指向 CDN，www 跳轉到根域名，本文采用此方案，把 www.devops.host 跳轉到了 devops.host；
   • 此域名有郵箱：www 指向 CDN，根域名跳轉到 www；

1. 在「內容分發網絡 CDN」——「域名管理」——某個域名——「高級設置」——「HTTPS 配置」中，申請免費的 HTTPS 證書，並開啓「HTTPS 回源」、「強制跳轉 HTTPS」和「HTTP 2.0」。

1. 開通「騰訊雲 雲函數 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/"
      }
    }
  }
}

持續集成環境變量