Github 部署 | CDN 加速網頁，速度嗖嗖的快！

寫程式碼的海怪發表於2021-07-27
Github網頁

「本文已參與好文召集令活動，點選檢視：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

前言

前兩篇文章給大家分享了 如何在 Github 部署網頁 以及 給網頁上自定義域名，相信很多人就算不看我這兩篇分享，也能部署自定義域名的 Github 網頁。然而，很快又會被 Github 那拉跨的網速勸退。

我在 Github 上隨便找了個 http://blesstosam.github.io/ 的網頁測了一下速度，好傢伙，大半個中國都訪問不了，點選這裡檢視詳情。

全是紅色，嚇死個人兒。再給大家看看上了 CDN 的速度如何：

雖然有的時候訪問還不太行，但是整體情況比上面彳亍了不少。

問題

由於 Github 伺服器在國外，本來資訊傳遞就很慢，再加上某些原因，有的時候甚至連開啟都費勁。

那用國外 CDN 如何呢？Emmm，我去 AWS 搞了一下，說實話沒太搞懂，而且現在賬號都沒怎麼用了，還處於欠費還錢的狀態。。。

我自己剛接觸國內 CDN 的時候發現：

什...麼？使用國內 CDN 只能給國內域名使用？

什...麼？買了國內的域名還要備案？

什...麼？備案前還要先租 3 個月的伺服器？

草（一種植物），我 TMD 還沒開始配置呢，就得花 200 租個伺服器？怕我自己不是個憨憨，白嫖失敗。

不過，最近發現騰訊雲上也可以給國外的域名上 CDN 了，就來分享一波吧。

準備工作

開始前，希望 xdm 準備好以下東西：

為了做這次 CDN 配置的分享，我先寫好了上面兩篇文章來鋪墊，希望大家多多點贊支援一下~

原理

簡單過一下 CDN 的原理，CDN 原名叫 內容分發網路。

為啥叫 內容分發 呢？如果一個快遞從黑龍江送到海南，大概需要 45 個小時。

京東 的思路就不一樣了：我先把大量的貨物都放到海南的一個倉庫裡，當有人下單後，可以直接從海南的小倉庫直接發貨，這就能大大減少交貨時間，整個框架就是 內容分發網路。

從上面可以看出 CDN 兩大特點：

  • 就近取材
  • 內容快取

快取引發的問題

不知道大家有沒有想到這個問題：如果 CDN 做了快取，那麼，就算我釋出新版本，CDN 快取還是舊的檔案，使用者依然只能看到舊頁面。

事實上，無論是 React 還是 Vue 專案，在打包之後，都會將 js，css 的檔名存為 [contenthash].js 和 [contenthash].css，其中， contenthash 就是整個檔案內容的 hash 值。

只要檔案內容一變，那麼 contenthash 值就會變，會在 CDN 上新上傳一份 css 或 js 檔案，而且 index.html 引用的 css 和 js 資源路徑也會跟著變，這就解決了每次釋出都不能覆蓋上個版本的問題了。

可能有人的又會問了：“contenthash 值一樣，不怕檔案被覆蓋麼？”。contenthash 值一樣說明了檔案的內容是一樣的，就算被覆蓋了也是被同樣的內容覆蓋，所以檔案覆蓋不是問題。

還會有人問：“如果我的檔案改一個字，就釋出一次，每次釋出都會發一個新 js 或 css 檔案，那 CDN 上的資源不是會變得越來越多？”。確實會有這個問題，不過 CDN 的資源空間理論上是無限的，而且 js 和 css 一般不會佔很大空間，你也不能一天發 100 個版本吧？就算儲存空間不足，讓運維去擴充空間就好了。

這裡要注意：不能把 index.html 打包成 [contenthash].html，因為 Github 要求我們分支上的 html 檔案只能叫 index.html，而同名檔案放在 CDN 上又會有上面快取不更新的問題，所以只有 css 和 js 等靜態資源是需要 CDN 快取的，而 html 是不能快取的。

