일렉트론(Electron)에 nodemon 적용하기: 서버 재 시작 자동화

Node.js nodemon 모듈

nodemon 은 서버 혹은 백 단의 파일이 변경 되었을 때 이를 자동으로 감지하여 애플리케이션을 재 시작 해주는 모듈 입니다.

프론트 쪽의 코드를 변경 했을 땐 브라우저나 앱을 새로 고침만 해줘도 되지만, 백 단 코드를 변경하게 되면 서버를 재시작 해줘야 하는 것은 Node.js 도 마찬가지였습니다.

기존 자바(Java) 기반 웹을 개발해 보셨다면 자바 소스코드를 수정할 때 Tomcat 을 재시작 해주던 경험이 있었을 겁니다. 이를 해결하기 위해 JRebel 같은 도구가 존재 했습니다.

어쨌든, 매번 코드 한 줄 수정할 때 마다 서버를 수동으로 재 시작 한다는 건 매우 비효율적인 부분이겠죠. nodemon 은 이를 해결하기 위한 모듈로 Node.js 서버 자동 재시작으로 파일 수정 즉시 반영: nodemon 모듈 포스팅으로 정리해본 적이 있습니다.

일렉트론(Electron)에 nodemon 적용하기

그리고 일렉트론 또한 메인 프로세스 쪽 코드를 변경하게 되면 서버를 재 시작 해줘야 했고 nodemon 을 적용하여 이를 해결 하려 합니다.

모듈 설치

먼저 적용을 위해 기존 프로젝트에 nodemon을 설치 합니다. 만약, 기존 -g 명령어로 nodemon 을 설치 했다면 다시 설치가 필요 없을 겁니다.

npm install -g nodemon

package.json 수정

package.json 영역에 scripts 쪽을 수정 합니다. 자신이 원하는 명령어 명을 입력해 주고 다음과 같은 형태로 작성해 줍니다. 아마 아무런 수정이 없었다면 test 가 기본적으로 작성되어 있을 겁니다.

저는 명령어 명을 dev 로 작성하였고 main.js 부분은 자신의 메인 프로세스 js 파일에 맞춰 변경해 주세요.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --watch main.js --exec electron ."
  },

그 다음 터미널에 다음 명령어로 애플리케이션을 실행해봅니다.

npm run dev

정상적으로 프로그램이 실행 되었으면 main.js 파일을 수정해 봅시다. 제대로 적용 되었다면 자동으로 애플리케이션이 재 시작 됩니다.

nodemon 추가 설정

nodemon 은 ‘nodemon.json’ 파일을 통해 설정할 수 있도록 지원하고 있습니다. 예를 들어 위의 –watch, –exec 부분 등을 json 파일로 설정 가능 합니다. 프로젝트 root 경로에 nodemon.json 을 생성하고 다음과 같이 입력해 줍니다.

{
    "exec": "electron .",
    "watch": ["main.js"]
}

그 후 package.json 파일은 다음과 같이 수정합니다. 그리고 다시 npm run dev 로 실행하고 제대로 동작하는지 테스트 합니다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon"
  },

모든 js 파일 변경 감지하기

위의 설정은 main.js 의 변경 만을 감지 합니다. 모든 js 파일의 변경 시 재 시작을 하고 싶다면 main.js 부분을 “*.js” 로 변경해 줍니다.

{
    "exec": "electron .",
    "watch": ["*.js"]
}

특정 경로 제외하기

js 파일은 메인 프로세스에서만 사용되지 않으므로 렌더러 프로세스의 동작에선 제외하고자 할 때 ignore 옵션으로 해당 경로를 지정해 주면 됩니다.

{
    "exec": "electron .",
    "watch": ["*.js"],
    "ignore": ["front-side/*"]
}