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

liam
• 阅读 782

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

Vercel

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

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

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

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

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

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

1.选择模版

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

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

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

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

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

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

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

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

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

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

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

2.发布

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

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

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

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

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

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

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

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

3.其他部署方式

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

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

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

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

4.Serverless 相关

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

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

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

在本地项目中执行 👇

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

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

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

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

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

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

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
3年前
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
自己平时喜欢钻研技术,做项目。所以有幸发现了网易云音乐Nodejs版的API。网址如下:https://binaryify.github.io/NeteaseCloudMusicApi//打开网址就可以进入如上所示的网站,文档写的不错,非常容易上手。所以之前利用自己的服务器搭建了一个API服务,使用Vue.js快速搭建一个App应用。这个App应用是之前做的
艾木酱 艾木酱
1年前
快速入门|使用MemFire Cloud构建Vue3应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专注于编写前端应用程序代码,加速WEB或APP应用开发。此示例提供了使用MemFireCloud和Vue3
威尔we 威尔we
3年前
Netty 高性能网络协议服务器开发
本文通过一个实例来讲解如何使用框架来开发网络协议服务器,项目使用工具来构建和运行,并且支持部署。项目代码已在GitHub开源,。Netty简介Netty是一个异步、事件驱动的网络应用框架,使用它可以快速开发出可维护良好的、高性能的网络协议服务器。它大幅简化和流程化了网络编程,比如TCP和UDP套接字服务器开发。难能
Vue3.0+TS打造企业级组件库 前端中高级开发者必修
Tomcat是一个开源的JavaWeb应用程序服务器,它提供了丰富的功能和组件,可以帮助我们更轻松地开发、部署和管理Web应用程序。在深入理解Tomcat整体架构及其设计精髓之前
Stella981 Stella981
2年前
Nginx+uwsgi+ssl配置https
使用原始django,太过于笨重和杂多nginx是一个轻量级的web服务器,在处理静态资源和高并发有优势uwsgi是一个基于python的高效率的协议,处理后端和动态网页有优势所以这里采用静态网页交给nginx解析,动态网页交给uwsgi解析,并且nginx配置ssl,即可以使用出高安全,高效率的部署。步骤我
Stella981 Stella981
2年前
Django + Uwsgi + Nginx 实现生产环境部署
本节内容uwsgi介绍uwsgi安装使用nginx安装配置djangowithnginx如何在生产上部署Django?Django的部署可以有很多方式,采用nginxuwsgi的方式是其中比较常见的一种方式。uwsgi介绍uWSGI是一个Web服务器,它实现了WSGI协议、uwsgi、http等协议。N
Stella981 Stella981
2年前
Docker搭建部署Node项目
前段时间做了个node全栈项目,服务端技术栈是nginxkoapostgresql。其中在centos上搭建环境和部署都挺费周折,部署测试服务器,接着上线的时候又部署生产环境服务器。这中间就有很多既无聊又费精力,吃力不讨好的"体力活"。所以就开始思考怎么自动化这部分搭建部署的工作,也就引出了Docker。什么是Doc
玩转服务器之网站篇:新手使用WordPress搭建博客和静态网站部署
在之前的玩转服务器系列文章里,我们介绍了如何构建小型的高可用环境、PHP、Python、Javaweb、docker环境部署,以及Node.jsSSR应用,本篇文章主要介绍新手也能快速上手的WordPress博客搭建和静态网站部署的教程
流浪剑客 流浪剑客
8个月前
Macos整站下载工具:SiteSucker pro for Mac中文版
是一款Mac电脑上的网站下载工具,它可以帮助用户快速地将整个网站下载到本地磁盘中。除了支持HTTP和HTTps协议外,SiteSuckerPro还支持FTP和SFTP协议,可以下载FTP和SFTP服务器上的文件和目录。此外,它还提供了诸如自定义下载规则、排