Introduction
I wrote two demos before when I wrote an interview: HTTP caching , on strong caching and negotiated caching, but caching has to be done on the server side, you can only paste the code, not on the web page (although I posted a gif)
All the demo examples of the author are placed on the github page, which is characterized by the fact that static resources can be deployed without a server, but it does not have the ability to deploy server-side applications
Recently, when I learned about the knowledge points of CI/CD, I thought of Vercel, and I wondered if I could put server-side applications on Vercel?
What is Vercel
Vercel is an out-of-the-box website hosting platform that allows developers to quickly deploy their website. It has CND nodes all over the world, so it is more stable and faster than Github's official github pages
Koala talked about open source and introduced it: Vercel and Next.js: The business logic behind the open source all-star team
Text version: Vercel and Next.js: The Business Logic Behind the Open Source All-Star Team
Simply put, it can deploy applications to the server in a very simple way, and it is free without buying a server.
Official website
Vercel Workflow official website (web page effect is cool)
Common command lines
Download Vercel to the global ( npm i vercel -g ), I don't know what command is -h
The author has limited understanding of it. Here are the commands that the author knows.
-
vercel login: Log in to your Vercel account -
vercel dev: Start the service locally -
vercel dev --bug: Start the service locally and print the log -
vercel: Deploy local resources to Vercel -
vercel --prod: Update local webpage
Vercel can be replaced by vc, vc is the abbreviation of Vercel
Deploy static services
We now have an understanding of vercel. As mentioned earlier, Vercel can simplify developer deployment services. How much can it simplify?
Here we deploy a simple static service from scratch
Install Vercel locally
npm i vercel -gLogin to Vercel
vercel login 
After selecting the connection method, it will pop up on the website
Yoyo, man. what's your name?
Create an HTML file that we will upload to the Vercel server later
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vercel Demo</title>
</head>
<body>
<h1>Vercel Demo</h1>
</body>
</html>Test it locally and enter the command line
vercel dev 
Because this is our first execution, there is no .vercel in the root directory, so we need to fill in some necessary information, then your local and Vercel server are bound
Deployment service
vercel 
Our static service can be accessed at https://vercel-sample-ten.vercel.app/
In the screenshot, we also saw this sentence Deployed to production. Run vercel --prod to overwrite later , we will update the resources later, just use vercel --prod
Well, except for the necessary login, we deployed the local service to the Vercel server with three commands
-
vercel dev: used during development to check whether the application can run -
vercel: Deployment service -
vercel --prod: update application (resource)
You can log in to the Vercel backend to view the deployment status
Deploy the Node service
Returning to the topic, in the end we want to deploy a Node service, a back-end service, not a front-end static resource service, this is the key
Also create a new project
mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js Write the contents of index.js
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008项目启动')
});PS: Port 3000 will be used by Vercel by default, so the Koa service needs to change the port
Use the command vercel dev
I found that it gave me an error, the reason is that there is no build shortcut in the scripts of package.json , modify it
...
"scripts": {
"build": "node index.js",
},
... Use vercel dev again, the node service is running
so we deploy it
vercel 
I haven't deployed it for a long time, and the background check is also fruitless, so sad
After google, I found that there is also a vercel.json , you can use vercel.json to configure and override the default behavior of vercel
Download @vercel/node package
npm i @vercel/node -SFill in the configuration:
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
} Execute vercel Deploy Service
Access address: https://vercel-koa2-t511069160.vercel.app
At this point, the deployment of the Koa service is completed
There are two more steps to deploying static resources
Download @vercel/node and configure vercel.json
Extended thinking
Of course, Vercel is not only the function that the author said, it can also customize the domain name, serverless, CDN supported by the world, etc.
It is no exaggeration to say that using Vercel to replace the cumbersome cloud server and cooperate with Github Action for CI/CD,
For individual developers or small teams, this may be an artifact
In the follow-up, the author will also try to deploy some small applications with Vercel and practice the truth
Attach the project address: https://github.com/johanazhu/vercel-demo
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。