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

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 上周有个童鞋问我如何快速搭建一个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调试一下!成功返回!

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

相关文章
|
22天前
|
供应链 搜索推荐 数据挖掘
探秘京东 API 接口的神奇应用场景
京东API如同数字钥匙,助力商家实现商品、库存、订单等多平台高效同步,提升效率超80%。支持物流实时追踪,增强用户满意度;赋能精准营销与数据分析,决策准确率提升20%以上,全面优化电商运营。
74 1
|
1月前
|
人工智能 自然语言处理 机器人
使用 API 编程开发扣子应用
扣子(Coze)应用支持通过 API 编程,将 AI 聊天、内容生成、工作流自动化等功能集成至自有系统。主要 API 包括 Bot API(用于消息交互与会话管理)及插件与知识库 API(扩展功能与数据管理)。开发流程包括创建应用、获取密钥、调用 API 并处理响应,支持 Python 等语言。建议加强错误处理、密钥安全与会话管理,提升集成灵活性与应用扩展性。
533 0
|
2月前
|
监控 供应链 搜索推荐
电商数据开发实践:深度剖析1688商品详情 API 的技术与应用
在电商数字化转型中,数据获取效率与准确性至关重要。本文介绍了一款高效商品详情API,具备全维度数据采集、价格库存管理、多媒体资源获取等功能,结合实际案例探讨其在电商开发中的应用价值与优势。
|
3月前
|
JSON 安全 Java
API 一键转换 MCP 服务!Higress 助今日投资快速上线 MCP 市场
今日投资的技术负责人介绍了如何通过Higress MCP 市场完善的解决方案,快捷地将丰富的金融数据 API 转化为 MCP 工具,帮助用户通过 MCP 的方式非常轻松地调用专业金融数据,自由快速地构建自己的金融大模型应用。
554 23
|
2月前
|
API 定位技术 调度
实现精准定位的—坐标系经纬度转换API技术说明和行业应用
在地图服务、物流调度等应用中,多源地理位置数据因采用不同坐标系(如WGS84、GCJ02、BD09)需统一转换,以避免位置偏移影响路径规划与分析精度。本文介绍坐标转换背景、技术方案及Python调用示例,强调其在智慧交通与物流系统中的重要性。
372 0
|
4月前
|
人工智能 供应链 安全
未来电商趋势:API技术在智能供应链中的应用
随着电商蓬勃发展,供应链管理正借助API技术实现智能化升级。本文解析API作为电商生态“粘合剂”的作用,探讨其在库存管理、物流协同和风险预测中的关键应用,以及对AI融合、区块链安全和实时生态的推动。API不仅提升效率与用户体验,更重塑电商未来格局,成为企业竞争的核心优势。拥抱API集成,将是应对市场复杂性的关键策略。
112 5
|
4月前
|
存储 供应链 API
区块链技术在电商API中的应用:保障数据安全与交易透明
区块链技术在电商API中的应用,为数据安全与交易透明提供了新方案。通过数据加密、分布式存储、智能合约管理、商品溯源及实时结算等功能,有效提升电商数据安全性与交易可信度。然而,技术成熟度、隐私保护和监管合规等挑战仍需克服。未来,随着物联网、大数据等技术融合及政策支持,区块链将在电商领域发挥更大潜力,推动行业智能化发展。
|
1月前
|
人工智能 数据可视化 测试技术
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
332 11
|
24天前
|
Java API 开发者
揭秘淘宝详情 API 接口:解锁电商数据应用新玩法
淘宝详情API是获取商品信息的“金钥匙”,可实时抓取标题、价格、库存等数据,广泛应用于电商分析、比价网站与智能选品。合法调用,助力精准营销与决策,推动电商高效发展。(238字)
103 0
|
1月前
|
安全 API 数据安全/隐私保护
【Azure 环境】Microsoft Graph API实现对Entra ID中应用生成密码的时间天数
本文介绍如何通过 Azure 的 App Management Policy 限制用户在创建 AAD 应用程序的 Client Secret 时设置最长 90 天的有效期。通过 Microsoft Graph API 配置 defaultAppManagementPolicy,可有效控制密码凭据的生命周期,增强安全管理。