首页 > 解决方案 > 同时部署 Node.js Restfull API 和 Vue.js 应用

问题描述

我想在一个项目中将 Node.js express API 和 Vue.js 应用程序与 Vercel 部署在同一个域中。

我在根文件夹中有一个 Vue.js 应用程序,在我的根文件夹中有另一个文件夹,例如./api.

我在我的文件中尝试了这个脚本package.json(在我的 Vue.js 应用程序中):

"serve": "vue-cli-service serve && cd api && npm run start".

这是我的 Node.js 应用程序的package.json脚本:

"start": "node index.js"

但它不起作用。(我知道“为什么它不起作用”的原因。)

我如何在同一个项目中部署这两个应用程序?

(所以我想要一个 API 像这样工作example.com/api/urls:)

标签: javascriptnode.jsvue.jsvercel

解决方案


Vercel 是一个无服务器平台,而您对 Express 的使用是“有状态的”,这意味着您启动了一个长时间运行的服务器进程来侦听请求。另一方面,无服务器由短时间运行的进程组成,这些进程根据需要生成以处理请求。

查看本指南以将 Express 与 Vercel 结合使用:https ://vercel.com/guides/using-express-with-vercel

最简单的解决方案是将整个 Express 应用程序放入单个无服务器函数中(即使这是一种反模式):

// /api/index.js

const app = require('express')()
const { v4 } = require('uuid')

app.get('/api', (req, res) => {
  const path = `/api/item/${v4()}`
  res.setHeader('Content-Type', 'text/html')
  res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate')
  res.end(`Hello! Go to item: <a href="${path}">${path}</a>`)
})

app.get('/api/item/:slug', (req, res) => {
  const { slug } = req.params
  res.end(`Item: ${slug}`)
})

module.exports = app

并确保您在您的vercel.json

{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

(这些代码片段直接取自上面链接的指南——我强烈建议您遵循它!)

更好的无服务器方法是将您的 Express 路由拆分为自己的无服务器功能,可以按需调用。


此外,启动 API 的“服务”脚本是不必要的,因为顶级 API 目录是 Vercel 的零配置。您可以简单地使用"serve": "vue-cli-service serve".


推荐阅读