亚马逊AWS官方博客

Vercel 公司背后的无服务基础设施揭秘

背景

为了在快节奏的市场中保持领先地位，企业必须以更加现代化的方式构建和运营其应用程序。不论是管理后端业务的企业软件，还是连接目标受众、面向终端客户的应用程序，都是企业成功的关键。通过利用最新技术，现代应用程序为开发团队提供了加速创新、增强性能、提高安全性和可靠性、降低总体成本的机会。

现代应用程序是为了满足当今技术环境需求而设计的软件程序。它们采用现代开发工具和实践构建，并针对基于云的部署和可扩展性进行了优化。与传统软件应用程序不同，现代应用程序通常由多个更小、更模块化的组件组成，可以根据需要轻松集成和缩放。它们还被设计地更加敏捷和适应性强，能够快速响应用户需求或业务要求的变化。

现代应用程序相对于传统软件应用程序提供了许多优势。首先，它们更加灵活和可扩展，更容易适应变化的业务需求或用户需求。由于其模块化架构和基于云的基础设施的使用，它们也更加具有弹性和可靠性。此外，现代应用程序通常更加具有成本效益，因为它们可以比传统软件应用程序更快地构建和部署，并且具有更少的开销。最后，现代应用程序可以通过专注于响应速度、可访问性和可用性来提供更好的用户体验。下图是 AWS 为用户构建现代化应用所提供的主要的无服务类型的计算服务：

现代应用程序通常使用敏捷开发方法论进行开发，这种方法强调迭代、协作和以用户为中心的软件开发方法。它们使用现代开发工具和框架，如 React、Angular 和 Vue.js，并经常使用 Docker 和 Kubernetes 等技术进行容器化。此外，现代应用程序设计时考虑到基于云的部署和扩展，使用基础设施即代码工具如 Terraform 和云原生服务如 AWS Lambda。为了确保质量和可靠性，现代应用程序还使用持续集成和交付（CI/CD）实践，自动化构建、测试和部署流程。更多相关服务可以参考如下链接：https://thinkwithwp.com/modern-apps/services/。

现在让我们假设您是一名 Web 开发人员，并希望使用无服务器的方式将 Web 应用程序部署到云上。虽然如 AWS 这样的云计算服务提供商可以为您提供如 CDN、API 网关、Lambda、静态存储等各种服务，但如果您是这些服务的首次使用者，将这些服务组合起来，并融入到您的 CI/CD 流程中，学习和部署这些服务的组合会需要一段时间。

AWS 的合作伙伴——Vercel 通过为前端开发人员提供一种基于 JAMStack 的封装以及和云上 Serverless、CDN 等服务的集成，帮助您解决了以上问题。您只需编写您的应用程序或 API，Vercel 将负责构建并使用无服务器的方式在云上部署。

今天就让我们一起来探索 Vercel 背后究竟是如何实现这种云上无服务和边缘服务的封装，从而给开发者提供现代化应用开发的终极体验。

Vercel 公司和服务简介

Vercel 公司（Vercel.com）提供为前端开发者设计的一体化平台，可以高效创建和部署 Web 应用程序。它通过自动配置构建设置和提供详细的构建日志，简化了部署管理过程。同时借助集成的 CI/CD 功能，开发者可以预览其更改，并无缝合并到主分支进行生产部署。Vercel 还支持自定义域名，可以轻松配置并为部署分配个性化的 URL。此外，Vercel 提供了检查、分析和使用情况等监控工具，以跟踪网站性能和用户参与度。借助 Vercel，开发者可以简化开发流程，实现快速、个性化的 Web 内容交付。

Vercel 的整个的架构理念基于如下这幅图所示的 web 应用的演进：

传统基于三层架构的 web 应用（web 服务器+应用服务器+数据库），适合有经常性的动态内容生成和交互的场景。但如果一个网站绝大部分的内容都不经常更新，比如新闻网站、企业官网、小型电商， CMS（Content Management System）网站，如果使用传统的三层架构，那无论如何都需要一个实时的在线服务，依旧需要大量后端和运维人员维护网站的安全性、稳定性、可伸缩性等。那是否有一种新的可能——通过某种架构，直接动态生成前端页面，并使用 CDN 持续分发静态页面以及数据，从而把内容的管理和内容的显示被完全分隔开来？ JAMStack 架构在这些场景下给出了新的解决方案：

JAM 其实是 Javascript、APIs、Markup 三个术语的首字母组合。简单来说，JAMStack 就是使用 SSG（Static Site Generators）技术，并且不依赖 Web 服务的前端技术栈。

很多前端开发者熟悉的 Next.js 就是 Vercel 公司开发的，它同时支持服务器端渲染（SSR）和静态站点生成（SSG）。

对于 SSR，Next.js 对每个请求在服务器上将页面预渲染为 HTML，TTFB（首字节到达时间）较慢，但数据始终是最新的。对于 SSG，Next.js 在每个请求之前（例如在构建时）将页面预渲染为 HTML。HTML 可以由 CDN 进行全局缓存，并且可以立即提供服务。静态生成具有更高的性能，但由于预渲染是提前发生的，数据在请求时可能会变得过时。在 Next.js 中，过期数据的问题，可以通过在构建时间之后逐步添加和更新静态预渲染的页面的方式或者在不包含数据的情况下静态生成页面的部分内容，并由客户端获取更新数据的方式来解决。

