5分钟快速上线Web应用和API(Vercel)

本文涉及的产品
函数计算FC,每月15万CU 3个月
.cn 域名,1个 12个月
简介: 上周有个童鞋问我如何快速搭建一个Web应用,想拿来练手,就不考虑购置服务器。我推荐了前段时间很火的Vercel,接下来我带你5分钟上手!

上周有个童鞋问我如何快速搭建一个Web应用,想拿来练手,就不考虑购置服务器。我推荐了前段时间很火的Vercel,接下来我带你5分钟上手!

Vercel

Vercel 你可以理解为一个部署工具,支持部署静态网页和Node服务,部署后你还可以访问它自带生成的域名https。

网络异常,图片无法展示
|

不仅仅如此,除了他的亲儿子Nextjs之外,它还提供了很多模版支持,譬如:

  • Nuxt.js:  Vue的SSR框架
  • Hexo:  快速生成博客网站
  • Remix: 一款边缘原生的全栈 JavaScript 框架
  • 模版多达30种..

网络异常,图片无法展示
|

Vercel的核心主要包括开发、预览、部署。通过授权Github给Vercel后,就可以选择我们要部署的项目Github仓库,项目就自动更新部署了。接下来教你一步到位!

1.选择模版

本次演示实践框架,我选用vercel的亲儿子Next.js。他提供了很多🌰案例,这里我选择一个 模版:with-vercel-fetch。来实现一个简单的SSR服务。

网络异常,图片无法展示
|

在Vercel创建一个项目,你会发现Vercel跟Github是可以联动的!支持帮你创建一个私有的Github仓库,本质是类似Github Page,但是Github Page的访问速度太慢。这点Vercel直接秒杀了。

网络异常,图片无法展示
|

在Vercel帮我们创建的仓库之后,对Demo仓库做一些调整 👇

网络异常,图片无法展示
|

这里我fetch的API接口使用的是Apifox提供的云端Mock的功能,自己不用搭建一套后端服务也可以调接口数据!🔥

在Apifox的Web版中新建一个接口,然后对接口返回字段进行Mock自定义(支持自定义Mock数据)👇

这是我自定义的一个云端Mock接口 https://mock.apifox.cn/m1/388694-0-default/star/list

网络异常,图片无法展示
|

感兴趣的小伙伴可以体验下 👉 Apifox

2.发布

完成上述步骤后,vercel会自动执行部署环节,并生成访问域名,同时你可以看到应用的预览效果!

网络异常,图片无法展示
|

而且后期你的github仓库只main分支有任何改动,vercel可以自动触发Deploy部署。

最后访问一下我们用vercel部署好的页面

网络异常,图片无法展示
|

👨‍🎓 阿乐同学:那如果我想替换域名可以嘛?不用他分配的域名

可以的,如果你想绑定独立域名,你可以操作view domain 进行自定义域名绑定,最后去域名解析解决解析CNAMEcName.vercel-dns.com

网络异常,图片无法展示
|

3.其他部署方式

Vercel提供deploy Hook, 你可以在vercel创建的项目中的控制面板上配置deploy hook,只需要填写deploy(部署)的分支 git branch, 还有对应的hook名称(自定义),就可以配置一个独立的触发方式。 配置如下 👇

网络异常,图片无法展示
|

最后我们在命令行中发起请求,就可以触发该项目的构建部署了。是不是很方便!🚀

curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_GeziGEUiSxxxxxx/tV4Wm5MO2j

4.Serverless 相关

Vercel 本质上是一个零配置的Serverless部署平台,那什么是Serverless呢? 你可以看看之前树酱写的文章:📒 你学BFF和Serverless了吗

网络异常,图片无法展示
|

Vercel实现Serverless的底层是基于AWS(亚马逊云) 的lambda这座大山。我们用vercel可以部署Serverless 接口,接下来我们通过本地来开发一个简单的 Serverless API

在本地项目中执行 👇

1.  npm install vercel@latest -g (全局安装)
2.  vercel login
3.  vercel (除了初始化.vercel文件 也可以触发项目的Deploy部署)

网络异常,图片无法展示
|

完成上诉操作后,我们就可以开工了!我们发现vercel命令会帮我们创建 .vercel文件夹,然后我们在跟目录创建一个api文件夹,并在其中新建一个"云函数" message,我们看下代码结构!

网络异常,图片无法展示
|

最后重新执行vercel,就可以部署这个Serverless API了! 我们再用Apifox调试一下!成功返回!

网络异常,图片无法展示
|

