electron-builder 초간단 사용법

Electron으로 만든 애플리케이션을 배포하려면 여러 가지 절차가 필요합니다.

 

하지만, 이 절차를 도와주는 여러 가지 서드파티 패키징 툴이 있습니다.

 

그중에서, 개인적으로, electron-builder가 사용하기 편해서 그 사용법을 기록으로 남기려고 합니다.

 

• 애플리케이션 배포에 대한 공식 문서

애플리케이션 배포 | Electron

• electron-builder

electron-userland/electron-builder

 

★이 포스트 작성 당시 electron은 8.2.0, electron-builder는 22.4.1 이였습니다.

 

1. 예제 애플리케이션 작성

수동으로 프로젝트를 만들어도 되지만, electron-forge를 사용하면 간단히 프로젝트를 만들 수 있습니다.

 

npx create-electron-app my-new-app

 

위 명령을 실행하면 아래 그림의 폴더 구조를 보면 알겠지만, 프로그램 개발을 위한 기본 설정을 알아서 다 해줍니다.

 

my-new-app 구조

 

 

 

 

my-new-app을 실행하면 그 유명한 Hello World! 가 실행됩니다.

 

my-new-app

프로그램 개발을 위한 준비가 정말 편하죠?

 

electron-forge도 애플리케이션 배포를 위한 써드파티 툴인데요, 이것은 다른 글에서 소개하겠습니다.

 

2. electron-builder 설치

npm install --save-dev electron-builder

 

3. 윈도우를 위한 electron-builder 설정

우선, 윈도우용 배포 파일을 위한 최소한의 설정만 해보겠습니다.

 

package.json 파일에 최상위 레벨에 build 키를 추가하고 아래와 같은 내용을 입력합니다.

 

"build": {
    "productName": "my-new-app",
    "asar": true,
    "win": {
      "target": "nsis"
    },
    "nsis": {
      "oneClick": true
    }
  },

 

package.json 파일의 scripts 키에 명령 추가.

 

"scripts": {
    "build:win-ia32": "electron-builder --win --ia32",
    "build:win-x64": "electron-builder --win --x64"
  },

 

• --win 윈도우용 배포본 작성.
• --ia32 32비트
• --x64 64비트

 

4. 애플리케이션 배포본 빌드 및 설치

npm run build:win-ia32

 

프로젝트 폴더에 dist 폴더 밑에 my-new-app Setup 1.0.0.exe 가 만들어집니다.

 

my-new-app Setup 1.0.0.exe

이 파일을 실행하면 익숙한 프로그램 설치 화면이 표시되면서 애플리케이션이 설치됩니다.

 

"제어판 >> 프로그램 >> 프로그램 및 기능" 에 아래와 같이 프로그램이 잘 설치되었습니다.

 

프로그램 설치 정보

 

프로그램 설치 정보

바로가기

 

5. electron-builder 설정

몇 가지 설정을 변경해서 배포본을 다시 빌드해 보겠습니다.

 

"author": {
    "name": "Tistory Blogger"
 },
 
"build": {
    "productName": "builder-test",
    "asar": true,
    "win": {
      "target": "nsis"
    },
    "nsis": {
      "oneClick": true,
      "shortcutName": "Builder 테스트 프로그램",
      "artifactName": "Builder 테스트 프로그램 ${version}.${ext}",
      "uninstallDisplayName": "Builder 테스트 프로그램"
    }
 },

 

• author 프로그램 게시자 정보
• shortcutName 바로가기 이름
• artifactName 배포 파일 이름
• uninstallDisplayName 제어판 >> 프로그램 >> 프로그램 및 기능에 표시되는 이름

다시 배포본을 빌드 후 설치하면 아래와 같이 변경된 설정값이 잘 적용됨을 알 수 있습니다.

 

Builder 테스트 프로그램 1.0.0.exe

제어판 >> 프로그램 >> 프로그램 및 기능

바로가기