所以 JAMStack 并不是传统意义上的静态网站，事实上，JAMStack 包含一个叫 Headless CMS（无头内容管理系统）的后台系统。Vercel 支持很多种流行的 Headless CMS 系统集成（https://vercel.com/guides/using-a-headless-cms-with-vercel）。Headless CMS 提供与传统 CMS 相同的丰富协作和创作体验，同时将您的数据作为 API 开放出来。通过 Headless API 就可以将数据与表示层解耦。

综上所述，基于 JAMStack 的网站通常还会有下面的特性：

  • 全站托管于 CDN 上
  • 原子化发布（每次发布都是一次全量、原子性的发布）
  • 灵活的文件缓存策略
  • 基于 Git 的全自动构建、部署流程

Vercel 在此基础上，对 JAMStack 的理念进行了商业化的落地，结合 AWS 的 AWS Lambda ， Amazon S3 – Cloud Object Storage 等服务，Vercel 实现了对 Web 应用的云上无服务化部署。网站的开发人员，只需要专注于代码实现，每一次通过 github 的代码变更，都会自动触发云上的构建，一个完整的流程包含了对多个云上服务的依次部署和调用。

Vercel 部署便利性背后的无服务架构

如果您之前没有使用过 Vercel，可以尝试通过 https://vercel.com/templates/react/create-react-app 这个例子来部署你的第一个基于 Vercel 的应用。你只需要把模版代码 clone 到你的 git 仓库，并把你的 git 仓库和你的 Vercel 项目做一个关联就可以了。之后所有的针对你的 git 仓库的代码修改，都会自动触发 Vercel 准备好的 CI/CD 环境，直接部署出最新的页面，并可以在你自己定义的域名中看到效果，如下：

对于复杂的网站，在构建过程中，Vercel 会使用到 AWS S3 来存储大部分的静态内容，对于每一次的构建，Vercel 都会根据用户购买的服务配额，通过 Amazon Simple Queue Service 服务进行构建任务的排队，同时使用 AWS Fargate 来弹性生成基于容器的构建环境。构建的产出包含了 Serveless 函数（AWS Lambda ）， Edge 函数，优化后的图像，以及静态存储等。

以下就是 Vercel 从构建到发布一个现代化应用的完整过程：

为了让构建出的环境能够被世界各地的访问者快速访问到，Vercel 利用 Amazon Global Accelerator 服务来进行基于域名的全球加速，使用 GA，不仅利用了 anycast 路由的优点，还可以让托管在 Vercel 上的应用程序获得自动故障转移和 DDoS 保护的好处，从而提高应用弹性和减少攻击影响。

如上图所示，客户端的请求，会通过域名的加速服务，抵达 Vercel edge 的某一个最近的部署位置。这是请求进入 Vercel 的 Kubernetes 集群（Amazon EKS）的地方。该请求被检查并过滤以防恶意用户，然后路由到充当反向代理的虚拟机网关。首先，它根据数据（例如传入请求的主机名）确定应向用户提供部署的哪个版本，并获取该部署的元数据。然后，根据请求路径是否与部署元数据中指定的路由匹配，请求要么返回状态代码 404，要么继续生成响应。

针对不同的请求和响应内容，网关会路由到不同的资源上进行处理。上述所有步骤的响应会根据缓存标头进行缓存，以加快将来的查找速度。

借助 Vercel 这样的平台，您可以大大简化现代化应用的部署过程，无需自己设置和维护基础设施架构。Vercel 的部署方式，让你的应用天然具备全球性能和可访问性，确保无论用户位于何处都可以获得最佳的用户体验。

构建在无服务基础上的 Vercel，每周会部署超过百万的 Lambda 函数，并被调用超过 50 亿次。Vercel 帮助华盛顿邮报（Washinton Post）平稳度过总统竞选日，帮助奈飞（Netflix）大幅度缩短前端的构建时间，更是帮助 Desenio 和 Harry Rosen 这样的电商平台，在类似于国内双十一的促销日平稳地承接了突发的客户流量。

在 AWS 2022 re:Invent 大会上，Vercel 的 CEO——Guillermo Rauch 也做了关于 Vercel 和 AWS 合作模式的主题演讲，Guillermo 在他的分享最后说到：“Vercel 与 AWS 最优秀的基础设施相结合，正在帮助领先的数字化组织通过前端转型，加速全球对无服务器技术的采用。我们会继续与 AWS 深度合作，帮助更多品牌重新塑造其前端，推动创新，并提供更快速的 web 应用体验。”

如果想进一步了解如何基于 AWS 的基础设施构建无服务架构的应用，可以访问我们的现代化应用主题页面： https://thinkwithwp.com/modern-apps/。

以下是文中提到的 AWS 相关服务的链接：

参考链接

  1. https://vercel.com/blog/behind-the-scenes-of-vercels-infrastructure
  2. https://thinkwithwp.com/modern-apps/
  3. https://dev.to/peibolsang/series/16350
  4. https://thenewstack.io/vercels-frontend-and-the-rise-of-the-hybrid-developer/
  5. https://vercel.com/blog/aws-and-vercel-accelerating-innovation-with-serverless-computing
  6. https://vercel.com/blog/framework-defined-infrastructure
  7. https://zhuanlan.zhihu.com/p/281085404

本篇作者

薛东

AWS 解决方案架构师，负责基于 AWS 云平台的解决方案咨询和设计，目前在亚马逊云科技大中华区服务教育行业客户。专注于无服务，安全等技术方向。