(99+ 封私信 / 81 条消息) vercel 是干啥的? - 知乎
date_saved: 2024-03-16 12:00:20
Full Content:
关注者
32
被浏览
242,494
复旦大学 工程硕士
关注
32 人赞同了该回答
多年前写的 Koa Js 服务,本来跑在服务器上,要一点花销。后来决定薅各大云厂商的羊毛,就将它容器化了,跑在免费的 Okteto 提供的 K8S 环境里。但是最近 Okteto 提供的 url 访问不了了,虽然发了邮件请 Okteto 帮忙协助,但是本着狡兔三窟的原则,决定再部署一个实例到其他的服务上。
于是将目光瞄准到 Vercel,Vercel 提供免费的 Serverless Function,虽然类似 AWS Lambda,但又不太一样,所以记录一下。如果只是将 koa 服务部署到 AWS lambda,那么只需要使用一个 serverless-http 的框架转化一下就好。关于薅 AWS Lambda 羊毛的文章已经写过多篇,参见:
https://zhuanlan.zhihu.com/p/415577362
https://zhuanlan.zhihu.com/p/351889768
Koa Js
Koa Js 是由 Express Js 的原班人马设计的 Web 框架,更小巧但是不再捆绑任何中间件,这一点也是我在将它部署到 Vercel 时碰到坑的原因。尽管它比 Express 新,但 Express.js 仍然更加流行,也许这也是 Vercel 内置对 Express.js 的支持的原因吧。
Express Js 目前的星标数在 57.6 K,而 koa 的星标数大约是它的一半多一点:
image.png
image.png
看了一下 koa 的贡献者列表,我居然也名列其中呢:
image.png
Vercel
Vercel 是一个用来部署前端应用的==云平台==,但也可以用来构建轻量级的==事件驱动 API,并部署到它们的全球边缘网络。==
Vercel 的 Serverless Function 有些特别
传统 API 托管在运行着的服务器上。当应用需要扩展时,希望更低成本、更灵活、更安全、资源快速分配并启动等等,使用传统服务器很难做到。但是用 Serverless 就比较容易,因为仅仅是一些后端代码片段在无状态环境中运行着,它们由事件(比如 ==http 请求==)触发并只在一次调用中存活。这可以全部自动化并且在毫秒级扩展。更好的是,不用再维护服务器了。开发者只需要关注业务逻辑——返回值的函数。
如果我们部署一个服务器程序到 Serverless Function,我们就为每个请求执行了一个完整的服务器实现,这是一个反模式,因为 Serverless 函数仍然是函数,只应服务于一个目的。将服务器程序部署在 Serverless Function 上,相当于强行将庞大的逻辑混杂在一个函数里。虽然这是一个反模式,但是羊毛在那里,不得不薅。对于有钱的企业级服务器程序,还是建议绕道。
Vercel 的 Serverless Function 和 AWS Lambda 很像,比如都是一个对外暴露 handler 函数的模块,但是特别之处在于其 handler 签名不一样。AWS Lambda 的 handler:
但是 Vercel 的 handler 接收一个 req 和 res 参数(https://github.com/Jeff-Tian/v/blob/master/api/test.js):
https://v.pa-pa.me/api/test?name=Jeff:
image.png
这签名看起来很像是 Express.js 中间件,有意思的是,它真的支持完整的 Express.js 应用,只需要将入口文件放在 /api/index.js 里即可。
Vercel Serverless Function 对 Koa 的支持
经过实验,Vercel Serverless Function 是不支持 Koa.js 应用的。因为它的签名和 (ctx, next) ⇒ ctx.body = ‘Hello’ 这种 Koa.js 风格就不相容。
koa-to-express
想将 Koa 应用搬到 Vercel Serverless Function,但是不希望改已有的 Koa 代码,最自然的方式莫过于增加一个 adapter,将 koa 风格的中间件函数适配成 express.js 的中间件函数。于是找到了 koa-to-express 这个库。
增加 /api/index.js 文件
该 index.js 引用 Koa 应用的入口文件,并将它的中间件做个转换,伪装成一个 Express.js 应用。这样,原来的 Koa 应用在服务器环境中仍然照常运行,同时又可以在 Vercel Serverless Function 环境里运行。如果再使用 serverless-http,再在 AWS Lambda 里部署一个适配,那么就是名副其实的“狡兔三窟”了。
image.png
修复 koa-to-express 的一个 BUG
其实没有那么顺利,由于原 Koa 应用使用了 koa-router 这个中间件,触发了 koa-to-express 的一个 BUG。于是只能 Fork 了 koa-to-express ,在自己的版本中做了修复。虽然给原作者提交了 PR,但在他合并并发新版之前,我得临时使用自己的版本,于是要对 package.json 做个修改,在安装 koa-to-express 时,从自己的仓库里下载代码:
package.json:
给它们的 PR 链接:https://github.com/xingxingted/koa-to-express/pull/10/files
完成 /api/index.js
最终的 /api/index.js 文件如下:
https://github.com/Jeff-Tian/v/blob/cd11bf4f7100fd61ef9dda98397eb255b764a396/api/index.js
重定向
Vercel Serverless Function 默认将 /api/xxx 路由到 /api/xxx.js,所以 /api/xy/z,就不会被 /api/index 处理,所以需要增加一个 vercel.json 文件,将所有 /api/ 下的请求,重定向到 index.js:
完成
效果和在服务器上运行 koa 一模一样:
image.png
Jeff Tian
74 次咨询
5.0
零售业 后端工程师
4885 次赞同
去咨询
真诚赞赏,手留余香
赞赏
还没有人赞赏,快来当第一个赞赏的人吧!
赞同 323 条评论收藏喜欢
收起
关于Robotics, AI, Technology
关注
11 人赞同了该回答
Vercel: 搭建个人独立博客
Vercel 是知名的网站托管平台,可以高效创建和部署 Web 应用程序,类似于Github pages 和 Netlify. 但远为更加强大,速度也很快。与Github账号连接可以无缝衔接对网站进行构建和部署,并且每次提交commit之后会自动更新网站。
Vercel 免费版提供每月100G的带宽服务,这对于个人简单的博客来说完全够用了。基于其丰富的模板和简捷的部署流程,Vercel成了很多人构建个人博客的首选白嫖方案。
Vercel 支持几乎所有流行的前端框架,在模板库里提供了对应的上手实操小项目。比如我其实对前端不怎么熟悉,在模板库里只认识python.
点进去之后,点击 Deploy
就会跳转到部署界面。
在该界面会提示用户在个人的Github空间创建一个新的仓库存放代码,之后点击 Create
就会真正开始部署。
完成之后点击网址会看到如下的界面,说明部署完成。虽然页面很简单,但是稍微丰富一下,你就拥有了自己的博客网站,任何人可以随时随地访问。
但是,很不幸, Vercel 平台在2021年开始国内断断续续出现无法访问的情况。
然而,幸运的是,互联网是万能的,接下来我们可以通过另一种方式达到曲线救国的目的。
CloudFlare: 给博客网址开一扇门
CloudFlare 的主流服务是域名解析,简单来说就是当你输入baidu.com
的时候告诉计算机它所指向的ip地址是什么。这也是一个可以白嫖的网站,因为基础版的域名解析也是免费的。虽然免费,功能却一样不少,甚至更安全更丰富。CloudFare对域名解析的同时提供代理服务,隐藏真实的ip,保护站点免受不法攻击。
Vercel 部署之后会自动生成一个以vercel.app
为后缀的域名,也支持自定义域名。自定义域名可以通过CloudFare进行域名解析并利用代理服务达到访问Vercel的目的。
之前在阿里云买了一个域名,在阿里云买的域名默认在阿里云设置域名解析。如果要在Cloudflare进行解析,需要在阿里云设置使用Cloudflare的域名解析服务器,之后才可以在Cloudflare设置域名解析。类似于把改名字的权限先移交,再进行改名操作。
以之前部署的 Astro 博客模板为例。右侧域名 yee-blog.vercel.app
是默认生成的. 点击上述图片的Domains
按钮,可以进行修改操作。其中Edit
只是修改三级域名yee-blog
的,类似....vercel.app
的域名依然无法正常访问。这里就需要输入自己的域名并点击Add
来添加。不过此时自己的域名还没有被解析到,需要先在CloudFare里面添加记录。
在 Cloudflare 添加一条CNAME
类型的解析,比如这个博客模板就是把vercel.yeekal.store
重定向到yee-blog.vercel.app
,并打开 proxy 服务。
此时可以在Vercel里面添加自己的域名,添加之后会进行校验,校验完成就可以通过vercel.yeekal.store
进行访问了。
把之前的几篇内容也添加进去了,github同步提交就会更新,非常方便,大家可以访问试一下 https://vercel.yeekal.store/blog (仅作样例,博客还未完善).
赞同 11添加评论收藏喜欢
收起
关注
7 人赞同了该回答
Vercel 是一个网站托管服务平台,开发者可以将自己的网络应用部署、托管在平台上运行,最近非常火爆,国内也有类似的平台,是开源运行时社区(http://osrc.com)
# OSRC-开源运行时社区简介
# OSRC-开源运行时社区简介
Code is code,when it’s running, warm the world!
OSRC ( Open Source Runtime Community, 开源运行时社区) 是基于云原生技术,让开源爱好者以运行时形态分享开源作品的社区服务。
开源运行时社区是一个能力型社区,社区基于“云原生能力 + 社区分享“ 为开源社区和团队服务,让开源项目可以在社区云原生平台运行起来,并分享给对项目感兴趣的人。
软件代码运行起来是每一个软件作者的需求,运行起来的代码可以提供鲜活的使用体验,便于作者推广自己的作品,更容易找到欣赏者和用户。
OSRC提供的云原生能力像一个操作系统,希望能给用户提供极致的Serverless体验,目标是让用户开发、部署、管理在云端的应用与在个人电脑上管理各种软件实现一致的体验。 在开源运行时社区, 作者可以管理、配置自己的软件作品(开源项目),把代码运行起来给予目标用户鲜活的使用体验,针对作品和系统进行针对性的互动、沟通,发表出不同的声音,提供不同的想法;作品、作者、用户、团队各种要素发生化学反应…
开源是软件的未来、中国开源未来更好。据GitHub统计,中国开发者的贡献增长速度为全球最快,为GitHub贡献了550万个项目。据GitHub预测,到2030年中国开发者贡献将会超过美国成为全球最大贡献群体。
OSRC团队立志为推动开源社区向更成熟方向发展作出贡献的同时,帮助优秀的软件开发团队打造 由个人、团队和产品的IP影响力。
# 在开源运行时社区里能干啥?
大体来说,围绕着开源软件有两类人群, 第一群人是软件开发者和开源软件技术爱好者,对技术方面更感兴趣;第二群人是软件的使用者、软件项目建设者,围绕软件的功能特点或者性能要求等,目的是寻找合适的标的物;
和GitHub和Gitee主要提供代码版本管理不同,OSRC 提供的是软件运行起来的环境,从OSRC当前的官网看,在这里:
1. 开源作者可以把自己的软件作品部署到社区,把软件运行起来;
2. 社区里运行的软件给访问的用户真实的体验;
3. 软件作者可以和自己的粉丝在社区就软件就具体问题进行沟通交流,因为有了实际运行的系统,沟通交流更具体。
OSRC 社区将对接成熟的APaaS平台, 集成优秀第三方 APaaS 服务能力,与各种应用程序集成,让软件进行连接,轻松构建应用; 打造可连接的软件生态,让软件开发变的更容易。
OSRC团队定义云原生为一套基础软件开发设施(IPaaS),让用户可以高效部署自己的软件应用到云端 OSRC 为开发团队提供的IPaaS 服务,包括研效、质量、SLA等服务
OSRC团队立志为推动开源社区向更成熟方向发展作出贡献的同时,帮助优秀的软件开发团队打造 由个人、团队和产品的IP影响力。
OSRC 新的版本正在紧锣密鼓的推进,他们长期的目标是“ 帮助开源作品和作品团队扩大影响力,打造作品或团队IP,助力中国开源社区发展”,期待新版本尽快发布。
# 案例介绍 下面给大家介绍一下几个比较开源社区优秀的项目在 OSRC 的部署过程:
1. Hertzbeat赫兹跳动: HertzBeat赫兹跳动支持网站,API,PING,端口,数据库,操作系统等监控类型,拥有易用友好的可视化操作界面的开源监控告警。
Hertzbeat 赫兹跳动部署过程 呜呜Hertzbeat 赫兹跳动 OSRC 部署过程](Hertzbeat 赫兹跳动部署过程
2. 华夏ERP 华夏ERP基于SpringBoot框架和SaaS模式,立志为中小企业提供开源好用的ERP软件,目前专注进销存+财务+生产功能。同时对角色和权限进行了细致全面控制,精确到每个按钮和菜单。
# OSRC - 开源运行时社区 - 核心概念说明 Code is code,when it’s running, warm the world!
# 基本概念
在使用 OSRC 前,可以先简单了解一下几个概念:云原生、应用、运行时、运行时实例、Pages。
业界领先的CNCF(Cloud-Native Compute Foundation,云原生计算基金会)成立于2015年, 其目的是在容器、微服务及devops领域里、通过一系列的规范和标准帮助企业和组织、在现代的云化环境中构建架构一致的应用。
CNCF定义的云原生三大特征:容器化封装、动态和自动化管理、面向微服务。此外,云原生强调自动化以提升能够开发效率和运维效率。
OSRC 团队定义云原生为一套基础软件开发设施 (IPaaS),让用户可以****高效****部署自己的软件应用到云端,并实现 **南北&东西向** 的网络访问。极致的 DevOps 和 CI/CD 是云原生的核心。
> 南北向网络访问:用户通过互联网访问基于云原生部署的应用
> 东西向网络访问:云原生服务之间通过内部网络互相访问
在此基础上,云原生还提供丰富的特性:
- 1.1. 安全
云原生系统应用行业领先的安全技术,帮助用户保护数据和应用。
- 1.2. 效率
- Serverless
服务器无感知化,OSRC提供的云原生能力像一个操作系统,希望能给用户提供极致的 Serverless 体验,目标是让用户开发、部署、管理在云端的应用与在个人电脑上管理各种软件实现一致的体验。
- 1.3. DevOps&CI/CD
OSRC提供的CI/CD工具,让用户可以分钟级发布和更新应用,目前提供了Java 应用和 nodejs SPA 应用相关工具。关于 OSRC 构建 DevOps&CI/CD 的细节,大家可以期待****进一步的分享****!
- 1.4. 可靠性
AIOps、自动化运维、专业团队部署在云原生系统上的软件具备AIOps特性,使用先进的自动化运维工具,并且由专业的团队提供服务和技术支持,无论在软件特性和团队能力上,都应该提供一流的服务。
- 1.5. 可观测性
云原生提供丰富的工具,让用户可以方便的观测自身应用,包括先进的 APM 工具、日志管理&分析工具等等。
OSRC 应用是基于云原生系统可运行的 **无状态** 应用,通过 OSRC 发布的 CI 工具,可以快速发布应用,相关案例分享见: [OSRC 实战案例 - 赫兹跳动部署过程 ](https://osrc.com/user/articles/wiki_771691733172670464),并可以在 OSRC 社区分享给其他人。
> 应用归属于发布应用的人
在OSRC设计中,一个应用可以具备****多个程序入口****,以实现不同的功能和服务。
**无状态**应用程序入口分两种:
- 2.1. Service
Service 是一种持续运行(LongTerm)的应用,用户不主动停止,Service应用将一直提供服务。比如我们常见的各种Web服务。
> 一个OSRC应用Service入口是唯一的
- 2.2. Task
Task 是一个程序作业,他运行完成即退出(ShortTerm),比如我们在终端输入的 ‘ls’ 命令,或者熟悉大数据的朋友,各种数据处理 Spark 或 MR 程序都是 Task 应用,OSRC 开发的云原生系统,天然支持各种大数据作业的,相关内容,请期待进一步的分享。
> 一个OSRC应用的 task 入口可以是多个
在OSRC社区,每个应用程序的入口,执行后,就对应一个运行时,并生成一个运行实例,重复执行某个应用程序的入口,会在此运行时下生成多个实例。运行时具备唯一的****域****,通过该域,实现用户对此应用的南北向访问。社区用户可以把一个运行时分享出来,让大家直接体验。
> 运行时 归属于提交执行应用的人,即便该应用是其他朋友发布并分享的。
- 3.1. 运行时域
**运行时域**是根据应用信息和执行此应用的用户信息以MD5算法计算而成,同一个人启动同一个应用,**运行时域**是唯一的、不变的。同时 OSRC 正在评估让用户自定义****运行时域****的需求,期待大家的意见和反馈。
- 3.2. 运行实例&实例域
运行实例归属于某个运行时,并且具备一个随机域,通过该域,实现用户对该实例的直接访问,这样很方便调试。在可观测性上,目前 OSRC 提供运行实例的日志浏览。
> 运行时域到运行实例之间的访问,OSRC采用的是LB策略。
前端的应用,我们称之为 Pages,Pages 是无需服务器资源,无需运行,发布后通过浏览器可以直接访问的应用,常见的 SPA 应用:react、vue 等都可以发布成 OSRC Pages 应用,大家如果使用过GitHub Pages 和其他前端托管服务,可以更容易理解 OSRC Pages。下面介绍下 OSRC Pages 的特点:
- 用户可以发布多个Pages,每个Pages都具备独立且唯一的域,可以通过域直接访问,并且每个应用都具备一个主页,让浏览者可以很好的理解应用。
- OSRC Pages可以通过代理设置与OSRC 应用集成,实现动态应用。
# 联系 OSRC 微信联系 OSRC 产品体验官
赞同 7添加评论收藏喜欢
收起
一个不安分的前端
关注
3 人赞同了该回答
背景
当我们学习nestjs框架想跟朋友分享自己的接口,当我们开发了自己的应用想对外开放给其他人使用,我们需要一台有公网IP的电脑设备。
在各大云厂商平台掏钱购买云服务器是一个不错的选择(目前云厂商都有拉新的活动,想尝鲜的同学还是低成本的尝试一下的。这是我之前写的相关教程:就这样,我拥有了一台属于自己的云服务器
但是,在我们学习或者业务体量较小的阶段,能够白嫖服务器资源肯定是一件让人快乐的事。Vercel平台就是这样的平台,它支持免费部署各种服务。
本文会详细记录Vercel 部署Nestjs项目的步骤。
实现步骤
一、Nestjs 项目添加 vercel 配置文件
在nest项目的根目录下创建 vercel.json 文件,并且设置 nestjs 服务相关的配置。
二、Nestjs 项目上传到github
- 创建新的 github 仓库
Vercel部署Nestjs应用
Vercel部署Nestjs应用
2. 本地项目关联 github 新建的仓库
git remote add origin https://github.com/levenx/customer-service-server.git
3. 本地代码推送到 github
git push --set-upstream origin main
代码成功推送到 github
Vercel部署Nestjs应用
4. 将项目授权给 vercel
Vercel部署Nestjs应用
搜索对应的项目,关联后记得save
Vercel部署Nestjs应用
三、Vercel 平台新建项目
⛱️ 如果还没有 vercel 账号的同学,需要首先注册 vercel 账号(直接使用github授权登录即可)
登录地址 https://vercel.com/login
- 新建 vercel 项目
Vercel部署Nestjs应用
2. 搜索项目,接着执行 import
Vercel部署Nestjs应用
3. 修改打包命令,并且执行 deploy
Vercel部署Nestjs应用
4. 部署成功
Vercel部署Nestjs应用
Vercel部署Nestjs应用
感兴趣的同学可以访问我部署的服务地址:
https://customer-service-server-ng1d-kl84dacvy-levenx.vercel.app/
至此,我们已经完成了nestjs在vercel平台的部署。
四、自定义个人域名(非必需)
Vercel 默认给服务分配了临时的域名,同时支持用户配置个人域名(首先要确认自己已经拥有了个人域名,并且国内还需要完成备案)
Vercel部署Nestjs应用
- 配置个人域名
Untitled.png
- 修改域名DNS解析
Vercel部署Nestjs应用
2. Vercel 检测解析成功
Vercel部署Nestjs应用
3. 用自己的域名访问服务
Vercel部署Nestjs应用
总结
在学习Nestjs的过程中,将代码部署到公网上让其他人能够访问,是真的很有成就感,Vercel 是一个非常值得白嫖的平台。
如果这篇文章对你有多启发和帮助,请点一下赞表示对笔者的支持,感恩~
赞同 3添加评论收藏喜欢
收起
软件开发行业 从业人员
2 人赞同了该回答
1 简介
Vercel 是一个云平台,专注于前端开发者和网站的自动化部署。
它最初以 Zeit 的名字启动,后来更名为 Vercel,Vercel 提供了一个简单快捷的方式来部署和托管网站和前端应用程序。
2 特点
(1)易用性
Vercel 旨在为开发者提供简单直观的使用体验。通过简单的几步设置,用户可以快速将他们的项目部署到云端。
(2)自动部署
Vercel 支持从 GitHub、GitLab 或 Bitbucket 等代码仓库直接部署,当你推送代码到仓库时,Vercel 会自动进行构建和部署。
(3)服务器端渲染和静态网站生成
Vercel 支持 Next.js 等流行的前端框架,可以轻松实现服务器端渲染(SSR)和静态网站生成(SSG)。
(4)性能优化
Vercel 为部署的应用程序提供了全球 CDN 和自动优化服务,以保证快速的内容交付。
(5)可扩展性
无论项目规模大小,Vercel 都能提供良好的扩展性,对于小型项目,它甚至提供了免费的托管服务。
(6)集成和插件
Vercel 提供了多种集成选项,可以与不同的服务和工具进行连接,以满足不同的开发需求。
由于其简单性和高效性,Vercel 在前端开发者和 Web 开发团队中非常受欢迎,尤其是那些使用现代 JavaScript 框架(如 React、Vue.js、Angular)的团队。
3 官网
4 部署过程
我会把关键的配置信息罗列出来供大家参考
4.1 首先注册 Vercel
访问 Vercel 官网,使用你的 GitHub、GitLab 或 Bitbucket 账号注册或登录。
这里我是使用GitHub登录的,如果没有GitHub账号的小伙伴需要先注册一个哦~
4.2 新建项目
示意图
4.3 导入GitHub中的项目
这里默认你已经将前端项目提前上传到GitHub了,点击Import
示意图
如果没有还没有配置GitHub连接的话,需要先在下面这个位置配置一下
示意图
4.4 域名配置
示意图
4.5 项目配置
示意图
4.6 最终配置完成的效果
示意图
写到这里,关于vercel使用和配置的关键步骤就基本上罗列出来了,相信对大家能有一定的启发、学习和参考价值,这样在使用过程中,我们只需要维护GitHub中的代码就可以了,提交代码后,Vercel会针对我们提交的内容进行自动化部署。
赞同 2添加评论收藏喜欢
收起
Highlights
Vercel 是一个用来部署前端应用的云平台,但也可以用来构建轻量级的事件驱动 API,并部署到它们的全球边缘网络。 ⤴️
传统 API 托管在运行着的服务器上。当应用需要扩展时,希望更低成本、更灵活、更安全、资源快速分配并启动等等,使用传统服务器很难做到。但是用 Serverless 就比较容易,因为仅仅是一些后端代码片段在无状态环境中运行着,它们由事件(比如 http 请求)触发并只在一次调用中存活。这可以全部自动化并且在毫秒级扩展。更好的是,不用再维护服务器了。开发者只需要关注业务逻辑——返回值的函数。 ⤴️