Home 技术文章 通过EdgeJS (由Edgio开发)最大限度地提高应用程序的CDN性能
Applications

通过EdgeJS (由Edgio开发)最大限度地提高应用程序的CDN性能

About The Author

Outline

在边缘战略性地缓存动态内容的基础知识:它的工作原理以及它优于传统CDN的原因。

在性能方面,大多数CDN可以很好地完成一些事情,它们可以快速交付静态文件,为高峰流量时间提供网络开销,并抵御网络级DDoS攻击。 从历史上看,这意味着图像,视频和其他静态内容等资产的性能和安全性都有了显著提高。 随着Web技术的发展,上述优势基本上只是CDN成为主流Web交付解决方案的一部分时确定的赌注。

问题在于CDN架构是几年前开发的。 网站架构发生了翻天覆地的变化,但大多数CDN尚未适应不断变化的环境。

如果您正在阅读此内容,您的站点可能在架构上使用了一些服务器端呈现的动态内容。 如果您使用的是传统CDN,当您打开浏览器的开发人员工具时,您可能习惯于在响应标头中看到类似的内容。

cdn-cache:通过

根据您的提供商,将此对的值替换为PASS,MISS或DYNAMIC-content。 这一切都意味着同样的事情。

“这种响应来自您的来源,因为它太复杂了。”

这对您的网站性能意味着什么? 这意味着您会牺牲速度,因为您的动态内容几乎总是来自您的源站,简单明了。 您的分类和产品页面,文章和API请求几乎100%直接发送到您的来源服务器。 大多数CDN遭受同样的缺陷。 如果幸运的话,您可以将服务器动态响应的10%到11%压缩到边缘缓存中。 您很快会发现,您没有足够精细的控制来微调缓存规则,从而创建一个即时加载的网站,感觉就像一个本机应用程序。

欢迎来到Edgio

在Edgio,我们拥有 全球第二大CDN ,拥有300多个全球分散的POP和250 TBS容量。 我们在全球各地都是安全,高性能的。 但正如我们以前所说的那样,这些只是赌注。 在Edgio,我们从不同的角度来处理CDN问题。 我们已经构建了一个响应迅速且灵活的CDN,而不是局限于二十年前的规则。 我们开发了全球首款可配置代码的CDN,为您的开发人员和DevOps团队成员提供所需的灵活性和精细控制,以便在不到一秒的时间内交付网站。

它不是神奇的,它是CDN的未来,它现在可用

此时,您可能会认为这听起来像魔法,可能会有这种感觉,但事实并非如此,这是Web应用程序交付的未来。 我们不是将您的DevOps团队和工程团队分开,而是让您将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和客户端浏览器上24小时。”

如果您在家中尝试此操作,您可以在本地单击您的网站,观看我们缓存和交付图像,图像,字体,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的预测性预取降低反弹率并改善网站体验。