相关文章
|
23天前
|
搜索推荐 数据挖掘 API
Suning商品详情API接口的开发应用与收益
在电商迅猛发展的时代,API接口技术成为连接不同系统的桥梁,为电商平台提供高效的数据交换能力。苏宁易购的商品详情API接口,为商家和开发者带来诸多便利和收益,包括商品信息获取、选品上架、竞品分析、个性化推荐、自动化管理和运营效率提升等方面,助力商家优化销售策略,提高用户体验,降低运营成本,增强市场竞争力,促进业务创新。
43 2
|
5天前
|
存储 缓存 API
API接口详解及其在电子商务中的应用研究
通过这些内容的详细介绍和实际案例分析,希望能帮助您深入理解API接口及其在电子商务中的应用,提高系统的互操作性和用户体验。
37 14
|
1天前
|
JSON 数据挖掘 API
唯品会按关键字搜索 VIP 商品 API 接口的开发应用与收益
在电商蓬勃发展的今天,精准的商品搜索功能至关重要。唯品会的按关键字搜索VIP商品API接口通过高效、精准的检索,提升了用户购物体验和商家销售业绩。该接口基于RESTful架构,采用JSON格式交互,支持唯品会APP内搜索、第三方平台合作及数据分析等场景,显著提升用户活跃度与忠诚度,拓展销售渠道,增加收入,并挖掘数据驱动的商业价值,助力唯品会持续发展。
14 4
|
19天前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
6天前
|
人工智能 运维 监控
发现API安全风险,F5随时随地保障应用和API安全
发现API安全风险,F5随时随地保障应用和API安全
22 7
|
9天前
|
人工智能 监控 安全
自学记录鸿蒙 API 13:骨骼点检测应用Core Vision Skeleton Detection
骨骼点检测技术能够从图片中识别出人体的关键骨骼点位置,如头部、肩部、手肘等,广泛应用于运动健身指导、游戏交互、医疗辅助、安全监控等领域。我决定深入学习HarmonyOS Next API 13中的Skeleton Detection API,并开发一个简单的骨骼点检测应用。通过理解API核心功能、项目初始化与配置、实现检测功能、构建用户界面,以及性能优化和功能扩展,逐步实现这一技术的应用。未来计划将其应用于健身指导和智能监控领域,探索与其他AI能力的结合,开发更智能的解决方案。如果你也对骨骼点检测感兴趣,不妨一起进步!
131 9
|
8天前
|
JSON API 开发者
Lazada 商品评论列表 API 接口:开发、应用与收益
Lazada作为东南亚领先的电商平台,其商品评论数据蕴含丰富信息。通过开发和利用Lazada商品评论列表API接口,企业可深入挖掘这些数据,优化产品、营销和服务,提升客户体验和市场竞争力。该API基于HTTP协议,支持GET、POST等方法,开发者需注册获取API密钥,并选择合适的编程语言(如Python)进行开发。应用场景包括竞品分析、客户反馈处理及精准营销,帮助企业提升销售业绩、降低运营成本并增强品牌声誉。
25 2
|
18天前
|
存储 搜索推荐 安全
介绍几个常用的电商API接口及其应用场景。(一篇文章全清楚)
电商API接口是电商平台高效运营的核心技术支撑,涵盖商品管理、订单管理、支付、客户管理、营销推广和数据分析六大模块。商品管理API实现商品信息的精准上传与动态调整;订单管理API确保订单全流程透明可控;支付API保障交易安全便捷;客户管理API通过数据分析提供个性化服务;营销推广API助力精准营销;数据分析API为决策提供数据支持。各API协同工作,推动电商行业创新发展,构建智能便捷的电商生态。
120 12
|
12天前
|
供应链 搜索推荐 API
1688榜单商品详细信息API接口的开发、应用与收益
1688作为全球知名的B2B电商平台,为企业提供丰富的商品信息和交易机会。为满足企业对数据的需求,1688开发了榜单商品详细信息API接口,帮助企业批量获取商品详情,应用于信息采集、校验、同步与数据分析等领域,提升运营效率、优化库存管理、精准推荐、制定市场策略、降低采购成本并提高客户满意度。该接口通过HTTP请求调用,支持多种应用场景,助力企业在电商领域实现可持续发展。
55 4
|
11天前
|
监控 搜索推荐 API
京东按图搜索京东商品(拍立淘)API接口的开发、应用与收益
京东通过开放商品详情API接口,尤其是按图搜索(拍立淘)API,为开发者、企业和商家提供了创新空间和数据支持。该API基于图像识别技术,允许用户上传图片搜索相似商品,提升购物体验和平台竞争力。开发流程包括注册账号、获取密钥、准备图片、调用API并解析结果。应用场景涵盖电商平台优化、竞品分析、个性化推荐等,为企业带来显著收益,如增加销售额、提高利润空间和优化用户体验。未来,随着数字化转型的深入,该API的应用前景将更加广阔。
56 1