如何将 Node/Express 应用部署到 Vercel
这只是一个简单的例子,当然更复杂的应用程序也可以工作。
先决条件
步骤 1
如果您还没有Vercel帐户,请创建一个。
Vercel 是一个适用于静态网站和无服务器函数的云平台,完美契合您的工作流程。它使开发人员能够托管 Jamstack 网站和 Web 服务,这些网站和服务可以即时部署、自动扩展,并且无需任何配置即可进行无人值守。
第 2 步
使用 npm 在你的计算机上全局安装 Vercel https://www.npmjs.com/package/vercel
npm i -g vercel
设置项目
创建项目
mkdir vercel-node-app
cd vercel-node-app
touch index.js
npm init -y
npm i express
在代码编辑器中打开项目,然后在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}`));
package.json
在文件中创建运行脚本
"scripts": {
"start": "node index.js"
},
运行以下命令,查看浏览器中本地运行的 Node 应用
npm run start
部署到 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
完成后,它会给你一些链接。应用暂时无法运行,只会显示你文件里的代码index.js
。你需要创建一个vercel.json
文件并将其放在根文件夹中,以便 Vercel 知道它是一个 Node 应用。务必确保你的index.js
文件与项目的其他服务器端代码一起放在根文件夹中,否则你的应用将无法运行。
创建一个vercel.json
文件并将其放在项目文件夹的根目录中,然后添加以下代码
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
现在再次运行命令vercel
来部署你的应用。打开“生产”链接,你的应用应该可以在线运行,并拥有完整的工作路径。