如何将 Node/Express 应用部署到 Vercel

2025-06-08

如何将 Node/Express 应用部署到 Vercel

这只是一个简单的例子,当然更复杂的应用程序也可以工作。

先决条件

步骤 1

如果您还没有Vercel帐户,请创建一个。

Vercel 是一个适用于静态网站和无服务器函数的云平台,完美契合您的工作流程。它使开发人员能够托管 Jamstack 网站和 Web 服务,这些网站和服务可以即时部署、自动扩展,并且无需任何配置即可进行无人值守。

第 2 步

使用 npm 在你的计算机上全局安装 Vercel https://www.npmjs.com/package/vercel

npm i -g vercel
Enter fullscreen mode Exit fullscreen mode

设置项目

创建项目

mkdir vercel-node-app
cd vercel-node-app
touch index.js
npm init -y
npm i express
Enter fullscreen mode Exit fullscreen mode

在代码编辑器中打开项目,然后在index.js文件中创建一个 Node 服务器

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Home Page Route'));

app.get('/about', (req, res) => res.send('About Page Route'));

app.get('/portfolio', (req, res) => res.send('Portfolio Page Route'));

app.get('/contact', (req, res) => res.send('Contact Page Route'));

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

package.json在文件中创建运行脚本

    "scripts": {
        "start": "node index.js"
    },
Enter fullscreen mode Exit fullscreen mode

运行以下命令,查看浏览器中本地运行的 Node 应用

npm run start
Enter fullscreen mode Exit fullscreen mode

部署到 Vercel

确保您位于项目的根文件夹中,然后vercel在终端中运行该命令。

使用下面的项目设置作为指南,使用 Vercel 设置您自己的项目。

? Set up and deploy “~/Desktop/username/vercel-node-app”? [Y/n] y
? Which scope do you want to deploy to? username
? Link to existing project? [y/N] n
? What’s your project’s name? vercel-node-app
? In which directory is your code located? ./
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n
Enter fullscreen mode Exit fullscreen mode

完成后,它会给你一些链接。应用暂时无法运行,只会显示你文件里的代码index.js。你需要创建一个vercel.json文件并将其放在根文件夹中,以便 Vercel 知道它是一个 Node 应用。务必确保你的index.js文件与项目的其他服务器端代码一起放在根文件夹中,否则你的应用将无法运行。

创建一个vercel.json文件并将其放在项目文件夹的根目录中,然后添加以下代码

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

现在再次运行命令vercel来部署你的应用。打开“生产”链接,你的应用应该可以在线运行,并拥有完整的工作路径。

鏂囩珷鏉ユ簮锛�https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa
PREV
React 自定义 Hooks 与辅助函数 - 何时同时使用
NEXT
全栈开发人员与软件工程师