如何在Cyclic上同时部署Vue.js前端与json-server后端

本教程详细介绍了如何在Cyclic平台上同时部署并运行Vue.js前端应用和json-server后端API。通过利用PM2作为进程管理器，开发者可以有效协调前端和后端脚本的并发执行，确保应用在部署环境中的正常运作。文章将指导您配置`package.json`和`ecosystem.config.js`文件，以实现高效的进程管理和端口分离，从而解决前后端协同运行的挑战。

引言：部署环境中前后端并发运行的挑战

在开发Vue.js等前端应用时，我们常常需要一个后端API来提供数据服务。在本地开发环境中，通常可以使用concurrently等工具轻松地同时启动前端开发服务器（如Vite）和后端API服务（如json-server）。然而，当我们将应用部署到PaaS平台（如Cyclic）时，如何让前端应用和后端API在同一个部署实例上并发运行，并确保它们能够正确通信，就成为了一个常见的挑战。Cyclic这类平台通常期望一个单一的start命令来启动应用，这使得直接运行多个独立脚本变得复杂。

PM2：强大的Node.js进程管理解决方案

为了解决这一问题，我们可以引入PM2。PM2是一个功能丰富的Node.js生产级进程管理器，它允许您在后台运行应用程序，并提供负载均衡、自动重启、日志管理等功能。通过PM2，我们可以配置多个独立的进程（例如Vue前端的静态文件服务和json-server后端API）在同一个部署环境中协同工作。

配置步骤详解

以下是使用PM2在Cyclic上同时运行Vue.js前端和json-server后端的具体配置步骤。

立即学习“前端免费学习笔记（深入）”；

步骤一：更新 package.json 文件

首先，我们需要修改项目的package.json文件，引入PM2的启动、停止和重启命令。这将允许Cyclic平台通过执行npm start来启动PM2，进而管理前端和后端进程。

{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"backend": "json-server --watch db.json --port 5000",
"start": "pm2 start ecosystem.config.js --env production", // 新增PM2启动命令
"stop": "pm2 stop ecosystem.config.js", // PM2停止命令
"restart": "pm2 restart ecosystem.config.js" // PM2重启命令
},
"dependencies": {
"json-server": "^0.17.3",
"serve": "^14.2.0",
"vue": "^3.3.2",
"vue-router": "^4.0.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"vite": "^4.3.5"
}
}

在上述配置中：

• “start”: “pm2 start ecosystem.config.js –env production” 是关键。当Cyclic执行npm start时，它会启动PM2并加载ecosystem.config.js中定义的应用程序配置，以生产环境模式运行。
• serve包已包含在dependencies中，它将在后续用于服务Vue应用的静态文件。

步骤二：创建 ecosystem.config.js 文件

接下来，我们需要在项目根目录下创建一个名为ecosystem.config.js的文件。这个文件是PM2的配置文件，用于定义PM2应该管理哪些应用程序，以及每个应用程序的运行方式、端口、环境变量等。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

module.exports = {
apps : [
{
name: "vue-frontend", // 前端应用名称
script: "npx", // 使用npx来执行本地安装的包
args: "serve -s dist -p 3000", // 服务已构建的Vue应用，从'dist'目录，监听3000端口
instances: 1, // 运行一个实例
autorestart: true, // 崩溃时自动重启
watch: false, // 生产环境通常不需要监听文件变化
max_memory_restart: '1G', // 最大内存限制，超过则重启
env: {
NODE_ENV: "production",
PORT: 3000 // 前端内部监听端口
}
},
{
name: "json-backend", // 后端API名称
script: "npx", // 使用npx来执行本地安装的包
args: "json-server --watch db.json --port 5000", // 运行json-server，监听db.json，监听5000端口
instances: 1,
autorestart: true,
watch: ["db.json"], // 生产环境通常不建议watch，除非db.json会被动态修改
max_memory_restart: '1G',
env: {
NODE_ENV: "production",
PORT: 5000 // 后端内部监听端口
}
}
]
};

在这个配置文件中：

• 我们定义了两个应用：vue-frontend和json-backend。
• vue-frontend：
  • script: “npx” 和 args: “serve -s dist -p 3000” 表示PM2将通过npx执行serve命令，服务Vue应用构建后的静态文件（位于dist目录），并使其监听内部的3000端口。请注意，npm run build通常是Cyclic部署过程中的一个独立构建步骤，在此之前会执行，确保dist目录已存在。
• json-backend：
  • script: “npx” 和 args: “json-server –watch db.json –port 5000” 表示PM2将通过npx执行json-server命令，监听db.json文件，并使其监听内部的5000端口。在生产环境中，–watch参数可能不是必需的，除非您希望db.json在服务器上动态更新并实时反映。
• instances、autorestart、watch和max_memory_restart等参数用于控制进程的行为和资源使用。
• env对象允许为每个应用设置特定的环境变量。

部署与注意事项

1. Cyclic平台的行为：当您将应用部署到Cyclic时，平台会首先安装所有依赖，然后通常会查找并执行npm run build（如果存在），最后执行npm run start。通过上述配置，npm run start将启动PM2，而PM2会根据ecosystem.config.js来管理vue-frontend和json-backend这两个进程。

2. 端口管理：

   • 在ecosystem.config.js中为前端和后端分配了不同的内部端口（如3000和5000）。
   • 在部署到Cyclic这样的PaaS平台时，您通常不需要关心外部端口映射。Cyclic会为您的应用提供一个公共URL，所有流量都会通过这个URL路由到您的应用实例。
   • 重要提示：您的Vue前端应用在向后端API发起请求时，不应直接使用http://localhost:5000或http://your-cyclic-app-url:5000。相反，由于前端和后端现在运行在同一个部署实例上，它们可以通过内部网络进行通信。通常，前端会向 /api 这样的相对路径发起请求，然后通过反向代理（如果Cyclic支持，或者在前端构建时配置代理）将这些请求转发到后端服务的内部端口。
   • 一种常见的做法是，在Vue应用中配置一个环境变量，例如VITE_APP_API_BASE_URL。在生产环境中，这个URL可以是您的Cyclic应用的基础URL（例如https://your-app.cyclic.app/），然后后端json-server可以被配置为响应/api路径下的请求。

3. 前端API请求配置：

   • 确保您的Vue应用在生产模式下能够正确地找到json-server API。
   • 如果Cyclic没有内置的反向代理功能，您可能需要将json-server的路由前缀配置为/api，并在Vue应用中向/api路径发起请求。
   • 例如，如果json-server运行在内部的5000端口，并且您的Cyclic应用URL是https://your-app.cyclic.app，那么Vue应用可能通过https://your-app.cyclic.app/api/your-resource来访问后端。这需要在json-server的启动参数中进行相应的配置，或者在ecosystem.config.js中为json-server添加额外的参数来处理路由。

4. 防火墙与主机名：在PaaS平台，防火墙和主机名配置通常由平台自动管理。开发者主要关注应用内部的端口协调和路由配置。您无需手动配置服务器的防火墙规则。

总结

通过以上步骤，您已经成功配置了Vue.js前端应用和json-server后端API，使其能够在Cyclic平台上通过PM2同时运行。这种方法提供了一种健壮且易于管理的方式来部署包含多个服务的应用。请务必根据您的具体需求调整端口、环境变量和API请求路径，以确保前后端在生产环境中的顺畅通信。