关于程序员:一个后端工程师对前端云-Vercel-的体验和探索

一个后端工程师对前端云 Vercel 的体验和摸索

明天小猿姐特邀咱们资深的程序猿为大家带来产品的体验报告。

Vercel 概述

Vercel 是一个为前端开发者设计的一体化平台（前端云），能够帮忙开发者疾速地将网站和应用程序部署到各种环境中，并且提供了一个灵便、可扩大和平安的平台，非常适合开发者在不同平台和环境中进行开发和部署。

Vercel 的次要特点包含：

• 通过主动配置构建设置和提供具体的构建日志，简化了部署治理过程。
• 借助集成的 CI/CD 性能，开发者能够预览其更改，并无缝合并到主分支进行生产部署。
• 反对自定义域名，能够轻松配置并为部署调配个性化的 URL。
• 提供了查看、剖析和应用状况等监控工具，以跟踪网站性能和用户参与度。

借助 Vercel，开发者能够简化开发流程，实现疾速、个性化的 Web 内容交付。

Vercel 的用户十分宽泛，也为许多不同类型的企业提供服务，例如 Facebook、Chipotle 和 Carhartt。

Vercel 的倒退历史

产品演进

迄今为止，Vercel 曾经通过了 8 年的倒退。

工夫线

1. 2015 创立 Zeit（Vercel 前身）
2. 2016 年外围产品 Now 公布

针对小公司和集体开发者，Now 与现在的 Vercel 在产品逻辑上曾经非常靠近。

3. 2016 年 Zeit 推出开源的 React 下层框架 Next.js

简略的学习曲线和弱小的性能，使得 Next.js 很快成为了热门开源我的项目。Next.js 我的项目的胜利也让大量开发者间接理解到了 Zeit 和 Now。

并且相比部署一般 Web 网站，性能更弱小并简单的 Next.js 部署起来也更加简单。主导极简部署的 Now 便适时地深度集成了 Next.js，实现了双剑合璧。与 Next.js 的交融，也让 Zeit 的社区日益凋敝。

4. 2020 实现 A 轮融资，改名为 Vercel，集成 React 以外支流框架

截至 2020 年 4 月，Zeit 一共博得了 30 多万 用户。开发者的青眼助力 Zeit 实现 2100w 美元 A 轮融资。

也让 Zeit 团队确立了新的指标：集成更多功能，让开发者在一个页面内实现开发、预览、部署的整个过程。

为了疾速建立全新的品牌形象，Zeit 改名为 Vercel，意为：Versatile + accelerate + excel。

5. 自那之后，Vercel 陆续实现了 B、C、D 轮融资，总融资额达到 3.13 亿美元

让用户能够应用 Vercel 进行 develop, preview and ship。

6. 2023 推出 Serverless Storage
7. 2023 推出 AI 减速打算

借着 AI 的东风，Vercel 开始助力开发者 AI 利用开发。

外围产品介绍

Vercel：极简主义的部署体验

创始人 Guillermo 为了解决过后前端开发者最两个显著的痛点，推出了 Now，帮忙开发者轻松将利用部署到云端，拉开了 Vercel 商业化过程的帷幕。

1. 这套架构尽管设计并不简单，但在理论施行时却困难重重，往往须要云上部署经验丰富的 devops 帮忙落地，而这也被认为是中大型公司的专利，小公司与集体开发者短少对应的人力。
2. 私有云服务泛滥且逻辑简单，一般开发者想学习并达成最佳实际，所消耗的工夫甚至高于开发利用自身。

Vercel 自身并没有开发简单的云上基础设施，而是帮用户将利用部署到 AWS 等私有云上。联合 Guillermo 过往丰盛的 Web 利用开发教训，他将域名配置、DNS 解析、SSL 证书、CDN 缓存等一系列工作封装到了产品外部，让用户真正做到一键部署利用，并享受最佳实际带来的性能劣势。

晚期阶段 Vercel 的商业逻辑曾经清晰：

• 通过简化私有云部署节俭用户人力；
• 通过生产环境最佳实际晋升利用体现。

前者不难理解，用户节俭的人力老本能够转换为付费的志愿，后者则是 Zeit/Vercel 继续至今的思路：用户最违心为生产环境付费以晋升稳定性与性能。

而这一模式的难点则是用户如何产生粘性而不是转向老本更低的私有云或者其余定位雷同的部署平台。Guillermo 的答案是从本人精通的 Node.js 与前端技术登程，以开源的形式切入市场。

Next.js

是基于 React 的下层框架，Vercel 最外围的开源我的项目。

