node.js에서 명령어로 브라우저 실행하기

이 글은 Windows OS 기반의 환경에서 작성되었습니다.

 

 

CRA 등을 사용하여 프로젝트를 구성해보신 분이라면, npm run start 과 같은 명령어로 서버 구동부터 브라우저로 결과물을 확인하는 과정까지 한 번에 실행되는 것을 보셨으리라 생각합니다. 그러나 이런 사전 설정없이 단순히 node 프로젝트에서 start 명령을 사용하면 단순히 node ./bin/www 명령만 실행되고 끝입니다. 만약 결과물을 보고 싶다면 직접 브라우저에서 localhost:3000 처럼 자신이 설정한 주소를 입력해서 확인해야 합니다. 이번 포스트에서는 번거로웠던 이 과정을 한 번에 처리할 수 있도록 해보겠습니다.

 

"scripts": {
    "start": "node ./bin/www"
}

 

처음 node.js 프로젝트에 express를 적용한 package.json 입니다. start 명령에 할당된 node ./bin/www 은 서버를 실행시키는 역할을 합니다. 이 부분에 브라우저를 여는 부분을 처리해주면 될 것 같습니다.

 

 

프로젝트에서 브라우저를 열기 위해, opener 모듈을 사용하겠습니다. 먼저 패키지를 설치해줍니다.

 

npm i opener

 

패키지 메인테이너의 가이드에 따라, opener ${url} 의 형식으로 코드를 삽입해주겠습니다. 하는김에 node 명령어와 opener 명령어를 두 부분으로 나누어 주었습니다.

 

"scripts": {
  "start": "npm run test && npm run open",
  "test": "node ./bin/www",
  "open": "opener http://localhost:3000/"
}

 

쉘 스크립트에서 &&는 앞의 코드가 성공적으로 실행되면, 뒤의 코드를 이어서 실행하도록 하는 연산자입니다. 기존의 node 명령어를 test로 명명하여 먼저 실행하고, 브라우저를 실행하는 코드는 open 으로 따로 명명하여 뒤에 실행하도록 start를 수정해주었습니다.

 

이제 npm run start를 입력하면 실행과 함께 브라우저로 곧바로 확인할 수 있습니다.

 

 

 

 

 

 

... 분명히 그랬어야 하는데, 안타깝게도 작동하지 않았습니다. 아마도 &&가 판정하는 코드의 성공이란 앞의 코드가 종료되어 나오는 반환값을 기준으로 성공 여부를 판단하는 것 같았습니다. 그렇다면 앞의 코드가 실행하는 node 프로세스를 백그라운드 작업으로 실행하면 뒤의 코드도 바로 실행할 수 있을것이라 생각했습니다.

 

"scripts": {
    "start": "npm run test && npm run open",
    "test": "node ./bin/www &",
    "open": "opener http://localhost:3000/"
  }

 

결과는 이번에도 실패였습니다. 아무리 생각해도 정확한 원인을 찾을 수 없어 답답해하던 중, 스택오버플로우의 한 글이 눈에 들어왔습니다.

 

In Windows, try "start /B"

 

바로 Linux에서 사용하던 &가 윈도우에서는 다르게 적용된다는 사실이었습니다. 쉘 스크립트라서 리눅스의 명령을 그대로 사용할 수 있다는 생각은 순전히 저의 착각이었습니다. 명령어를 다음과 같이 바꿔주고 시도해보겠습니다.

 

"scripts": {
    "start": "npm run test && npm run open",
    "test": "start /B node ./bin/www",
    "open": "opener http://localhost:3000/"
  }

 

 

두 명령이 연속적으로 실행되었습니다! 이제 브라우저에서 결과물을 바로 확인할 수 있게 되었습니다.

 

요새 배포 쪽에 관심이 생겨서 쉘 스크립트를 찾아볼 일이 종종 생겼는데, 덕분에 이런 것들도 조금씩 알게 되는것 같습니다. 그 과정에서 기록할만한 케이스나 지식이 생기면 오늘처럼 포스트로 남길 예정입니다. 짧은 글 읽어주셔서 감사하고, 틀린 부분이 있다면 댓글로 알려주시면 감사하겠습니다.

 

 

참고 자료

Stack overflow - Running NodeJS command after another

Stack overflow - How to open browser to localhost through npm scripts

이고잉 - 연속적으로 명령 실행시키기 (;과 &와 &&의 차이)

npm - opener (by domenic)