[Electron] Windows 용 데스크탑 앱 패키징 및 배포하기(electron-build)

안녕하세요😊

지난 포스팅에서 electron-forge 모듈을 이용해서 Mac 용 일렉트론 앱을 빌드하는 내용을 간단하게 설명했었습니다. 저의 1차 데스크톱 앱 출시는 Windows OS를 목표로 하고 있기 때문에 Windows에서 실행할 수 있는 데스크톱 앱을 빌드하는 법을 설명해보려고 합니다.

 

아직 개발 시작단계기 때문에 상세한 옵션 설정없이 정말 기본적인 옵션만 추가하여 빌드되는 과정만 정리해볼 예정이니 참고 부탁드립니다.

 

일렉트론 앱의 빌드 도구로 공식 사이트에서는 3가지를 소개하고 있습니다.

• electron-forge
• electron-builder
• electron-packager 

이 중 첫번째 빌드 도구인 electron-forge는 지난 포스팅에서 설명드린 것처럼 Windows용 빌드를 지원하지 않고 있습니다. 그래서 electron-builder와 electron-packager 둘 중에 고민하다가 fork와 star 수가 더 많은 electron-builder를 사용하기로 결정했습니다. 

 

electron-builder는 Windows, Mac, Linux 패키징을 모두 지원하기 때문에 다른 OS 빌드가 필요하신 분들도 걱정 없이 사용하실 수 있습니다.

 

electron-builder 설치하기

아래 명령어로 electron-builder를 설치해줍니다.

yarn add electron-builder --dev
# yarn add electron-builder --dev --registry https://registry.npmjs.org/

electron-builder는 npm보다는 yarn을 사용하여 설치하는 것을 강력하게 추천하고 있습니다. 저도 제 프로젝트에서 npm을 사용하고 있지만 추후 electron-builder는 yarn을 이용하여 설치해주었습니다.

 

electron-builder 스크립트 추가하기

"scripts": {
  "dist": "electron-builder",
  "dist:win": "electron-builder --win",
}

위 스크립트를 보시면 총 2가지를 추가하였습니다.

첫번째 dist 스크립트는 앱을 배포하는 기본 스크립트입니다. dist 스크립트 실행 시, Mac용 배포 파일이 생성됩니다.

Windows 용 앱을 배포하기 위해서는 뒤에 --win 옵션을 추가하여 빌드를 해주면 됩니다.

 

Windows 앱 패키징 하기

위에 등록한 스크립트를 이용하여 패키징을 해줍니다.

yarn dist:win

위 명령어를 실행하면 아래와 같이 빌드가 진행되는 것을 확인할 수 있습니다.

패키징이 완료되면 프로젝트 최상위에 dist 디렉터리가 생성되고, 그 안에 Windows에서 실행할 수 있는 exe 확장자의 패키지 파일이 추가되어 있는 것을 확인할 수 있습니다.

 

Windows 용 일렉트론 앱 실행하기

Windows 환경에서 해당 앱을 실행해 보았습니다.

먼저 위와 같이 설치가 진행된 후, 앱이 정상적으로 실행되는 것을 확인할 수 있습니다.

 

 

참고 ) electron-builder 설정하기

추가적으로 빌드할 때 appId 또는 icon 등 원하는 옵션을 추가해줄 수 있습니다.

 "build": {
    "appId": "com.swiun.my-electron-app"
  },

상세한 옵션 설정은 추후 실제 앱 배포 시 한번 더 정리해보도록 하겠습니다.

링크: https://www.electron.build/configuration/configuration#configuration

 

참고 ) vue-cli 용 electron-builder 보일러플레이트

electron-builder는 react 및 vue를 이용한 electron 앱 빌드 보일러 플레이트 프로젝트를 제공하고 있습니다.

저도 추후 vue를 이용하여 개발을 진행할 예정이라 개발 전 한번 살펴보고 개발을 시작해보려고 합니다.

혹시 react나 vue를 사용한 일렉트론 앱을 개발 예정이신 분들은 한번 참고해보시면 좋을 것 같습니다.

링크: https://www.electron.build/#boilerplates

 

 

 

Reference

• https://www.electronjs.org/docs/latest/tutorial/application-distribution
• https://www.electron.build/cli