5 minutes to quickly launch web applications and APIs (vercel)

“

Last week, a kid asked me how to build one quickly Web application , I want to practice my hand , Do not consider purchasing servers . I recommended the popular one some time ago Vercel, Next I'll show you 5 Minutes to go ！

Vercel

Vercel You can understand it as a deployment tool , Support the deployment of static web pages and Node service , After deployment, you can also access the generated domain name https.

vercel Official website

More than that , Except for his own son Nextjs outside , It also provides a lot of template support , for example ：

• Nuxt.js: Vue Of SSR frame
• Hexo: Quickly generate blog sites
• Remix： An edge native full stack JavaScript frame
• Templates up to 30 Kind of ..

Template support

Vercel The core of the system mainly includes development 、 preview 、 Deploy . By authorization Github to Vercel after , You can select the project we want to deploy Github Warehouse , The project automatically updates the deployment . Next, I'll teach you to do it in one step ！

1. Select template

“

This demonstration practice framework , I choose vercel My son Next.js. He provided many cases , Here I choose one Template ：with-vercel-fetch. To achieve a simple SSR service .

Select template

stay Vercel Create a project , You'll find that Vercel Follow Github It can be linked ！ Support to help you create a private Github Warehouse , The essence is similar Github Page, however Github Page Your access speed is too slow . this Vercel Directly kill .

stay Vercel After helping us create the warehouse , Yes Demo Make some adjustments in the warehouse

Here I am fetch Of API The interface uses Apifox Provided Cloud Mock The function of , You can adjust the interface data without setting up a set of back-end services ！

stay Apifox Of Web Create an interface in version , Then, the interface return fields are Mock Customize （ Support customization Mock data ）

This is a cloud I customized Mock Interface https://mock.apifox.cn/m1/388694-0-default/star/list

Apifox Cloud Mock

Interested friends can experience www.apifox.cn

2. Release

After completing the above steps ,vercel The deployment phase will be automatically executed , And generate the access domain name , At the same time, you can see the preview effect of the application ！

Successful release

And later your github Warehouse only main Any changes to the branch ,vercel Can automatically trigger Deploy Deploy .

For a final visit, we use vercel Deployed pages

“

Ah Le classmate ： Well, if I want to replace the domain name ？ Do not use the domain name assigned by him

Tolerable , If you want to bind an independent domain name , You can operate view domain  Perform custom domain name binding , Finally, go to the domain name resolution to resolve CNAME To cName.vercel-dns.com

Custom domain name

3. Other deployment methods

Vercel Provide deploy Hook, You can vercel Configuration on the control panel in the created project deploy hook, You just need to fill in deploy（ Deploy ） The branch of git branch, And the corresponding hook name （ Customize ）, You can configure an independent trigger mode . The configuration is as follows

image.png

Finally, we initiate the request on the command line , You can trigger the construction and deployment of the project . Is it convenient ！

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

4.Serverless relevant

“

Vercel It is essentially a zero configuration Serverless Deployment platform , What is Serverless Well ？ You can look at the previous article written by tree jam ： You learn BFF and Serverless Did you?

Serverless

Vercel Realization Serverless The bottom layer is based on AWS（ Amazon cloud ） Of lambda This mountain . We use it vercel Can deploy Serverless Interface , Next, we will develop a simple Serverless API

Execute in a local project

1.  npm install [email protected] -g （ Global installation ）
2.  vercel login
3.  vercel ( In addition to initialization .vercel file   It can also trigger the Deploy Deploy )

initialization vercel

After completing the appeal operation , We can start work ！ We found that vercel The command will help us create .vercel Folder , Then we create a with the directory api Folder , And create a new one " Cloud functions " message, Let's look at the code structure ！

Cloud function code

Finally, re execute vercel, You can deploy this Serverless API 了 ! We'll use Apifox debugged ！ Successfully returns ！

Apifox debugging