使用 concurrently 实现前后端一键启动

使用 concurrently 实现前后端一键启动

本文适合： 前后端分离项目（如 React + Node.js），希望通过一条命令同时启动前端和后端服务。
工具链： Node.js、npm、concurrently。
耗时： 3 分钟。

文章目录

• 使用 concurrently 实现前后端一键启动
• • @[toc]
  • 一、场景需求
  • 二、解决方案：concurrently
  • 三、操作步骤
  • • 1. 项目结构
    • 2. 初始化根目录的 package.json
    • 3. 安装 concurrently
    • 4. 配置启动脚本
    • • 参数说明：
    • 5. 一键启动
  • 四、注意事项
  • • 1. 路径问题
    • 2. 端口冲突
    • 3. 依赖安装
    • 4. 终止所有进程
  • 五、总结

一、场景需求

在开发前后端分离项目时，通常需要：

1. 启动前端服务（如 npm run start）。
2. 启动后端服务（如 npm run dev）。
   每次手动打开两个终端分别执行命令非常繁琐，如何通过一条命令一键启动？

二、解决方案：concurrently

concurrently 是一个 Node.js 工具，可以并行执行多个命令，并合并日志输出到同一终端。

三、操作步骤

1. 项目结构

假设项目结构如下：

my-project/  
├── frontend/     # 前端项目（如 React）  
├── backend/      # 后端项目（如 Express）  
└── package.json  # 根目录的 package.json（需新建）

2. 初始化根目录的 package.json

在项目根目录（my-project/）执行：

npm init -y

3. 安装 concurrently

npm install concurrently --save-dev

4. 配置启动脚本

修改根目录的 package.json，添加以下内容：

{
  "scripts": {
    "start:frontend": "cd frontend(你的前端地址) && npm start",
    "start:backend": "cd backend(你的后端地址) && npm run dev",
    "start": "concurrently \"npm run start:frontend\" \"npm run start:backend\""
  }
}

参数说明：

• start:frontend：进入前端目录并启动前端服务（假设前端使用 npm start）。
• start:backend：进入后端目录并启动后端服务（假设后端使用 npm run dev）。
• start：并行执行前端和后端启动命令。

5. 一键启动

在根目录执行：

npm run start

终端会同时输出前后端日志，效果如下：

四、注意事项

1. 路径问题

确保 frontend 和 backend 目录名称与你的项目实际目录一致。如果路径不同，需修改脚本中的路径：

"start:frontend": "cd your-frontend-folder && npm start"

2. 端口冲突

若前后端服务端口冲突（如都使用 3000），需修改其中一个服务的端口号。

• 前端修改端口（React）：在 frontend/package.json 中修改：

  "scripts": {
    "start": "set PORT=3001 && react-scripts start"  # Windows
    // 或
    "start": "PORT=3001 react-scripts start"         # macOS/Linux
  }
  

3. 依赖安装

确保前后端项目已安装依赖：

cd frontend && npm install
cd backend && npm install

4. 终止所有进程

按 Ctrl + C 可一次性终止所有并行进程。

五、总结

通过 concurrently，我们只需一条命令即可实现前后端服务的同时启动，大幅提升开发效率。此方案适用于任何需要并行执行命令的场景（如多微服务项目）。

完整代码示例： Gitee 链接