백엔드 프론트엔드 서버를 한번에 실행하기 - concurrently

 

| concurrently 모듈 설치

concurrently는  두 개 이상의 npm  스크립트를 동시에 실행할 수 있게 해주는 Node.js 기반 유틸리티이다.

react (프론트엔드)와 node.js (백엔드) 서버를 동시에 실행하게 하는 것 외에도 다양하게 활용할 수 있다. 

 

npm install concurrently --save-dev

 

 

 

| 기본 사용법

 

package.json

"scripts": {
  "server": "nodemon server.js",
  "client": "cd frontend && npm start",
  "dev": "concurrently \"npm run server\" \"npm run client\""
}

 

package.json파일에서 scripts에 위 처럼 설정하고 npm run dev 를 실행하면 두 개의 서버를 동시에 실행할 수 있다.

 

 

| 옵션

concurrently -n server,client -c red,blue "npm run server" "npm run client"

 

-n : 각 명령의 태그(로그에 표시되는 이름) 설정

-c : 각 명령의 로그 색상 지정

--kill-others : 하나가 죽으면 나머지도 자동 종류

--success first : 첫 번째 성공한 명령 기준으로 전체 성공처리

 

 

 

| 설치 위치(루트)

백엔드와 프론트엔드 서버를 동시에 실행하기 위한 것으로 루트에 설치해주는게 좋다.

project1/
│
├── backend/
│   └── server.js
│
├── frontend/
│   └── package.json
│
├── package.json   <-- 여기서 동시에 실행 설정함

 

 

/ package.json

{
  "name": "project1",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "server": "cd backend && npm run dev",
    "client": "cd frontend && npm start"
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

 

 

/ 실행

루트에서 npm run start 

 

 

이제 백엔드와 클라이언트 서버를 따로 실행하던 번거로운 수고를 하지 않아도 된다.

 

 

 

/ 주의사항

루트 위치일때 위와같이 json파일을 작성했다면 backend/package.json에 dev와 frontend/package.json에 start가 실행되도록 잘 설정되어 있어야 한다.

 

frontand/package.json

 

 

backend/package.json

 

 

 

 

| 위의 .json이 실행되지 않을 때

 

 

 

이 메시지는 concurrently가 전역(Global)이나 로컬(Local) 어디에도 실행 가능한 경로에 없기 때문에 발생하는 에러이다.

concurrently는 루트 디렉터리의 devDependencies에 설치되어 있지만,
npm start 실행 시 Windows의 명령어 탐색 경로에서 node_modules/.bin을 제대로 인식하지 못하는 경우가 있다.

 

해결방법은 다른 방법도 있지만 npx 명령어와 --prefix 옵션을 사용한다.

npx는 로컬 node_modules/.bin에서 실행 파일을 찾아준다.

--prefix 옵션은 루트에서 하위 디렉토리로 바로 접근하므로 cd보다 에러가 적다.

 

 

/ 최종 package.json

{
  "name": "project1",
  "version": "1.0.0",
  "scripts": {
    "dev": "npx concurrently \"npm run server\" \"npm run client\"",
    "server": "npm run dev --prefix backend",
    "client": "npm start --prefix frontend"
  },
  "devDependencies": {
    "concurrently": "^9.1.2"
  }
}