Github 部署 | CDN 加速網頁,速度嗖嗖的快!

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

「本文已參與好文召集令活動,點選檢視:後端、大前端雙賽道投稿,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

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

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

相關文章