前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >5分钟快速上线Web应用和API(Vercel)

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

作者头像
树酱
发布2022-09-09 10:19:53
1.8K0
发布2022-09-09 10:19:53
举报
文章被收录于专栏:前端那些趣事

哈喽,我是树酱。上周有个童鞋问我如何快速搭建一个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接口 mock.apifox.cn/m1/388694-0…

感兴趣的小伙伴可以体验下 👉 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名称(自定义),就可以配置一个独立的触发方式。 配置如下 👇

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

代码语言:javascript
复制
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

在本地项目中执行 👇

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

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

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

最后

往期热门文章📖:

你好,我是🌲 树酱,请你喝杯🍵 记得三连哦~

1.阅读完记得点个赞哦,有👍 有动力

2.关注公众号前端那些趣事,陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vercel
    • 1.选择模版
      • 2.发布部署
        • 3.其他部署方式
          • 4.Serverless 相关
          • 最后
          相关产品与服务
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档