• React 等前端框架默认提供的是前端渲染，也就是后端返回数据，前端依据 js 生成 HTML。
• 前端渲染不不便 SEO。
• Next.js 提供后端渲染，前端渲染，动态页面渲染，作为 API server 等额定的能力。开发者能够依据需要对不同的页面抉择不同的渲染形式，达到最佳成果。
• 除了本身的各种脚手架和长处，联合 Vercel 的 serverless 服务和流程的部署集成，Next.js 的利用开发体验十分得棒。

竞争对手

• Remix，次要反对 React，然而指标也反对其余的框架；
• Nuxt，反对 Vue。

边缘网络

Edge Network 使您可能在凑近客户或数据的区域存储内容并运行计算，从而缩小提早并进步终端用户的性能。

边缘网络包含大家熟知的 CDN，还做了边缘缓存，边缘函数计算等能力。

后端存储

提供开发罕用的存储服务，比方边缘配置散发，KV 存储，关系型数据库，对象存储等。

也提供了很多第三方的集成计划，包含 PlanetScale，MongoDB 等。

AI 利用开发减速

AIGC 时代，Vercel 也疾速做出了本人的动作，开启了 Vercel AI Accelerator 我的项目，间接举办流动并提供相干工具和基础设施反对，为 AI 利用开发者减速。

团队组建

创始人

Guillermo Rauch 自身就是一个开发者工具生态的明星玩家，专一开发者体验，领有大量出名作品（他的博客个人简介里就列举一一些），并且长年沉闷在开源社区，与很多顶级开发者和公司都有不错的关系（不限于前端，和国内 PingCAP 的关系也不错，PingCAP 最新的开源我的项目 ossinsight-light 就是和 Vercel 单干）。

社区引进

Vercel 的招聘策略显得非常清晰，作为面向开发者提供服务的商业公司，从开发者重度依赖的开源我的项目中开掘人才能够无效晋升产品竞争力，还能减少本人在开源社区中的话语权。

正是因为 Vercel 保持沉闷在开源社区，通过开源社区进步用户粘性，吸引了泛滥明星开发者退出。比方上面的几个:

• Next.js 的 lead developer Tim Neutkens（自家社区倒退进去的）
• webpack 的创造者 Tobias Koppers
• SWC 的作者 Donny
• React 外围团队的灵魂人物 Sebastian Markbåge
• React 的官网脚手架我的项目 create-react-app 中招聘了外围保护中 Joe Haddad，简化 next.js 的疾速上手体验
• SWR 等出名工具作者 Shu Ding
• Svelte 框架（支流框架之一，后端同学喜爱）的作者 Rich Harris（后续可能会招聘 Vue.js 或者 Nuxt.js 的 core team）
• ……

总结

整体来看，Vercel 无论是倒退路线还是产品矩阵都具备以下特点：

• 始于社区，随社区一起倒退，保持沉闷在开源社区；
• 从解决理论问题登程，极致的开发者体验。

与个别的应用程序相比，一款开发工具须要服务于两个用户群体，Vercel 在这两方面很多优化:

• 应用工具的开发者，开发效率和开发体验 DX，通过部署动手；
• 开发者用这款工具开发出的产品的用户，产品的性能和应用体验 UX，上线后晋升利用性能。

根本实现当初的愿景，正在往 前端云 倒退。

应用体验

官网

Vercel 的官网 具备优良的设计体验，极简主义的谋求贯通了 Vercel 的产品定义与视觉设计，黑白相间的优雅界面成为了他们最早的名片，十分值得认真体验。

如果登录后，拜访官网会默认重定向到 Dashboard 页面，差不多就是产品控制台了。

控制台首页也十分简洁，上面就通过创立新利用和导入一个 GitHub 的老我的项目为例，展现 Vercel 的根本体验。

创立新利用

抉择基于模板创立一个新的利用，模板抉择页面有十分多的模板（有官网的，也有第三方的），并且依照多个维度分类，use case 是第一个列表，还能够依照框架，应用的数据库，headless CMS 等维度抉择。官网模板很多保护在 GitHub 仓库里的 examples，也有很多在独自的 repo。

这里我抉择他放在第一个的 Next.js 模板创立一个新利用，这个是基于create-next-app 脚手架生成好的我的项目。

• 左侧能够抉择间接 Deploy，或者拜访模板的代码仓库。
• 右侧都蕴含一个 Demo
  （就是这个模板部署到了 Vercel，能够间接拜访查看），上面就是 README。

抉择 Deploy，则会在你的 GitHub 账户下创立一个同名我的项目，而后就能够会间接部署。

上面能够看到具体的部署日志。

不到一分钟，就部署好了，真的快~

