기본 electron-builder 설정

Electron 앱은 빌드 과정을 통해 설치 파일(Windows에서는 .exe, macOS에서는 .dmg)을 생성한다. 이를 위해 electron-builder를 활용하며, package.json에 다음과 같은 설정을 추가해야함

appId: 애플리케이션 고유 ID.
productName: 앱 이름.
directories.output: 빌드 결과물이 저장될 디렉터리.
win: Windows 설정(.exe 생성, 아이콘 지정).
mac: macOS 설정(.dmg 생성, 아이콘 지정).

"build": {
  "appId": "com.example.app",
  "productName": "ElectronSample", //setup 파일 명
  "directories": {
    "output": "release"
  },
  "files": [
    "dist/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "mac": {
    "target": "dmg",
    "icon": "build/icon.icns"
  }
}

Windows와 macOS 빌드 분리

왜 빌드를 분리해야 할까?
Electron은 OS에 따라 설치 파일 형식과 빌드 과정이 다르기 때문에 스크립트를 분리하여 관리할 필요가 있다.

Windows: .exe 또는 .msi 파일.
macOS: .dmg 또는 .zip 파일.
특히 빌드 환경의 제약 때문에, Windows 설치 파일은 macOS에서 빌드할 수 없고 그 반대도 기본적으로 불가능함. 따라서, 각각의 OS에서 별도로 빌드 명령어를 실행하도록 설정하는 것이 일반적이다.

package.json 스크립트 수정

"scripts": {
  "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
  "build:dll": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
  "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
  "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",

  // 공통 패키지 빌드
  "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never && npm run build:dll",

  // Windows용 패키지
  "package:win": "npm run build && electron-builder build --win --x64 --publish never",

  // macOS용 패키지
  "package:mac": "npm run build && electron-builder build --mac --publish never"
}

스크립트 실행

window 전용 설치 파일(.dmg) 생성을 위한 스크립트 실행

npm run package:win
옵션:
--win: Windows용 빌드 지정.
--x64: 64비트 Windows 대상.

macOS 전용 설치 파일(.dmg) 생성을 위한 스크립트 실행
명령어:

npm run package:mac
옵션:
--mac: macOS용 빌드 지정.

정상적으로 실행 완료!

생성된 setup 파일은 프로젝트 디렉토리 .../release/build 하위에 생성된다.

Windows: xxx.1.0.0.exe
macOS Intel 칩: xxx.-1.0.0.dmg
macOS Apple 칩: xxx.-1.0.0-arm64.dmg