Home 技术文章 使用Edgio的EdgeJS最大化应用程序的CDN性能
Applications

使用Edgio的EdgeJS最大化应用程序的CDN性能

About The Author

Outline

有关在边缘战略性缓存动态内容的入门指南:其工作原理以及为何它优于传统CDN。

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

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

如果您正在阅读此内容,您的网站可能是使用一些服务器端呈现的动态内容构建的。 如果您使用的是旧版CDN,您可能习惯在提取浏览器的开发人员工具时在响应标题中看到类似的内容。

cdn-cache:通过

根据您的提供商将此对的值替换为:通过,错过或动态内容。 这一切都意味着同样的事情。

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

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

欢迎来到Egio

在Edgio,我们拥有全球第二大CDN,拥有300多个遍布全球的POP和250 TBS容量。 我们在全球各地都保持安全,性能卓越。 但正如我们以前所说,这些只是桌面上的赌注。 在Edgio,我们从不同的角度处理CDN问题。 我们不再受制于20年前的规则,而是构建了一个响应迅速且灵活的CDN,可在未来20年及以后使用。 我们开发了全球首款可配置代码的CDN,可为您的开发人员和DevOps团队成员提供所需的灵活性和精细控制,从而在不到一秒钟的时间内交付网站。

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

此时,您可能会认为这听起来像是魔法一样,可能会有这种感觉,但并非如此,而是Web应用程序交付的未来。 我们不会将您的DevOps和工程团队分开,而是通过允许您将CDN逻辑整合到本地,临时和生产环境中来将它们整合在一起。

轻松缓存所需的任何内容,所需的时间长短

每个Edgio配置都以您拥有和控制的代码库开始。 每个部署都是独一无二的原子部署,这意味着您可以在不到一分钟的时间内回滚到任何版本。 您可以随意将配置与项目一起部署,也可以在单独的工作流程中维护。 我们的大多数客户最终会将其CDN规则融入其CI/CD管道和正常开发流程。 结果是在不牺牲性能和控制力的情况下提高了开发人员的速度。 像管理代码库一样管理CDN。

我习惯在门户中发布配置更改,或通过发出API请求发布配置更改。 Edgio有何不同?

不用担心,我们提供API端点和传统的用户界面,您可以随时使用,但为了最大限度地提高缓存命中率,网站性能和开发人员速度,您需要开始使用EdgeJS。 让我们深入了解一下。

初始化项目时,您将从包含推荐规则集的简单配置文件开始。 您的配置是用JavaScript编写的,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的预测性预取降低跳出率并改善网站体验。