5分鐘快速上線Web應(yīng)用和API（Vercel）
哈嘍，我是樹醬。上周有個(gè)童鞋問我如何快速搭建一個(gè)Web應(yīng)用，想拿來練手，就不考慮購置服務(wù)器。我推薦了前段時(shí)間很火的
?Vercel，接下來我?guī)?分鐘上手！
Vercel
Vercel 你可以理解為一個(gè)部署工具，支持部署靜態(tài)網(wǎng)頁和Node服務(wù)，部署后你還可以訪問它自帶生成的域名https。
不僅僅如此，除了他的親兒子Nextjs之外，它還提供了很多模版支持，譬如：
Nuxt.js: Vue的SSR框架 Hexo: 快速生成博客網(wǎng)站 Remix：一款邊緣原生的全棧 JavaScript 框架 模版多達(dá)30種..
Vercel的核心主要包括開發(fā)、預(yù)覽、部署。通過授權(quán)Github給Vercel后，就可以選擇我們要部署的項(xiàng)目Github倉庫，項(xiàng)目就自動(dòng)更新部署了。接下來教你一步到位！
1.選擇模版
本次演示實(shí)踐框架，我選用vercel的親兒子
?Next.js。他提供了很多??案例，這里我選擇一個(gè) 模版：with-vercel-fetch。來實(shí)現(xiàn)一個(gè)簡單的SSR服務(wù)。
在Vercel創(chuàng)建一個(gè)項(xiàng)目，你會發(fā)現(xiàn)Vercel跟Github是可以聯(lián)動(dòng)的！支持幫你創(chuàng)建一個(gè)私有的Github倉庫，本質(zhì)是類似Github Page，但是Github Page的訪問速度太慢。這點(diǎn)Vercel直接秒殺了。
在Vercel幫我們創(chuàng)建的倉庫之后，對Demo倉庫做一些調(diào)整 ??
這里我fetch的API接口使用的是Apifox提供的云端Mock的功能，自己不用搭建一套后端服務(wù)也可以調(diào)接口數(shù)據(jù)！??
在Apifox的Web版中新建一個(gè)接口，然后對接口返回字段進(jìn)行Mock自定義（支持自定義Mock數(shù)據(jù)）??
這是我自定義的一個(gè)云端Mock接口 https://mock.apifox.cn/m1/388694-0-default/star/list
感興趣的小伙伴可以體驗(yàn)下 ?? Apifox
2.發(fā)布
完成上述步驟后，vercel會自動(dòng)執(zhí)行部署環(huán)節(jié)，并生成訪問域名，同時(shí)你可以看到應(yīng)用的預(yù)覽效果！
而且后期你的github倉庫只main分支有任何改動(dòng)，vercel可以自動(dòng)觸發(fā)Deploy部署。
最后訪問一下我們用vercel部署好的頁面
????? 阿樂同學(xué)：那如果我想替換域名可以嘛？不用他分配的域名
?
可以的，如果你想綁定獨(dú)立域名，你可以操作view domain 進(jìn)行自定義域名綁定，最后去域名解析解決解析CNAME到cName.vercel-dns.com
3.其他部署方式
Vercel提供deploy Hook， 你可以在vercel創(chuàng)建的項(xiàng)目中的控制面板上配置deploy hook，只需要填寫deploy（部署）的分支 git branch, 還有對應(yīng)的hook名稱（自定義），就可以配置一個(gè)獨(dú)立的觸發(fā)方式。配置如下 ??
最后我們在命令行中發(fā)起請求，就可以觸發(fā)該項(xiàng)目的構(gòu)建部署了。是不是很方便！??
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_GeziGEUiSxxxxxx/tV4Wm5MO2j
4.Serverless 相關(guān)
Vercel 本質(zhì)上是一個(gè)零配置的Serverless部署平臺，那什么是Serverless呢？你可以看看之前樹醬寫的文章：?? 你學(xué)BFF和Serverless了嗎
?
Vercel實(shí)現(xiàn)Serverless的底層是基于AWS（亞馬遜云） 的lambda這座大山。我們用vercel可以部署Serverless 接口，接下來我們通過本地來開發(fā)一個(gè)簡單的 Serverless API
在本地項(xiàng)目中執(zhí)行 ??
1. npm install vercel@latest -g （全局安裝）
2. vercel login
3. vercel (除了初始化.vercel文件 也可以觸發(fā)項(xiàng)目的Deploy部署)
完成上訴操作后，我們就可以開工了！我們發(fā)現(xiàn)vercel命令會幫我們創(chuàng)建 .vercel文件夾，然后我們在跟目錄創(chuàng)建一個(gè)api文件夾，并在其中新建一個(gè)"云函數(shù)" message，我們看下代碼結(jié)構(gòu)！
最后重新執(zhí)行vercel，就可以部署這個(gè)Serverless API了! 我們再用Apifox調(diào)試一下！成功返回！