• 部署完后会主动生成一个域名，点击左侧的预览图，就能够拜访了。https://nextjs-boilerplate-pi-cyan.vercel.app/

• 右侧有下一步疏导：

  • 切个其余分支开发批改后，能够间接疾速预览批改后的成果
  • 能够增加绑定本人的域名
  • 能够关上 Speed insights（上面会展现）
• 点击右上角会拜访到我的项目详情页。

我的项目详情页，根本一个页面就蕴含了所有操作入口，包含各种日志查看，拜访地址，回滚按钮，以后部署的 commit ID 等。

脚手架（next.js 脚手架的功绩）生成的我的项目十分齐备，clone 下来，同步下依赖就能够开发测试了，切个分支做一些批改，再 push 后能够看看会有啥变动。

代码 push 到 origin 后，Vercel 就主动构建部署了，而后能够预览，能够邀请其他人来查看，甚至还在预览页面能够合作评论。

我的项目页面就能够看到评论，开发者就能够去看大家的意见。

预览结束后，发一个 PR merge 到 main，main 分支就开始从新编译部署。

上面体验一下 Analytics 和 Speed Insights 两个性能。

都能够收费应用一些额度，这也能够让所有人都能体验到残缺的性能（白嫖党的狂欢）。

点击 Enable，而后能够看到疏导步骤，如何在代码里增加埋点。

依照疏导增加好埋点，push 一个新的分支，而后能够看到剖析数据，比拟相似 Google Analysis。

上面再看看 Speed Insights工作，次要是性能指标和相干聚合数据。

Enable Speed Insights 则不须要埋点，只须要重新部署利用，而后期待有数据过去就好。按住 cmd+R 不放继续刷新页面，而后能够看到性能数据，包含整体和每个页面的。这个体验得分是基于实在用户拜访（The combined score of your Speed Insights experienced by your visitors）。

Settings 页面性能很丰盛，根本围绕利用业务相干的性能都有，比方域名治理 / 日志荡涤 /Webooks/ 函数计算 / 定时工作 / 环境变量等。

托管老利用

和创立新利用差不多，惟一的区别就是不须要创立一个新的 GitHub repo，而是 import 一个现有的。

点击 Deploy 当前就和下面的流程一样了，拜访地址：<u>https://non-stop-nyan-cat.vercel.app/</u>。

Serverless

下面次要都是动态页面，动静页面依赖 API，这里次要体验 Storage 和 Functions 这两类服务，通过这两类服务提供一个 API。

Database

Vercel 内置的 PG

我的项目页上方就有 Storage 的 tab，点击抉择 PG 创立。

后端数据库服务是 Neon 提供的，成心和利用抉择不同的 region 数据库还会有揭示。

1s 就创立实现，会给我的项目创立对应 PG 拜访形式的环境变量。

点击 Connect 就到了关联我的项目到这个数据库服务，会间接跳转到数据库页面。

Projects 能够查看关联我的项目的环境变量配置（是分不同的环境 Production/Preview/Dev..，这里抉择三个共用），也能够关联其余我的项目。

Settings 里有以下四个性能：

• 批改数据库名称；
• 数据迁徙，数据服务能够迁徙到其余团队和账户下；
• 重置拜访形式，环境变量会更新；
• 删除这个数据库服务。

上面应用 Next.js 写一个简略的 API，先拜访创立一个表，写几条数据。

增加代码。

本地启动，能够看到数据曾经查问渲染了，push 批改到新的分支就能够线上 preview。

第三方的数据库

PlanetScale

点击 Connect Store 抉择 Create New，抉择查看数据库集成，就能够看到所有曾经集成的数据库。

这里抉择 PlanetScale。

抉择关联的我的项目。

配置权限。

而后跳转到了 PlanetScale，抉择 GitHub 登录。

而后因为在 PlanetScale 没有可用的数据库（之前创立过一个数据库，free plan 很久没有用就解冻了，点击 Wake。这个 Waking 有点慢，等了好几分钟，从 Vercel 的各种疾速比照，PlanetScale 的慢有点不适应了），并没有间接跳转到两者的集成页面 ==！

再从 Vercel 控制台操作一遍集成 PlanetScale 终于跳到了集成页面，页面还挺简略的。

点击 Connect database，而后又等了一两分钟 ==！

实现后就主动跳转到了 Integrations 页面（留神不是 Project 页面下的 Storage 里，果然不是亲儿子）。

而后本人到关联我的项目的 Settings 查看环境变量就能够看到这个数据库拜访配置。

而后因为我不太熟悉 Node.js 开发，下面的页面也没有间接的 Example，所以这里就不尝试，找了 一篇文档 大略看了看， 相比内置的 PG，也只是须要多做 client 初始化，而后就能够相似 Vercel PG 一样在 Component 里查问渲染页面了。

