Home 技術文章 EdgeJS,讓您的應用程式發揮最大CDN效能,作者為Edgio
Applications

EdgeJS,讓您的應用程式發揮最大CDN效能,作者為Edgio

About The Author

Outline

關於在邊緣戰略性地暫存動態內容的入門指南:它的工作原理以及為什麼它比傳統CDN更好。

在性能方面,大多數CDN都做得很好,它們可以快速交付靜態文件,為高峰流量提供網路開銷,並抵禦網路級DDoS攻擊。 過去,這意味著圖像,影片和其他靜態內容等資產的性能和安全性都會顯著提高。 隨著網路技術的發展,上述優勢基本上只是CDN成為主流網路交付解決方案的一部分時所確立的目標。

問題在於CDN架構是多年前開發的。 網站架構已發生飛躍性變化,但大多數CDN並未適應不斷變化的環境。

如果您正在閱讀此內容,則您的站點可能是由一定數量的服務器端呈現的動態內容構建的。 如果您使用的是舊CDN,當您打開瀏覽器的開發人員工具時,您可能習慣於在響應標題中看到類似的內容。

cdn-cache:通過

根據您的提供程序替換此對的值:pass,miss或dynamic-content。 這一切都意味著相同的事情。

“這種響應來自您的源站,因爲它太複雜了。”

這對您的站點性能意味著什麼? 這意味著您將犧牲速度,因為動態內容幾乎總是來自原始伺服器,簡單而簡單。 您的分類和商品頁面,文章和API請求幾乎100%的時間都會直接發送到您的原始伺服器。 大多數CDN都受到同樣的困擾。 如果幸運的話,您可以將伺服器動態響應的大約10到11%壓縮到邊緣暫存中。 您很快就會發現,您沒有足夠的精細控制來微調暫存規則,從而創建一個可以即時載入並感覺像本地應用程式的網站。

歡迎來到Edgio

在Edgio,我們擁有全球第二大CDN,擁有300多個遍布全球的POP和250 TB的容量。 我們在全球各地都是安全,高性能的。 但正如我們以前所說,這些只是桌面上的利害關係。 在Edgio,我們從不同的角度來處理CDN問題。 我們不再受制於二十年的規則,而是構建了一個響應迅速,靈活的CDN,適用於未來二十年及未來。 我們開發了世界上第一個可配置代碼的CDN,它爲您的開發人員和DevOps團隊成員提供了在不到一秒的時間內交付網站所需的靈活性和精細控制。

這並不是魔術,而是CDN的未來,現在已經上市

此時,您可能會認為這聽起來像魔術,它可能會有這種感覺,但事實並非如此,它是Web應用程式交付的未來。 我們不再將DevOps和Engineering團隊分開,而是讓您將CDN邏輯整合到本地,臨時和生產環境中。

輕鬆快取您想要的任何內容,持續多長時間

每個Edgio配置都從您擁有和控制的代碼庫開始。 每個部署都是獨一無二的,原子的,這意味著您可以在不到一分鐘的時間內回滾到任何版本。 您可以隨意將配置與項目一起部署,也可以在單獨的工作流中進行維護。 我們的大多數客戶最終將其CDN規則融入其CI/CD管道和正常開發流程。 結果是提高了開發人員的速度,而不會犧牲性能和控制。 像管理代碼庫一樣管理CDN。

我習慣於在門戶中發布配置更改,或通過發出API請求。 Edgio有何不同?

別擔心,我們提供了API端點和傳統用戶界面,您可以隨時使用,但爲了充分發揮您的緩存命中率,站點性能和開發人員速度,您需要開始使用EdgeJS。 讓我們深入了解一下。

初始化項目時,您將從包含推薦規則集的簡單配置文件開始。 您的配置是使用全球最流行的開發語言JavaScript編寫的,並使用我們的CLI在幾秒鐘內完成部署。 一個文件定義您的源伺服器。

				
					module.exports = {
backends: {
  origin: {
    domainOrIp: "example.com",
    hostHeader: "example.com",
  },
},
				
			

添加您的API端點,介質桶或您需要的任何其他源站。 輕鬆使用幾行代碼。

這種暫存靈活性如何?

問得好,這就是樂趣的起點。 我們添加另一個文件,以便您可以配置路由並編寫一些暫存規則。 為內容創建規則,並根據您的需要設定邊緣,瀏攬器和服務工作者暫存規則。

讓我們從CDN處理得很好的靜態資產開始。

				
					.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
  ({ cache, proxy }) => {
    cache({
      edge: {
      maxAgeSeconds: 60 * 60 * 24,
      staleWhileRevalidateSeconds: 60 * 60
      },
      browser: {
      maxAgeSeconds: 60 * 60 * 24,
      },
    })
    proxy('origin')
  }
)
				
			

通過一個規則,我們為任何請求建立了類似的規則:

“如果我們看到具有匹配文件擴展名的請求,請將其暫存到Edgio和客戶端的瀏攬器上二十四小時。”

如果您在家中嘗試此操作,您可以在本地點擊您的網站,並觀看我們暫存和交付圖像,圖像,字體,CSS和JS的過程。 打開一個無代碼窗口,以便您確定瀏覽器緩存爲空,並在本地查看緩存點擊數。 是的。 無需部署此工具即可查看其工作情況。 您完全知道您的代碼將如何與我們的CDN交互。

您提到的動態內容如何?

哦,別擔心我們沒有忘記。 我們只有10分鐘的時間,我們正在匹配這些傳統CDN。 現在,我們要打開後燃燒器並將其留在灰塵中。 假設您要為某些動態內容添加路由。

				
					router.match('/products/:productId', ({ cache, proxy }) => {
  cache({
    edge: {
      maxAgeSeconds: 60 * 60 * 24
      staleWhileRevalidateSeconds: 60 * 60
    }
  })
  proxy('origin')
})
				
			

並已翻譯,這意味著:

“暫存一天的所有產品頁面。
當該暫存過期時,請將舊的暫存送上一個小時,同時我們尋找新版本”

現在,您已經瞭解了靈活性並瞭解了基本知識。 希望您能想象在Edgio上部署CDN對網站速度和性能有何影響。 您可以輕鬆定義自己的路由並為其分配暫存規則。 但是,使用Edgio的應用程序平臺和EdgeJS,您還能做什麼?

  • 將請求轉發到源伺服器上的不同路徑,
  • 更改請求
  • 更改響應
  • 操作Cookie
  • 提供靜態文件
  • 路由到無伺服器函數
  • 回退到伺服器端渲染
  • 重定向
  • 通信阻擋
  • 使用自定義高速暫存密鑰進行選擇性清除
  • 或者完全改變原始伺服器的響應。

您可以自行決定如何利用Edgio的下一代技術,上面的例子只是冰山一角。 事實上,在Edgio,我們一直在追求性能,因此我們決定通過我們獨特的HTML和資產預取解決方案,將性能向前邁進,超越邊緣,進入訪問者的瀏覽器。

要了解如何通過賦予網站本機應用程式的感覺來消除網路響應時間並徹底改造網站,請務必查看我們的後續文章:Edgio的Predictive Prefetching降低跳出率並改善網站體驗。