同时部署Node.js restful API和Vue.js应用

Question

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

我在根文件夹中有一个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"

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

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

(所以我想要一个API的工作方式:example.com/api/urls)

Answer 1

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"。