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
----
GWA2吉娃兔引入JsDelivr公用CDN的開發與配置
相關文章
- jsDelivr+Github 自建免費CDNJSVRGithub
- Hexo cdn.jsdelivr.net 等部分CDN引用無效的一種低成本解決方案HexoJSVR
- web開發中公用元件的開發之一DateUtils .Web元件
- cdn.jsdelivr.net 掛了?前端靜態資源訪問出錯JSVR前端
- http快取與cdn快取配置指南HTTP快取
- webpack4-06-開發、生產環境、動態CDN配置Web
- 瑞吉外賣專案開發筆記筆記
- 百度地圖開發-引入地圖SDK並配置 02地圖
- 智慧CDN(下):CDN的未來發展方向
- 前端開發常用cdn,api總結前端API
- Apache配置多個專案公用80埠Apache
- 如何開發直播平臺,直播平臺開發需要CDN嗎
- 更改oracle叢集中的的公用/互聯IP子網配置Oracle
- 小程式雲開發專案的建立與配置
- C++ Qt開發:Qt的安裝與配置C++QT
- WebLoigc的配置(生產模式與開發模式)WebGC模式
- 昨天開發引入的兩個錯誤--Parcelable
- use "jsdelivr" to host fileJSVR
- nuxt 按需引入 elementUI 配置UXUI
- 全域性負載均衡與CDN內容分發負載
- 安裝與配置Flutter開發環境Flutter開發環境
- Portal開發與配置技巧集錦(一)
- Portal開發與配置技巧集錦(三)
- Portal開發與配置技巧集錦(二)
- 湃兔更新映象檔案的製作與燒寫
- CDN含義與DNS的聯絡DNS
- Flutter與已有iOS工程混合開發與指令碼配置FlutteriOS指令碼
- Sub7中的公用密碼的發現 (轉)密碼
- Vue Cli 4 引入 Cesium 配置Vue
- CDN技術發展
- Mac OS X下開發軟體的安裝與配置Mac
- CSS的引入與選擇器CSS
- Gangs Rabbit剛兔nft元宇宙系統模式開發(程式碼示例)元宇宙模式
- CDN加速快取的定義與作用快取
- Rust 2018開發環境配置與開發效率工具集Rust開發環境
- 兔盯雲下發定位上報間隔指令
- thinkphp-配置環境引入UIPHPUI
- 分散式 | 淺談 dble 引入 ClickHouse 的配置操作分散式