What is Vercel? This article will take you to learn about Vercel and introduce how to deploy the Node service in Vercel. I hope it will be helpful to you!
When I was writing Interview Frequent: HTTP Cache, I once wrote two demos on strong cache and negotiated cache, but the cache must be on the server side. To do it, you can only paste the code and not experience it on the web page (although I posted a gif)
All the author's demo examples are placed on the github page. Its characteristic is that static resources can be deployed without a server. But it does not have the ability to deploy server-side applications
Recently, when I was learning about CI/CD knowledge points, I thought of Vercel and wondered if I could put server-side applications on vercel?
Vercel is an out-of-the-box website hosting platform that facilitates developers to quickly deploy their websites. It has CND nodes all over the world, so it is more stable and faster to access than Github’s official github pages
Koala Talks about Open Source I once introduced it: Vercel 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
https: //juejin.cn/post/7057333396359348255
Simply put, it can simplify the deployment of applications to the server, and it is free without buying a server
Vercel official website: https://vercel.com/
npm i vercel -g) , if you don’t know what the commands are, just-h
: Log in to Vercel account
: Start the service locally
: Start the service locally and print the log
: Deploy local resources to Vercel
: Update the local web page
vercel can be replaced by vc, which is the abbreviation of Vercel
npm i vercel -g
vercel login
<!DOCTYPE html>
<html>
<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>vercel dev
.vercel in the root directory, so you need to fill in some necessary information. At this time, your local and Vercel servers will be bound
vercel
Deployed to production. Run vercel --prod to overwrite later. If we want to update resources later, use vercel --prod
: Used during development to check whether the application Running: Deployment service: Update application (resource)Vercel backend to view the deployment status
回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键
同样建立新项目
mkdir vercel-koa2 cd vercel-koa2 npm init -y npm i koa -S touch index.js
编写 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： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口
使用命令vercel dev
发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之
...
"scripts": {
"build": "node index.js",
},
...再次使用 vercel dev，node 服务跑起来了
于是乎我们部署它
vercel
搞半天没部署上去，后台查看也是无果，呜呼悲哉
google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为
下载 @vercel/node 包
npm i @vercel/node -S
填写配置：
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}执行 vercel 部署服务
访问地址：https://vercel-koa2-t511069160.vercel.app
至此，就完成了 Koa 服务的部署
与部署静态资源多了两个步骤
下载 @vercel/node 和配置 vercel.json
Vercel 当然不止笔者所说的这一功能，它还可以自定义域名、serverless、全球支持的 CDN等等
可以毫不夸张地说，用 Vercel 来代替繁琐的云服务器，配合 Github Action 做 CI/CD，就
个人开发者或小团队而言，这或许就是神器
后续笔者也会尝试用 Vercel 部署一些小应用，实践出真理
附上项目地址：https://github.com/johanazhu/vercel-demo
原文地址：https://juejin.cn/post/7094911994226016292
作者：山头人汉波
更多node相关知识，请访问：nodejs 教程！
The above is the detailed content of What is Vercel? How to deploy Node service?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
