배포

완성한 앱을 사용자에게 전하려면 실행 파일로 묶고(패키징), 운영체제별 설치 파일을 만들고, 코드 서명을 하고, 업데이트 경로를 마련해야 합니다. 이 장에서는 Electron Forge를 중심으로 이 과정을 살펴보고, 널리 쓰이는 electron-builder와 자동 업데이트 방법도 소개합니다.

Forge의 세 단계: package, make, publish

Electron Forge는 배포를 세 단계로 나눕니다.

# 1. 현재 운영체제용 실행 가능한 앱을 out/ 아래에 만든다
npm run package

# 2. 설정한 maker로 설치 파일을 out/make/ 아래에 만든다
npm run make

# 3. 만든 설치 파일을 GitHub 릴리스 같은 배포 대상에 올린다
npm run publish

package 단계에서 앱 코드는 기본적으로 ASAR 아카이브 하나로 묶입니다. 파일 수가 줄어 설치와 읽기가 빨라지고, 소스 파일이 그대로 드러나지 않습니다. 다만 ASAR는 암호화가 아니므로 비밀 값을 앱에 넣어서는 안 됩니다.

maker: 설치 파일 형식

maker는 대체로 해당 운영체제에서 실행해야 합니다. 예를 들어 DMG는 macOS에서 만듭니다. 그래서 보통 CI에서 Windows, macOS, Linux 실행 환경을 하나씩 두고 각자 빌드합니다.

코드 서명과 공증

서명하지 않은 앱은 운영체제가 경고를 띄우거나 실행을 막습니다. 배포용 앱은 반드시 서명합니다.

• macOS: Apple Developer Program에 가입해 Developer ID 인증서로 서명하고, Apple의 공증(notarization) 서비스에 제출합니다. 공증하지 않은 앱은 Gatekeeper가 실행을 막습니다.
• Windows: Authenticode 코드 서명 인증서로 서명합니다. 최근에는 인증서의 개인 키를 하드웨어 보안 모듈이나 클라우드 서명 서비스에 보관해야 하는 경우가 많으므로, 쓰려는 서명 방식을 Forge의 Windows 서명 옵션과 맞춰 둡니다.

Forge에서는 packagerConfig에 서명과 공증 설정을 넣습니다. 비밀 값은 코드에 적지 않고 환경 변수로 넘깁니다.

// forge.config.js
module.exports = {
  packagerConfig: {
    asar: true,
    icon: 'assets/icon', // 확장자를 빼면 운영체제에 맞는 .ico, .icns 를 찾는다
    osxSign: {},
    osxNotarize: {
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD, // 앱 전용 암호
      teamId: process.env.APPLE_TEAM_ID,
    },
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx',
        certificatePassword: process.env.CERTIFICATE_PASSWORD,
      },
    },
    { name: '@electron-forge/maker-dmg', config: {} },
    { name: '@electron-forge/maker-deb', config: {} },
  ],
  publishers: [
    {
      name: '@electron-forge/publisher-github',
      config: {
        repository: { owner: 'my-org', name: 'my-app' },
        prerelease: true,
      },
    },
  ],
}

GitHub publisher는 GITHUB_TOKEN 환경 변수의 토큰으로 릴리스를 만듭니다. Forge 템플릿에 들어 있는 Fuses 플러그인(@electron/fuses)은 ELECTRON_RUN_AS_NODE 같은 기능을 패키징 단계에서 꺼서 앱을 더 단단하게 만듭니다.

자동 업데이트

Electron에는 Squirrel 기반의 autoUpdater 모듈이 내장되어 있으며 macOS와 Windows를 지원합니다. Linux에서는 보통 배포판의 패키지 관리자나 AppImage 같은 형식의 업데이트 방식을 씁니다.

공개 GitHub 저장소에 릴리스를 올리는 오픈 소스 앱이라면, 무료 업데이트 서비스 update.electronjs.org를 쓰는 update-electron-app 패키지가 가장 간단합니다. macOS에서는 앱이 서명되어 있어야 업데이트가 동작합니다.

// main.js
const { updateElectronApp } = require('update-electron-app')

updateElectronApp() // 시작할 때와 이후 주기적으로 업데이트를 확인한다

직접 운영하는 업데이트 서버가 있다면 autoUpdater에 피드 주소를 지정합니다.

const { app, autoUpdater } = require('electron')

const server = 'https://updates.example.com'
autoUpdater.setFeedURL({ url: `${server}/update/${process.platform}/${app.getVersion()}` })

// 실제 앱에서는 다시 시작하기 전에 사용자에게 묻는다
autoUpdater.on('update-downloaded', () => autoUpdater.quitAndInstall())

app.whenReady().then(() => autoUpdater.checkForUpdates())

electron-builder

electron-builder는 Forge 대신 널리 쓰이는 패키징 도구입니다. 설정 파일 하나로 여러 설치 형식, 코드 서명, 자동 업데이트(electron-updater)를 다룹니다.

npm install --save-dev electron-builder
npx electron-builder --win    # Windows: NSIS 설치 프로그램
npx electron-builder --mac    # macOS: DMG (macOS에서 실행)
npx electron-builder --linux  # Linux: AppImage 등

# electron-builder.yml
appId: com.example.myapp
productName: My App
directories:
  output: dist
files: ["main.js", "preload.js", "index.html", "renderer.js"]
mac:
  target: dmg
win:
  target: nsis
linux:
  target: AppImage
publish:
  provider: github

// electron-builder로 배포한 앱의 자동 업데이트
const { app } = require('electron')
const { autoUpdater } = require('electron-updater')

app.whenReady().then(() => autoUpdater.checkForUpdatesAndNotify())

Forge와 electron-builder는 같은 일을 하는 다른 도구입니다. 한 프로젝트에서는 하나만 고릅니다.

정리

• Forge는 package로 앱을 묶고, make로 설치 파일을 만들고, publish로 배포 대상에 올립니다.
• 설치 형식은 maker로 고르며, 보통 운영체제마다 따로 빌드합니다.
• macOS는 서명과 공증, Windows는 Authenticode 서명이 필요하고, 비밀 값은 환경 변수로 넘깁니다.
• 자동 업데이트는 update-electron-app, 내장 autoUpdater, 또는 electron-builder의 electron-updater로 구현합니다.

공식 문서

• Distribution Overview
• Code Signing
• Updating Applications
• Electron Fuses
• Electron Forge
• electron-builder