[Electron] 패키징하고 배포하기

Electron 공식문서를 정리한 글입니다.

Electron의 핵심 모듈에는 패키지 작업이나 배포를 위한 도구가 포함되어 있지 않다. 개발 모드에서 작동하는 Electron 앱이 있더라도, 사용자에게 배포할 수 있는 패키지로 만들기 위해서는 추가 도구를 사용해야 한다. (ex. Windows의 MSI, macOS의 .app 등을 배포가능한 distributable이라고 한다.)

Electron Forge는 Electron 앱의 패키징과 배포를 처리하는 all-in-one 도구이다. 실제로는 여러 기존 도구(e.g. @electron/packager, @electron/osx-sign, electron-winstaller)들을 하나의 인터페이스로 결합하여 모든 것을 복잡하게 연결할 필요가 없어졌다.

npm install --save-dev @electron-forge/cli
or
yarn add --dev @electron-forge/cli

npx electron-forge import

//...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
//...

또한, package.json에 devDependencies 아래 몇 가지 패키지가 더 설치되었고, forge.config.js라는 새로운 파일이 생성되어 설정 객체를 내보낸다. 미리 작성된 설정에는 각 대상 플랫폼별로 하나씩, 여러 makers가 있을 것이다.

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
  ],
};

npm run make

make 명령어는 2단계로 구성되어 있다.

1. 먼저 내부적으로 electron-forge package를 실행하여 앱 코드를 Electron 이진 파일과 함께 번들링한다. 패키지된 코드는 폴더로 생성된다.
2. 그런 다음 패키지된 앱 폴더를 각각의 구성된 maker에 대해 별도의 distributable 로 생성한다.

이 스크립트가 실행된 후에는 distributable 과 패키지된 애플리케이션 코드를 포함하는 out 폴더가 생성될 것이다. out/make 폴더에 있는 distributable 은 실행 준비가 완료된 상태이다!

첫 번째 bundling된 Electron 애플리케이션을 생성했다.

중요: signing your code

Code signing은 데스크탑 애플리케이션이 알려진 출처에서 생성되었음을 인증하는 보안 기술로, 최종 사용자에게 배포하기 위해 권장되는 중요한 단계이다. Windows 및 macOS에는 자체 OS별 코드 서명 시스템이 있어, 서명되지 않은 애플리케이션을 다운로드하거나 실행하는 것을 어렵게 만들 수 있다.

macOS에서는 Code signing이 앱 패키징 수준에서 수행된다. Windows에서는 distributable 설치 프로그램이 서명된다. 이미 Windows 및 macOS용 Code signing 인증서를 가지고 있다면, 해당 자격 증명을 Forge 구성에 설정할 수 있다.

• macOS

module.exports = {
  packagerConfig: {
    osxSign: {},
    // ...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID
    }
    // ...
  }
}

• Windows

module.exports = {
  // ...
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx',
        certificatePassword: process.env.CERTIFICATE_PASSWORD
      }
    }
  ]
  // ...
}