GWA2吉娃兔引入JsDelivr公用CDN的開發與配置

新冠肺炎疫情持續差不多一年了,疫苗已經在望,希望人類早日戰勝這個病魔。

GWA2吉娃兔 持續更新升級,這次在升級更新優化的路上,走得更遠,嘗試引入公用CDN(Content Delivery Network,內容分發網絡)。藉此,使得基於GWA2的各種應用程序、網頁能夠如虎添翼一般,更快的響應用戶請求。這次改進源於我們持之以恆地追求——更高、更快和更強。

根據此前梳理的提速優化思路(-gMIS 吉密斯 升級:增加緩存,按時間快捷檢索和全局SessionId等,https://ufqi.com/blog/gmis-update-with-cache-searchbytime/),我們分別在緩存和減少頁面持續兩個方便進行了各種優化改進。其中在緩存優化方向,已經進行了客戶端緩存和服務器端緩存,獨缺少網絡層緩存(CDN)這塊。遲遲沒有下手進行這個網絡層緩存的升級操作,一是CDN相對而言與代碼層開發關係不大,或者沒有關係;二是網絡層的CDN幾乎等同於加服務器、加帶寬的意思,遲遲沒有合適的機會。

根據 V2EX上技術高手的介紹,我們在考察了JsDelivr公用CDN之後,發現是一個很好的開源CDN方案,可以實現免費免備案使用的靜態資源分發。

   WITH    

1. 使用JsDelivr的準備工作

JsDelivr 允許託管和分發的網頁文件類型是JavaScript(.js)、CSS(.css) 和部分小尺寸的圖片(.jpg, .png等)。

JsDelivr 可以讀取開源發佈在 npm 、GitHub和WordPress 上的以上相關靜態文件。出於便於管理和更新GWA2所使用的全部靜態資源類文件,我們選擇將上述文件放在 GitHub 的公開項目上(Repository)。

在GitHub上爲某個項目或者網站、App建立一個對應的Repos, 將GWA2 的 view子目錄下的所有非html文件上傳到 GitHub 對應的 Repos下即可。這些文件包括 ,js, .css, .ico, .jpg, .png 等等。

由於JsDelivr的目標是分發靜態資源文件,當加載.html文件時,其content-type 爲 text/plain , 所以目前還無法使用JsDelivr 分發 .html. 從另外一個角度來說,.html 文件通常包括有業務邏輯或者模板語言,放在自家服務器上,反而更好。

經過以上幾步準備工作,現在可以通過如下路徑訪問到已經放入 CDN網絡的靜態文件。地址例如,

https://cdn.jsdelivr.net/gh/UserName/ReposName/view/SiteName/abc.css

其中, gh 代表在 JsDelivr語境中的 GitHub,
UserName 爲當前資源文件在GitHub 上的用戶名稱,
ReposName 爲當前資源文件在 GitHub 上的項目名稱,
view 爲 GWA2 的子目錄,負責視圖,文件結構保持與本地服務器相一致。

2. 在GWA2中引入CDN

GWA2 從最早時期已經採用了 MVC 分層設計,因此針對視圖文件的修改,相對集中。所有視圖文件的加載,都通過一個叫做 $viewdir 的全局變量進行控制。 $viewdir 告訴服務器或者模板引擎,視圖文件的具體位置。

如果要引入JsDelivr ,則只需要在項目中,適當修改 $viewdir 的指向即可。通常涉及到的文件在 comm/footer.inc 中。

GWA2PHP:
$cdnStaticPrefix=”//cdn.jsdelivr.net/gh/UserName/ReposName”;
$viewdir = $cdnStaticPrefix.”/”.$viewdir;

GWA2Java:
//- +cdn, 12:34 2020-12-04
String cdnStaticPrefix = “//cdn.jsdelivr.net/gh/UserName/ReposName”;
viewdir = cdnStaticPrefix + “/” + viewdir;

3. 速度提升明顯用戶反饋良好

經過上述修改後,程序同步及html或模板更新後,頁面瀏覽加載會感覺提升明顯。直覺上會有所謂的“秒開”。這對於在國內瀏覽海外服務器的相關網站時,對比尤其明顯。

理論上分析,一個HTML文件中,實際 html 代碼的尺寸佔比很小,網上有一些這方面的數據,可能在10%左右,而更多的則是需要呈現頁面的 .js, .css和各類頁面元素等。如果將後者這些靜態資源文件交給CDN網絡,其提速效果自然有突飛猛進的感覺。

另外,這些原本需要本地服務器解析請求做出應答的內容,完全交給了CDN網絡,無疑極大地降低了本地服務器的負載和減少了本地網絡的帶寬佔用。相應地,這些富裕出來的資源可以更好、更快地響應HTML頁面的輸出。

此消彼長,基本是在國內的用戶瀏覽海外服務器的網站,頁面打開實現“秒開”也是很有可能的。
這裏的“秒開”應該主要是指首次打開某個全新的頁面,由於GWA2已經在客戶端進行了大量的緩存,在第二次之後打開或者刷新頁面,這些靜態的.js .css和圖片文件等,多數將都由瀏覽器調用本地緩存來實現響應,那將是頁面加載的極致快速。

有時候幸福來得就是這麼突然,海外服務器的頁面可以實現了秒開,而且這個CDN由於不涉及到具體內容文件,因此可以不用中國地區的備案,而且她也是免費的——GitHub免費寄存靜態資源文件,JsDelivr負責免費分發到距離用戶最近的地方——據說全球有上數百個CDN節點,這幾乎可以媲美一流的CDN服務。

4. CDN回滾與容錯

作爲可靠的龐大的CDN網絡,JsDelivr是穩定的,但也需要預防萬一的突發偶然情況,如果由於某種未知的原因 JsDelivr突然不能用了,如何可以快速平滑的切回到本地服務器?

也即CDN服務需要能夠在必要的時候進行回滾或者降級,以實現容錯。這個在 GWA2 裏改動相對簡單,參照上面增加CDN的時候操作,如果感知到 CDN不可用時,可以清空其賦值即可將資源文件的請求切換到本地服務器上來。也即通常情況下說的所有CDN本擊穿了。

GWA2PHP:
$cdnStaticPrefix=””; # failover
$viewdir = $cdnStaticPrefix.”/”.$viewdir;

GWA2Java:
//- +cdn, 12:34 2020-12-04
String cdnStaticPrefix = “”; # failover
viewdir = cdnStaticPrefix + “/” + viewdir;

5. 多源CDN及應用層CDN隊列

顯然,GWA2 可以在代碼層實現多源CDN的集羣式配置,我們可以在程序中定義 $cdnStatixPrefix 作爲當前CDN分發網絡的標誌,可以可以同樣地定義 N個不同的CDN網絡,如 $cdnStaticPrefix2, $cdnStaticPrefix3… $cdnStaticPrefixN.

當有這麼一個羣組隊列的CDN可以用時,可以使用隨機算法或者權重算法,將請求分發給這個CDN池,從而實現更加可靠的內容分發。

當然,也可以加上一定的心跳檢測裝置,自動對下線失效的CDN做移除處理。同樣地,基於心跳檢測,將恢復正常的CDN網絡加入到隊列中來,從而實現網絡自動化、智能化運行。

如上,完成 GWA2吉娃兔引入JsDelivr公用CDN的開發與配置.


-GWA2 吉娃兔 是”通用網絡應用架構( General Web Application Architeture, https://ufqi.com/dev/gwa2/ )”,基於 -GWA2 可以輕便構建各種網絡應用程序,
包括複雜的在線購物商城、在線醫療、在線教育、 旅遊交易平臺、社羣或者社交網站和新聞資訊網站等,
也包括各種企事業單位網上門戶,在線交互及服務作業系統等.
還可以包括爲NativeApp做服務器端支持, 甚至是WebApp的全部.
-GWA2 是爲數不多的支持跨開發語言的應用框架,目前支持 -Java, -PHP, -Perl, -Aspx and -Python .

-GWA2 is a “General Web Application Architecture” and based on -GWA2 developers can easily build a variety of network applications,
including complex online shopping malls, online medical services, online teaching, travel trading platforms, community or social networking sites and news information sites, etc.
Also the applications include various online portals of enterprises and institutions, online interaction and service operations systems.
Moreover it contains server-side support for NativeApp, or even all of the WebApp.
-GWA2 is one of the web frameworks which provide cross-language support for -Java, -PHP, -Perl, -Aspx and -Python at present.

-GWA2 is E.A.S.Y 
Easy Along, Swift Yield
輕鬆啓動, 快速產出.


JSDelivr: A free CDN for Open Source

fast, reliable, and automated

serving ~ 94 billion requests / month 
serving ~ 2990 TiB / month 
around since 2012

-R/S2SQ

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章