Table of Contents
What is Vercel
Official website
Vercel Demo
部署 Node 服务
延伸思考
Home Web Front-end JS Tutorial What is Vercel? How to deploy Node service?

What is Vercel? How to deploy Node service?

May 07, 2022 pm 09:34 PM
nodejs node.js node

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!

What is Vercel? How to deploy Node service?

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?

What is 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

Official website

  • Vercel official website: https://vercel.com/

  • ##Vercel workflow official website (the webpage effect is cool): https:/ /vercel.com/workflow

Common command line

Download Vercel to the global (

npm i vercel -g) , if you don’t know what the commands are, just-h

What is Vercel? How to deploy Node service?

The author has limited knowledge about it. Here is a list of the commands I know

  • vercel login: Log in to 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 the local web page
vercel can be replaced by vc, which is the abbreviation of Vercel

Deploying static services

We now have vercel As we know, it was mentioned in the previous article that Vercel can simplify the deployment of services by developers, but to what extent can it be simplified?

Here we deploy a simple static service from scratch

Install Vercel locally

npm i vercel -g
Copy after login

Log in to Vercel

vercel login
Copy after login

What is Vercel? How to deploy Node service?

Select After the connection method is established,

What is Vercel? How to deploy Node service?

yoyo, man will pop up on the website. what's your name?

Create an HTML file, we will upload it to the Vercel server later

<!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 id="Vercel-nbsp-Demo">Vercel Demo</h1>
</body>

</html>
Copy after login

Test it locally, enter the command line

vercel dev
Copy after login

What is Vercel? How to deploy Node service?

Because this is our first execution, there is no

.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

Deployment service

vercel
Copy after login
Copy after login

What is Vercel? How to deploy Node service?

You can access our static service

in the screenshot at https://vercel-sample-ten.vercel.app/ We also saw this sentence

Deployed to production. Run vercel --prod to overwrite later. If we want to update resources later, use vercel --prod

Okay, except for the necessary login, we use three commands to deploy the local service to the Vercel server

  • vercel dev: Used during development to check whether the application Running
  • vercel: Deployment service
  • vercel --prod: Update application (resource)
You can log in to the

Vercel backend to view the deployment status

What is Vercel? How to deploy Node service?

部署 Node 服务

回归主题,最终我们想部署的是 Nodejs 服务,是后端服务,而非前端静态资源服务,这是关键

同样建立新项目

mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
Copy after login

编写 index.js 中的内容

const Koa = require(&#39;koa&#39;);
const app = new Koa();

app.use(async ctx => {
    ctx.body = &#39;Hello Vercel&#39;;
});

app.listen(3008, () => {
    console.log(&#39;3008项目启动&#39;)
});
Copy after login

PS: 3000端口默认会被 Vercel 使用,所以 Koa 服务要换个端口

使用命令vercel dev

What is Vercel? How to deploy Node service?

发现给我报错了,理由是 package.json 的 scripts 中没有 build 快捷符,修改之

...
"scripts": {
    "build": "node index.js",
},
...
Copy after login

再次使用 vercel dev,node 服务跑起来了

于是乎我们部署它

vercel
Copy after login
Copy after login

What is Vercel? How to deploy Node service?

搞半天没部署上去,后台查看也是无果,呜呼悲哉

google后,发现原来还有一个 vercel.json,可以用 vercel.json 配置和覆盖 vercel 默认行为

下载 @vercel/node

npm i @vercel/node -S
Copy after login

填写配置:

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ]
}
Copy after login

执行 vercel 部署服务

What is Vercel? How to deploy Node service?

访问地址: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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is nodejs a backend framework? Is nodejs a backend framework? Apr 21, 2024 am 05:09 AM

Node.js can be used as a backend framework as it offers features such as high performance, scalability, cross-platform support, rich ecosystem, and ease of development.

How to connect nodejs to mysql database How to connect nodejs to mysql database Apr 21, 2024 am 06:13 AM

To connect to a MySQL database, you need to follow these steps: Install the mysql2 driver. Use mysql2.createConnection() to create a connection object that contains the host address, port, username, password, and database name. Use connection.query() to perform queries. Finally use connection.end() to end the connection.

What are the global variables in nodejs What are the global variables in nodejs Apr 21, 2024 am 04:54 AM

The following global variables exist in Node.js: Global object: global Core module: process, console, require Runtime environment variables: __dirname, __filename, __line, __column Constants: undefined, null, NaN, Infinity, -Infinity

Is there a big difference between nodejs and java? Is there a big difference between nodejs and java? Apr 21, 2024 am 06:12 AM

The main differences between Node.js and Java are design and features: Event-driven vs. thread-driven: Node.js is event-driven and Java is thread-driven. Single-threaded vs. multi-threaded: Node.js uses a single-threaded event loop, and Java uses a multi-threaded architecture. Runtime environment: Node.js runs on the V8 JavaScript engine, while Java runs on the JVM. Syntax: Node.js uses JavaScript syntax, while Java uses Java syntax. Purpose: Node.js is suitable for I/O-intensive tasks, while Java is suitable for large enterprise applications.

What is the difference between npm and npm.cmd files in the nodejs installation directory? What is the difference between npm and npm.cmd files in the nodejs installation directory? Apr 21, 2024 am 05:18 AM

There are two npm-related files in the Node.js installation directory: npm and npm.cmd. The differences are as follows: different extensions: npm is an executable file, and npm.cmd is a command window shortcut. Windows users: npm.cmd can be used from the command prompt, npm can only be run from the command line. Compatibility: npm.cmd is specific to Windows systems, npm is available cross-platform. Usage recommendations: Windows users use npm.cmd, other operating systems use npm.

Is nodejs a back-end development language? Is nodejs a back-end development language? Apr 21, 2024 am 05:09 AM

Yes, Node.js is a backend development language. It is used for back-end development, including handling server-side business logic, managing database connections, and providing APIs.

Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node? Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node? Mar 05, 2025 pm 05:57 PM

Detailed explanation and installation guide for PiNetwork nodes This article will introduce the PiNetwork ecosystem in detail - Pi nodes, a key role in the PiNetwork ecosystem, and provide complete steps for installation and configuration. After the launch of the PiNetwork blockchain test network, Pi nodes have become an important part of many pioneers actively participating in the testing, preparing for the upcoming main network release. If you don’t know PiNetwork yet, please refer to what is Picoin? What is the price for listing? Pi usage, mining and security analysis. What is PiNetwork? The PiNetwork project started in 2019 and owns its exclusive cryptocurrency Pi Coin. The project aims to create a one that everyone can participate

How to deploy nodejs project to server How to deploy nodejs project to server Apr 21, 2024 am 04:40 AM

Server deployment steps for a Node.js project: Prepare the deployment environment: obtain server access, install Node.js, set up a Git repository. Build the application: Use npm run build to generate deployable code and dependencies. Upload code to the server: via Git or File Transfer Protocol. Install dependencies: SSH into the server and use npm install to install application dependencies. Start the application: Use a command such as node index.js to start the application, or use a process manager such as pm2. Configure a reverse proxy (optional): Use a reverse proxy such as Nginx or Apache to route traffic to your application

See all articles