PlanetScale 也有好几个利用模板能够参考应用。

Storage

目前还须要申请 wishlist，体验应该和数据库相似，临时没有申请体验。

Edge Network

边缘网络服务是 Vercel 的外围服务之一，次要是为了晋升利用性能和体验，这块临时没有适合的利用，所以也没有体验，前面有机会再试试。

CLI

装置 CLI 间接轻易执行一个 CLI 命令会提醒登录，我依照下面体验 serverless 数据库的疏导操作，应用了 CLI，Vercel 的 CLI 交互能力很强 ，这里也记录下。 看了下文档根本控制台无能的，查不多都能够干。

登录有多种抉择，能够鼠标高低挪动抉择。

抉择邮箱登录。

邮箱点击确认，复制下面的 code（最初也没有应用，预计其余中央须要应用）。

点击 verify 会关上 Vercel 的一个页面，点击 verify 按钮即可。

确认后 CLI 会提醒登录胜利，然而没有 link 的我的项目，须要先 link。

Vercel link 会交互式让你抉择我的项目。

而后就能够拉去环境变量到本地不便开发。

AI

这里次要体验了一下 Vercel 为 AI 利用开发提供的工具。

Playground

是 Vercel 提供的一个收费体验各种模型的中央，让大家调试 prompts，而后生成代码，联合 AI SDK 和 Vercel 的利用性能体验优化，就能够不便和利用集成，不便开发者疾速构建 AI 利用，晋升利用体验。

体验地址：<u>https://sdk.vercel.ai/</u>

AI SDK

AI SDK 是 Vercel 减速 AI 利用开发里的外围局部，AI SDK 提供了场景 AI 利用所需的工具和框架，适配了支流的大模型，大大简化了框架性的工作，能够专一利用开发。

体验地址：<u>https://sdk.vercel.ai/docs</u>

AI 利用模板

AI SDK 看起来曾经很好，然而还有更快间接的形式。

作为减速的一部分，和其余类别一样，Vercel 疾速提供了各种 AI 利用模板，来适配不同的大模型和利用场景，能够用来作为开发参考或者作为脚手架应用。

体验地址：<u>https://vercel.com/templates/ai</u>

开发部署体验

这里应用 Next.js + Huggingface 的模板来部署一个利用进行体验一下。

惟一须要配置就是一个 huggingface API key，点击 Learn More 间接跳转到了 Huggingface 官网（这种内部文档链接也有适配，十分贴心）。

花了一分钟，生成了 Huggingface API key 后配置持续部署。

部署结束后间接拜访就能够有一个本人的 Chat 网站了，测试了下答复速度还挺快，尽管页面比拟简陋，本人能够进一步开发优化，或者应用更加齐备的利用模板。

体验地址：<u>https://ai-next-huggingface-one.vercel.app/</u>

Demo Day

作为 Vercel 的一部分，多只 AI 守业团队加入了 Vercel AI Accelerator Demo Day，对做 AI 利用感兴趣的也能够去看看大家都做了哪些 AI 利用。

体验地址：<u>https://vercel.com/blog/vercel-ai-accelerator-demo-day</u>

总结

下面次要体验了一下 Vercel 利用部署的大略流程，内置 Serverless PG 和基于 Vercel AI SDK 和利用模板。

作为一个后端工程师，对于 Vercel 的体验感到了很多惊喜。前端的基础设施越来越欠缺，也越来越不须要传统的后端服务，能够更加专一本人的业务开发。

• 利用部署体验上

  • 十分 Stupidly and easily，很多细节都做的不错，能够说十分爽了，根本就没有看过任何文档。

• 数据体验上

  • 内置的 PG 应用起来非常简单好用，部署上根本没有感觉到数据库配置啥的，治理也对立在 Vercel 的我的项目控制台；利用层面也不须要代码层面初始化客户端，增加个依赖就能够应用；
  • 第三方的数据库集成，都须要 cloud database provider 先创立配置数据库，而后再集成，最终是把数据库的拜访形式写到 Vercel 利用的环境变量里，让利用能够拜访应用。

• CLI 体验上

  • 没有残缺体验，然而应用起来十分好用，各种交互疏导，高亮提醒都很贴心，也齐全不须要看文档。

• AI 工具体验上

  • 收费的 Playground 对于开发者体验还挺好，能够比照模型，而后基于 prompts 生成代码；
  • 继承了 Vercel 一贯的格调，通过 AI SDK 提供了支流模型的 providers，具体的文档和大量模板和 example 能够参考应用。

本文由 mdnice 多平台公布