上面的部署方式是很常見的，先將靜態資源（css、js、fonts、image 等）部署在 CDN 上加速訪問，再將 index.html 部署到 COS 桶上來覆蓋上一版本的 index.html。

總的來說，我們的架構要從這樣：

變成這樣：

在 DNS 到 Github 之間多了個 CDN 伺服器。

配置騰訊雲 CDN 伺服器

首先，點選：console.cloud.tencent.com/cdn 進入 CDN（內容分發網路） 的控制檯。

點選 域名管理 -> 新增域名。

然後在 域名配置 選 中國境外，填上你的域名，然後選擇 靜態加速。

其實 CDN 只是箇中間商，本質上是作為中間站轉發，所以這裡要配置源站的 IP 地址，也就是快取的 html, css, js 要從哪裡獲取。因為我們是將網頁部署在 Github 上的，所以這裡要填入 Github 提供的 4 個 A 記錄。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
複製程式碼

這裡選擇 HTTPS，下一步再來配置 HTTPS。

還記得我們剛說不要把 index.html 也快取了麼，不然部署後看到還是上一個版本的 html。所以，在服務配置裡的 快取行為-不快取 裡新增 html 的字尾。

同時，你還可以選擇 節點快取 和 瀏覽器快取：

瀏覽器快取 好處是可以節省 CDN 上的流量（對，流量也是要錢的，雖然不多），壞處也很明顯，萬萬萬一你要真的進行內容重新整理，那麼使用者訪問的有可能還是以前的版本。

這裡大家按自己的情況來選擇就好了，我這裡只加了節點 2 天的快取就夠了。

最後點選提交。

HTTPS

給個人網頁上 HTTPS 是很有必要的，不然別人進你的網頁，瀏覽器還彈出 “您訪問的網站不安全” 就顯得有點業餘。所以，這一步來給我們的域名上 SSL 證照。

在原來的 內容分發網路控制檯 點選 證照管理 建立一個證照。

進入配置頁後，先填入你的域名，再選擇證照。

相信大部分人剛開始是沒有 騰訊雲託管證照 的，所以點一下上面的 SSL 證照管理 進入管理頁面，再點選申請免費證照（白嫖）：

然後一步步去填內容就好：

注意，在第三步這裡，需要驗證你的域名合法性，需要在 NameSilo 上新增一條 TXT 記錄。

新增後會是這樣（你也可以等到下一步配置 NameSilo 時再新增 TXT 記錄，然後再繼續下面的步驟）：

當驗證通過後，就可以給自己的域名頒發證照了。

最後一步，回到 內容分發網路，在 配置證照 裡繫結剛剛的證照，這樣我們的 CDN 也可以擁有 HTTPS 啦。

配置 NameSilo

回到 域名管理 可以發現 CDN 給我們提供了一個 CNAME：

只要將 DNS 的 CNAME 指向 CDN 的 CNAME，那麼整條訪問鏈路就被我們串起來了。

DNS -> CDN -> Github
複製程式碼

開啟 NameSilo 的 域名管理頁面：

進入域名詳情頁後，在 左上角的 DNS Records 點選 Update （這個配置頁面是真的難找啊）：

然後點選 CNAME 新增兩個 CNAME 記錄，value 處填剛剛從騰訊雲獲取的 CDN 的 CNAME。

然後，去買杯咖啡，看看 B 站，等一小時後，前往你的域名看看吧。

總結

總結一下，我們這裡做了什麼：

  • 新增 CDN 伺服器，將 CDN 的源指向 Github 伺服器
  • 在 DNS 配置中，將 CNAME 指向 CDN
  • 給自己域名頒發證照，並將該證照繫結到 CDN

相信配置完這一套，你的網站訪問速度會比以前快不少。

如果覺得這篇文章能幫到大家，可以點個贊再走咯~

相關文章