如何在Cyclic上同时运行Vue.js应用与json-server后端

核心思路 #

Cyclic平台仅支持指定一个启动命令，且端口由平台动态分配（不能硬编码5000）。最优方案是让json-server同时托管前端静态资源和API服务，避免多进程运行的问题。

步骤1：调整前端API请求路径 #

将所有指向http://localhost:5000的后端请求改为相对路径，确保部署后能自动适配Cyclic的域名：

// 原写法
axios.get('http://localhost:5000/posts')

// 修改后
axios.get('/posts')

步骤2：更新package.json配置 #

1. 安装本地开发用的并发工具（仅开发环境需要）：

npm install concurrently --save-dev

2. 修改scripts字段，适配本地开发和线上部署：

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "concurrently \"vite\" \"json-server --watch db.json --port 5000\"",
    "build": "vite build",
    "start": "json-server --watch db.json --static ./dist --port $PORT",
    "backend": "json-server --watch db.json --port 5000"
  },
  "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",
    "concurrently": "^8.2.0",
    "vite": "^4.3.5"
  }
}

• dev：本地开发时仍用concurrently同时启动前端和后端
• start：线上部署时，让json-server托管前端dist文件夹（构建产物），并使用Cyclic提供的$PORT环境变量

步骤3：Cyclic部署配置 #

1. 将代码推送到GitHub仓库（无需提交dist文件夹，Cyclic会自动构建）
2. 登录Cyclic平台，连接你的GitHub仓库
3. 在项目设置中配置：
   • Build Command：npm run build（让Cyclic自动构建前端生成dist）
   • Start Command：npm start（默认会读取package.json的start脚本，可省略）
4. 启动部署，完成后访问Cyclic分配的域名即可

额外优化（可选） #

如果Vue Router使用history模式，或需要自定义API路径前缀，可添加routes.json文件：

{
  "/api/*": "/$1"
}

然后修改start脚本：

"start": "json-server --watch db.json --static ./dist --routes routes.json --port $PORT"

此时前端请求/api/posts会自动映射到json-server的/posts接口，避免与前端路由冲突。

内容的提问来源于stack exchange，提问作者Milan