javascript - 同时部署 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
:)
解决方案
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"
.
推荐阅读
- c - 具有多个空格字符的 printf 符号?
- api - 一次检索所有数据,而不是单独调用每个引用
- c# - 使用 CSVWriter 强制字符串长度
- python-3.x - 如何根据条件从python中的pandas数据框中选择列
- django - IntegrityError - 1048,不能为空 - 无法保存验证数据
- javascript - 香草JS动画?
- pine-script - 如何创建带有偏移量(stepshift)的 Hala 指标和基于该指标的策略以及一个多头头寸的简单策略脚本
- java - 在 Java 中重命名平面文件的替代方法
- javascript - 如何修复 Sass 加载程序的 ValidationError?
- php - 如何按日期对回复进行排序 - 最新回复首先显示