▲ 社区会议:Vercel CDN 详解

VVercel
Internet TechnologySmall Business/StartupsComputing/Software

Transcript

00:00:00大家好。
00:00:24欢迎来到本周的 Vercel 社区直播会议。
00:00:27我是 Amy,今天 Maya 也加入了我们。
00:00:31大家好。
00:00:32我们都在 Vercel 社区团队工作。
00:00:35我们正在 X 和 YouTube 上同步直播,
00:00:37但如果你想提问,
00:00:39请务必登录 [community.vercel.com/live](https://community.vercel.com/live)
00:00:43加入聊天室,确保我们能看到这些问题。
00:00:47没错。如果你在我们的聊天室里,
00:00:50友情提示请保持礼貌,
00:00:52遵守我们的行为准则,
00:00:54帮助我们为每个人维持一个良好的空间。
00:00:56那么,今天的会议主题是关于 Vercel CDN。
00:01:00有趣的是,如果你正在我们的平台上观看,
00:01:04那实际上就利用了 Vercel CDN,非常“套娃”。
00:01:07如果你对此感到好奇,
00:01:10Jacob Parris,他是开发者体验(DX)工程师团队的同事,
00:01:13他最近在 Vercel 官网上发布了一篇
00:01:15关于该实现过程的精彩博客文章。
00:01:19我刚刚把链接发到了聊天室,
00:01:22所以如果有人想阅读,就在那里。
00:01:25此外,如果你一直在关注,
00:01:28你会发现我们最近在更新日志中
00:01:30发布了很多与 Vercel CDN 相关的内容。
00:01:33所以我们想邀请该团队的成员来到这里
00:01:35介绍更多相关信息,
00:01:37并让大家了解我们是如何构建它的,
00:01:40以及如何使用它,还有所有可用的功能。
00:01:43所以,欢迎来到舞台,
00:01:45Mark、Andrew 和 Yash 将为大家讲解。
00:01:48我们就不打扰你们了,各位。
00:01:51谢谢 Amy 和 Maya。
00:01:55大家好,我叫 Mark。
00:01:57我是 CDN 团队的软件工程师,
00:01:59我和 Andrew 以及 Yash 在一起。
00:02:03我现在在 Vercel 漂亮的
00:02:06旧金山办公室,这周加利福尼亚挺暖和的。
00:02:09今天,我想聊聊
00:02:12我们一直在开发的最新 CDN 功能。
00:02:15所以非常兴奋能谈论这些功能。
00:02:18首先,我想简单介绍一下 Vercel CDN。
00:02:21我要分享几张相关的幻灯片,
00:02:25然后我会把它交给 Andrew,
00:02:27他将开始演示 CDN 控制面板。
00:02:32太棒了。我只想介绍一下 Vercel CDN 的工作原理。
00:02:39你可能不知道,每一个
00:02:42部署到 Vercel 的项目都在使用 Vercel CDN。
00:02:44这是免费提供的。
00:02:46但它可能是一个隐藏的东西,你可能不知道它是如何运作的。
00:02:51Vercel CDN,
00:02:54它接收来自客户端的请求,
00:02:56来自你的浏览器,来自你的机器,
00:02:58并将其引入到一个接入点(PoP)。
00:03:01这些接入点遍布全球。
00:03:03我们在全球地理上分布着超过 125 个接入点。
00:03:07然后它会传输到 Vercel 区域,我们在那里终止 TLS,
00:03:14并处理请求。
00:03:16这就是我们进行缓存的地方。
00:03:18我们也进行路由。
00:03:19如果请求没有命中缓存,
00:03:21我们可以将其转发到函数区域,在那里我们可以执行
00:03:25由函数提供服务的增量静态再生(ISR)等。
00:03:29稍后在讨论缓存时,我会更详细地讲解这张图。
00:03:33作为其中的一部分,你获得了接入能力,
00:03:35你还获得了防火墙、路由、
00:03:38流量管理功能,如版本倾斜保护、
00:03:40滚动发布、微前端等。
00:03:44那么,Vercel CDN 有什么特别之处呢?
00:03:49Vercel CDN 原生理解框架代码。
00:03:52这意味着当你将项目部署到 Vercel 时,
00:03:56你拥有的代码,
00:03:57你的配置会被自动转换成
00:04:00Vercel CDN 原生处理的工件。
00:04:04大多数其他 CDN 你必须自己配置。
00:04:07如果你使用的是其中一种框架,这是开箱即用的。
00:04:10你会获得内置的请求加速,
00:04:13以及我之前提到的高可用性。
00:04:16你还会获得像 ISR 这样的功能,
00:04:19即增量静态再生。
00:04:21这是我们的一等公民,
00:04:23这意味着你无需重新部署
00:04:27代码即可重新生成页面,只需发送
00:04:29一个 API 请求或 Webhook 并针对特定页面即可。
00:04:34此外,你还可以为每个项目获得
00:04:36不限流量、始终开启的 DDoS 集成。
00:04:40这是免费的,并且可以跨应用一致地处理威胁,
00:04:46同时还附带可配置的 Web 应用防火墙和机器人管理。
00:04:51在过去的几个月里,
00:04:53我们开发了许多新功能,
00:04:56这些功能现在可以在 Vercel 控制面板中使用,
00:05:00我们今天将逐一介绍这些功能。
00:05:02这些功能包括全新的 CDN 控制面板体验、
00:05:06无需重新部署即可在
00:05:09项目级别定义路由规则的能力、
00:05:12全新的缓存标签页,
00:05:13以及定义多达一百万条重定向规则的能力。
00:05:18接下来,我将把它交给 Andrew,
00:05:22他将演示 CDN 控制面板。Andrew?
00:05:27谢谢,Mark。谢谢大家。
00:05:29我是 Andrew Gazek。
00:05:31正如你们所见,我是 CDN 团队的软件工程师。
00:05:36我住在新罕布什尔州。
00:05:38今天大约 35 华氏度,阳光明媚,但还是很冷。
00:05:45期待温暖的夏天快点到来。
00:05:49今天,我要分享我的屏幕,
00:05:53并带大家看一个我们为今天的社区会议
00:05:56构建的小演示应用。
00:05:59我们有这个 Next.js 应用。
00:06:02它包含了一系列博客路由。
00:06:08我们可以查看仪表板。
00:06:10还有一个返回数据的 API 路由,等等。
00:06:16但这并不是我们今天的重点。
00:06:18我们是来看控制面板的变化的。
00:06:22当你进入 Vercel 控制面板时,
00:06:25你会注意到现在这里有一个新的 CDN 标签页。
00:06:28点击它,
00:06:30它会将你带到这个概览页面,这里列出了
00:06:35目前在指定时间段内
00:06:39为你的项目提供服务的所有 Vercel 区域。
00:06:45这里显示的是过去 12 小时。
00:06:47我们可以看到来自旧金山和
00:06:49华盛顿的流量正在访问我们的网站。
00:06:52你可以悬停在这些区域上查看更多细节。
00:06:55你可以打开可观测性工具,
00:06:58进一步挖掘流量数据。
00:07:04这个页面很酷的一点是你可以查看 3D 地图,
00:07:08也可以回到 2D 地图,
00:07:10还可以在这里看到更多的可观测性数据,
00:07:17这些数据也会链接回特定的可观测性页面。
00:07:22这就是概览页面。
00:07:27它的目的是让你快速了解
00:07:30项目的流量情况,
00:07:35并显示你的函数所在的具体位置。
00:07:38你可以看到这个项目的函数区域是华盛顿。
00:07:44接下来我要演示的是重定向。
00:07:48批量重定向,请见谅。
00:07:52噢不,那是预料中的。
00:08:00让我看看。我能不能换一个项目。
00:08:07好吧,我们试一个不同的项目。
00:08:18抱歉造成了不便。
00:08:22我们有这个批量重定向项目。
00:08:27让我们试着给它添加一些重定向。
00:08:30要创建重定向,
00:08:35来到这个页面,点击“手动”。
00:08:37现在,假设我想把 /demo 指向,
00:08:44让我看看,/about/blog/2020/10/style,
00:08:51确保是类似这样的路径。
00:08:57点击“创建”,它会在后台创建,
00:09:02然后会弹出这个查看更改的模态框。
00:09:07目前,这些更改尚未在生产环境中生效。
00:09:11它们在预演(Staging)环境中,
00:09:13你可以用这个环境测试新的重定向。
00:09:18点击这里,这个页面目前并不存在。
00:09:24但没错,它的原理就是这样。
00:09:27如果你想发布到生产环境,点击“发布”。
00:09:30如果你想保留在预演环境,点击“取消”,
00:09:34然后你可以在刚才操作的地方查看预演环境的更改。
00:09:39如果我们将其发布到生产环境,
00:09:42这些更改(在预演列表中)就会消失。
00:09:45我们应该能在生产环境中看到它。
00:09:58现在你可以搜索了。
00:10:01你可以查看你的历史记录。
00:10:05你可以将当前的线上更改与之前的更改进行对比,
00:10:14如果需要,你还可以恢复到这个版本。
00:10:17点击“恢复”,我们应该会看到 demo 路径不再存在了。
00:10:26太棒了。现在我把它交给 Yash 进行他的演示。
00:10:34谢谢,Andrew。大家好。
00:10:38我叫 Yash。我是 CDN 团队的工程实习生,
00:10:42我也在旧金山总部,
00:10:55也就是加利福尼亚大学旧金山分校附近。
00:10:58我是加利福尼亚大学旧金山分校的一名工程实习生。
00:11:03我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:08我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:14我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:18我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:23我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:26我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:32我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:37我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:41我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:46我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:50我也在加利福尼亚大学旧金山分校担任工程实习生。
00:11:57我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:02我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:07我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:13我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:17我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:22我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:27我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:32我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:37我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:41我也在加利福尼亚大学旧金山分校担任工程实习生。
00:12:45如果我们在代码中做同样的事情,就必须重新部署项目。
00:12:49但现在它是即时生效的。
00:12:53现在我要创建第二个路由。这个会稍微复杂一点。
00:12:56我打算在这里直接输入我的需求,而不是像上次那样填写表单。
00:13:00我们将使用 AI 来生成路由规则。
00:13:02我有一个仪表板,我正在开发第二版,我只想向 Beta 测试用户缓慢推出。
00:13:08所以我可以将我们的仪表板重写到仪表板的第二版。
00:13:14让我们来看看用户的 beta cookie 是否被设置为 true。
00:13:21现在我们可以生成规则了,几秒钟内,AI 就会为我们填写好表单。
00:13:27我们可以看看创建的规则。它正将 dashboard 重写为 dashboard v2。
00:13:32这意味着用户在 URL 中看到的仍然是 /dashboard,
00:13:35但向他们展示的将是新版控制面板的内容。
00:13:39这里有一个条件。这意味着该重写规则仅在
00:13:43用户拥有名为 “beta” 且值为 “true” 的 cookie 时才会生效。
00:13:46所以,如果他们有这个 cookie,就会看到新版控制面板,否则看到的是旧版。
00:13:53同样,我们可以非常快速地测试一下。
00:13:58这是旧版控制面板,但现在如果我们设置一个名为 beta、值为 true 的 cookie,
00:14:09然后刷新,就能看到新版控制面板,但 URL 依然是 /dashboard,而不是 /dashboard/v2。
00:14:16这是因为我们使用了重写(rewrite)而不是重定向(redirect),现在可以发布了。
00:14:22我想向大家展示的最后一个重写规则与缓存标头(caching headers)有关。
00:14:26你可以通过设置这些规则来提高网站性能,
00:14:30特别是,我想优化我们的静态图像。
00:14:33所以我可以说,我们想要优化静态图像的缓存,
00:14:41为我们的图像设置 Cache-Control 标头为 public, max-age=1年, immutable。
00:14:52再次强调,我们可以利用 AI 来生成规则。
00:14:55现在我们创建了这条规则,它会为所有图像设置一年的缓存。
00:14:59这样浏览器就不必每次都请求服务器获取图像,
00:15:03而是尝试从本地获取,这能提升性能并节省成本。
00:15:08Cache-Control 标头还可以设置许多其他值,
00:15:11但我认为对于静态资产来说,这个是最好的。
00:15:14同样,你可以先创建,然后发布该路由。
00:15:19正如我之前提到的,所有这些路由也可以在代码中定义。
00:15:23我们这里有一个模式,你可以
00:15:26将控制面板中的所有路由转换成可以复制粘贴的内容,
00:15:30无论是放入 vercel.json 还是 vercel.ts,取决于你的偏好。
00:15:35将它们放在代码中的主要好处是符合版本控制的最佳实践,
00:15:40但请注意,如果你在这里进行更改,必须重新部署项目才能生效。
00:15:46另一件我想向大家展示的是历史记录页面。
00:15:49这与 Andrew 在批量重定向页面演示的功能类似。
00:15:52你可以查看过去的版本以及更改的内容。
00:15:55假设我们想撤销最近的一次更改,即添加缓存规则。
00:16:00只需点击这个恢复按钮,就能立即还原。
00:16:04现在规则几乎立即消失了,我们可以看到它不再这里了。
00:16:09你还可以通过类型进行搜索和过滤,比如查看所有的重定向。
00:16:14是的,这就是项目路由功能。
00:16:16我演示的所有功能也可以通过 API、CLI 和 SDK 使用。
00:16:22非常感谢大家,现在交还给 Mark。
00:16:26太棒了,谢谢 Yash,演示非常精彩。
00:16:29我很喜欢那个自然语言功能。
00:16:31接下来我要展示新 CDN 选项卡的最后一个功能:缓存(caching)选项卡。
00:16:41就像 Yash 刚才提到的,你可以设置 Cache-Control 标头,
00:16:46在 Vercel CDN 中,当你使用增量静态再生(ISR)等功能时,
00:16:53默认就能免费获得缓存,或者你也可以自行控制缓存标头。
00:16:56在顶部的“缓存”选项卡这里,我们有一个缓存图表。
00:17:04我想花点时间解释一下这个,因为与其他 CDN 不同,
00:17:09这里实际上有多个层级来帮助你优化网站。
00:17:12如果你在使用 ISR,这就是我们之前看到的图表。
00:17:17请求在非常靠近客户端的地方进入。
00:17:20它会被传递到最近的 Vercel 区域。
00:17:22全球共有 20 个区域,请求会在这里与 CDN 缓存进行匹配。
00:17:27如果这里没命中,它会进入你的函数区域,那里有另一个
00:17:33针对 ISR 的缓存;如果函数需要执行,还有一个缓存可用于
00:17:39从后端请求数据,从而保护你的后端。
00:17:43在 Vercel 之上,你可以发起不同类型的请求。
00:17:47例如,如果你只是发起 API 请求并使用了缓存控制标头,
00:17:52点击文档可以看到,它同样使用了 CDN 缓存。
00:17:56它会跳过 ISR 缓存,但依然拥有函数和运行时缓存。
00:18:00最后,如果你在 Vercel CDN 上重写到外部源,
00:18:07比如代理到 Vercel 后端,你依然能享受 Vercel CDN 的功能,如
00:18:14缓存和防火墙,然后请求才会转到外部源。
00:18:18这引出了我们的清除缓存(Purge Cache)功能。
00:18:22假设出于某种原因,你想要重新验证内容。
00:18:26在这个页面上,我有一个使用 ISR 并配合特定缓存标签(cache tag)进行 fetch 的示例。
00:18:36这个标签被称为 “fetch data” 标签。
00:18:38你可以看到,这个页面大约在一小时前生成,并使用了 fetch data 缓存标签。
00:18:45如果我想清除它,比如我想让页面重新生成,我有几种选择。
00:18:54在这里,我可以按缓存标签清除,输入 “fetch data” 标签即可。
00:18:58然后我可以选择“使内容失效(Invalidate)”或“删除内容(Delete)”。
00:19:04“失效”允许我们在后台重新生成页面的同时提供过时的页面,
00:19:09这就是为什么我们推荐用户使用它,这样在下次请求时,
00:19:14用户就不会感受到延迟。
00:19:16假设我这么做了,点击“清除”,确认清除。
00:19:21当我刷新页面时,时间还没变,还在递增。
00:19:27但如果我再次刷新,你可以看到时间重置了,内容是新鲜生成的。
00:19:33它刚刚完成了重新生成。
00:19:34我也可以在删除内容时做同样的操作。
00:19:39如果我删除这些内容并点击“清除”,下次刷新页面时,
00:19:45时间会立即重置。
00:19:48这是因为这类似于阻塞式重新验证,下一次请求会等待页面重新生成
00:19:53后再进行提供。
00:19:55所以我们确实推荐在刷新内容时使用“失效(Invalidate)”,因为它能
00:20:00在后台重新生成时提供旧内容。
00:20:05你可以按缓存标签清除,也可以通过同样的方式清除源图像。
00:20:11你还可以清除缓存中的所有内容,并且可以在我们之前
00:20:16讨论的两个层级上操作:CDN 缓存,或者是运行时/数据缓存。
00:20:21这将清除所有内容,相当于删除了所有数据,因此下一次请求
00:20:28将会被阻塞并刷新内容。
00:20:30以上就是我们今天要介绍的所有新功能,现在进入提问环节,
00:20:39请告诉我们你想了解的内容。
00:20:43好的,谢谢。
00:20:44嘿伙计们,聊天框里有几个问题。
00:20:50我从第一个开始。
00:20:51“部署 Vercel 应用后,我该如何使用 CDN?你们是怎么收费的?”
00:21:10问得好。
00:21:11每个 Vercel 应用都能免费获得 CDN 体验。这意味着当你部署
00:21:20应用时,我们会自动分析其中的内容,并针对
00:21:27在 Vercel CDN 上的分发进行优化。
00:21:28如果你使用的框架支持 ISR,我们会运行 SSG 静态网站生成,
00:21:35并将内容映射到 ISR 缓存和 CDN 缓存中。
00:21:40所以开箱即用,你可能不需要进行任何配置就能开始使用。
00:21:46当然,如果你愿意,完全可以自行配置。例如,如果你在定义一个 API 请求,
00:21:53你可以设置缓存控制标头来满足自定义需求;或者像 Yash 展示的那样,
00:22:00如果你从标准目录以外的地方提供静态内容,你可以为
00:22:07所有这些内容设置缓存规则。
00:22:11对于个人版(Hobby)用户,这是免费提供的;对于专业版(Pro)用户,
00:22:21你会获得一定的请求和带宽配额,超出部分会根据地区
00:22:26收取相应费用,具体费率可在我们网站上查询。
00:22:27第二个问题。
00:22:31“如果我的应用前面已经有一个 CDN 了怎么办?”
00:22:38“我该如何切换到 Vercel?”
00:22:40这也是个好问题。
00:22:44我们完全支持这种迁移。
00:22:47通常情况下,我认为迁移可以分为两个阶段。
00:22:54第一步,如果你已经在 Vercel 前使用了 CDN,可以先透传
00:22:58内容,让 Vercel 处理缓存、分发和路由规则。一旦你
00:23:04在 Vercel 上完成了所有配置,
00:23:10接下来只需将 DNS 更改为指向 Vercel,这样
00:23:15请求就会自动发送到 Vercel。
00:23:18我们会在评论区提供一份指南,介绍如何在没有任何
00:23:23停机时间的情况下迁移到 Vercel DNS。
00:23:25如果你对配置差异有疑问,我们在知识库中准备了几份指南,
00:23:33帮助将其他 CDN 的不同概念映射到
00:23:37Vercel 的概念上。我们会提供相关的链接。
00:23:41也许我可以把下面这个问题交给 Andrew。
00:23:49“我该如何分析我的 CDN 流量?”
00:23:52好的,有几种方法。
00:23:55第一种就是我刚才演示的方法。
00:24:00你们听不见我说话吗?
00:24:00哦听到了,谢谢。
00:24:04我刚才演示的第一种方法是查看 CDN 概览选项卡,它会显示
00:24:11项目在指定时间段内,在 Vercel CDN 上的流量快照。
00:24:17另一个去处是可观测性(observability)边缘请求页面,你可以按
00:24:24各种类别对所有流量进行详细分解。
00:24:34是的,Vercel 的可观测性页面有很多丰富的分解数据,
00:24:44欢迎大家去深入挖掘。
00:24:48我经常看到的另一个问题是:CDN 能处理 DDoS 攻击吗?
00:24:57或者说,CDN 提供了哪些安全保护功能?
00:25:04非常有水平的问题。
00:25:06Vercel 确实开箱即用地提供不计费的 DDoS 缓解保护。
00:25:12这意味着它是免费的,而且其缓解措施涵盖了
00:25:19Vercel 能开箱即用保护你免受影响的广泛攻击类型。
00:25:23我们拥有 Web 应用防火墙(WAF),还提供 L3、L4 和 L7 层级的保护,
00:25:32因此无论是针对特定路径的请求激增,还是更复杂的
00:25:39通过循环更换 IP 地址或其他信息的攻击,我们都能检测并
00:25:47为你提供保护。
00:25:48所以,是的,所有项目都开箱即用具备这些功能。
00:25:52如果需要,你也可以定义自定义规则。
00:25:57这可以在仪表板的防火墙选项卡中进行,我们近期也应该
00:26:02专门针对这个主题做一次分享。
00:26:04在那里,如果你有想要拦截的特定内容,
00:26:09可以为你的应用定义更具体的规则。
00:26:13安全绝对是一个大话题,值得专门讲一次。
00:26:22没错,我很喜欢你们为减少这些不同流程中的
00:26:27摩擦所做的所有努力。
00:26:29实际上,我有一个稍微有点随机的问题。我在 Twitter 上看到很多人都非常喜欢
00:26:34CDN 页面上的 2D 转 3D 动画。
00:26:38你能展示一下吗?或者关于这个再多聊两句?
00:26:42好啊,我可以再次分享屏幕。
00:26:49给还没看过的朋友展示一下。
00:26:52在 CDN 概览页面,我们会显示一个 2D 地图,点击地球仪图标,
00:27:00就会变成 3D 地图。
00:27:01它是可以交互的,你可以随心所欲地转动它。
00:27:07悬停在上面,或者再转换回去。
00:27:12就是这样。
00:27:18谢了。
00:27:19我非常喜欢这个图表,它让你能够非常轻松地切入
00:27:24可观测性方面。它让我能直观地看到流量在哪里,然后我就可以
00:27:29进一步深挖。
00:27:30一点没错。
00:27:32另一个问题。在增加这些功能之前,我看到人们经常遇到一些问题,
00:27:43这也是我自己想了解的,因为我还没有
00:27:47完全跟上最新的进展。
00:27:50一切都太新了。
00:27:51有什么保护机制能帮助预防或检测配置错误,
00:27:58或者是防止不小心暴露了你不希望别人看到的
00:28:03内部服务或敏感数据?
00:28:04当然有。
00:28:07对于隐藏内部路由,我们有多种不同类型的保护措施。
00:28:15默认情况下,项目拥有部署保护功能,允许你使用 Vercel 身份验证
00:28:23或密码来保护你的网站免受不速之客的访问,这可以保护整个部署。
00:28:31此外,你还可以针对特定路由使用 cookie 和身份验证库
00:28:43来进行保护。
00:28:46如果你想保护某些路由,也可以使用自定义防火墙规则。
00:28:54总之,有很多不同的选择。
00:28:56在仪表板内部,你可以看到正在提供的路由的丰富观测数据。
00:29:04你还能看到每一次部署的摘要,其中包含了所有路由的信息,
00:29:10这样你就可以检查看到的每个路由和函数的信息。
00:29:15尽管尝试一下,如果还有任何问题,我很乐意提供更详细的解答。
00:29:22太棒了。
00:29:34让我们看看聊天框里还有没有其他问题。虽然你们刚才提到了一点,
00:29:41但也许可以再细说一下。
00:29:43“项目层级的路由可以用于将流量路由到外部 API 或微服务吗?”
00:29:51完全可以。
00:29:55这里有一个模板,也许 Yash 你想聊聊这个?因为你一直在负责
00:30:04这方面的工作。当然,我可以接着说。
00:30:06是的,你绝对可以将所有的 API 请求重写到外部源。
00:30:11在接下来的几周里,我会分享更多相关内容,但你可以设置重写规则。
00:30:15实际上我可以分享一下屏幕。
00:30:18如果我设置一个重写规则,例如我可以设置一个从我的 API
00:30:35到任何外部源的重写。比如 [https://api-external.com](https://www.google.com/search?q=https://api-external.com),
00:30:44你可以像这样操作,将你的 API 代理到外部源。
00:30:50这确实是受支持的,你也可以通过 CLI
00:31:00或任何你喜欢的方法来实现。
00:31:04不错,这让部分迁移变得非常容易。我知道我们在
00:31:10社区网站上就用到了一些这类功能,以便我们能构建额外的特性。
00:31:16这样就不必让所有内容都受限于 Discourse,但你知道,我们
00:31:21也不想完全离开 Discourse。它是社区网站的基础,而我们
00:31:25在它之上添加了额外内容,所以这对我们来说非常方便。
00:31:27是的,这绝对是一次重大的能力解锁。
00:31:31我觉得这真的很有用,你既能享受缓存层、
00:31:35防火墙以及那些易于使用的语法所定义的路由规则,
00:31:42同时又能保留你在不同后端上已有的内容。
00:31:48太好了。我看聊天框里的问题就这些了,不过我很想问问:下一步是什么?
00:31:56能透露点消息吗?
00:32:00噢,问得好。
00:32:02接下来的事情有很多,但我想其中之一,正如我们之前
00:32:09提到的,我们应该在安全方面做更多工作,敬请期待更多关于安全的内容。
00:32:15太棒了,谢谢你们的参与。我知道你们非常忙,就不耽误
00:32:22你们的时间了,但非常感谢你们能抽出时间来到这里。
00:32:25非常感谢邀请我们。
00:32:28是的,非常感谢。
00:32:30谢谢大家。
00:32:30好了,刚才的分享很精彩。Maya,我们接下来还有什么安排?
00:32:37哦,我们在周四有一个沙盒问答环节。
00:32:45所以,请保持关注。
00:32:47我还想顺便宣传一下,因为这个周末有一些非常令人兴奋的活动,
00:32:54就是 “Zero to Agent” Vercel 活动。另外我们 6 月还有 Ship 大会。如果你
00:33:03还没看到,请访问 [vercel.com/ship](https://vercel.com/ship),你可以制作属于自己的小手提箱。
00:33:09设计团队在这个页面上简直是神来之笔,快去看看吧。别忘了预留出
00:33:15参加全球各地活动的时间。是的,我们还有更多社区会议,
00:33:21你可以在 [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events) 查看所有详情。
00:33:26谢谢大家,太棒了。
00:33:28再见!

Key Takeaway

本次会议详细介绍了 Vercel CDN 的全新功能更新,重点展示了如何通过可视化控制面板、AI 辅助路由配置和高级缓存管理工具来提升开发效率与网站性能。

Highlights

Vercel CDN 全球分布超过 125 个接入点(PoP),为所有项目提供开箱即用的加速服务

新推出的 CDN 控制面板集成了流量可视化概览、重定向管理及缓存控制等功能

利用 AI 自然语言处理技术,用户可以通过描述需求快速生成复杂的路由规则和缓存策略

支持在不重新部署代码的情况下,直接在仪表板定义多达一百万条重定向规则

缓存管理功能新增了“失效(Invalidate)”选项,支持在后台更新内容的同时提供过时缓存以保证性能

Vercel 提供免费且始终开启的 L3/L4/L7 层级 DDoS 保护及可配置的 Web 应用防火墙(WAF)

Timeline

会议开场与 Vercel CDN 概览

会议由 Amy 和 Maya 主持开场,简要介绍了 Vercel 社区的动态及本次 CDN 主题的重要背景。软件工程师 Mark 随后接手,阐述了 Vercel CDN 的基础架构,强调其全球 125 个以上的接入点(PoP)如何协同工作。他详细说明了 CDN 如何原生理解框架代码,并自动将配置转换为处理工件,从而实现请求加速。此部分还提到 CDN 提供的安全性保障,包括免费的 DDoS 防护以及对增量静态再生(ISR)的一等公民支持。Mark 最后预告了今天将深度演示的控制面板新功能,为接下来的环节奠定了基础。

CDN 控制面板概览与批量重定向功能演示

Andrew Gazek 演示了全新设计的 CDN 控制面板,展示了如何通过 2D 和 3D 交互地图实时观测全球流量分布情况。他重点介绍了“批量重定向”功能,该功能允许用户在不改动代码的情况下手动或批量创建路径映射。演示过程中展示了“预演(Staging)”环境的优势,用户可以先在测试环境下验证重定向规则,确认无误后再发布到生产环境。此外,系统还具备完善的历史记录和版本回滚功能,确保配置更改的安全性和可追溯性。这一工具极大简化了大型项目在处理数以百万计重定向规则时的管理难度。

AI 辅助路由规则与重写策略配置

工程实习生 Yash 展示了如何利用 AI 提升路由规则的配置效率,通过自然语言描述即可生成复杂的重写逻辑。他现场演示了一个 Beta 测试场景:当用户携带特定 Cookie 时,将其流量无缝重写至 dashboard v2 页面,而保持 URL 不变。此外,Yash 还展示了如何为静态图像资源批量设置长达一年的缓存控制标头,以优化性能并降低服务器负载。这些规则既可以在仪表板即时生效,也支持导出为 vercel.json 格式以便纳入版本控制。最后,他演示了路由历史页面,展示了如何一键撤销错误的缓存规则配置。

高级缓存管理与“失效”清除功能

Mark 回归并深入讲解了 CDN 缓存的多层级架构,包括 CDN 边缘、ISR 缓存以及运行时缓存。他通过具体页面演示了如何通过“缓存标签(Cache Tag)”精准清除特定数据,解决内容更新滞后的问题。重点推荐了“失效(Invalidate)”模式,这种模式允许服务器在后台异步生成新页面的同时,继续向用户提供旧页面。相比于传统的直接“删除(Delete)”,这种方式能有效避免重新验证时的首字节延迟(TTFB),保障用户体验。这部分内容对于需要频繁更新内容且对性能敏感的开发者来说极具参考价值。

Q&A 环节:费用、迁移与安全保护

在最后的问答环节中,团队解答了关于费用、第三方 CDN 迁移及安全防护的核心疑问。Mark 确认 CDN 基础功能对个人版用户免费,专业版则按带宽和请求量计费,并提供了无缝切换 DNS 的指南。针对安全问题,他强调了 Vercel 原生提供的多层级 DDoS 缓解措施和 WAF 自定义规则的强大能力。会议还讨论了如何将流量重写至外部 API 或微服务,这为采用微前端架构或逐步迁移的项目提供了极大的灵活性。最后,Maya 预告了即将到来的 Ship 大会和开发者活动,并以对未来安全功能更新的期待结束了会议。

Community Posts

View all posts