[WebApp / Electron] Electron App Packaging

이번 글에서는 electron-packager를 이용하여 개발된 Electron App을 배포하기 전 패키징 하는 방법에 대하여 알아보도록 한다.

지원 플랫폼

Electron Packager는 다음과 같이 Electron이 지원하는 플랫폼을 지원한다:

• Windows (32/64 bit)
• OS X
• Linux (x86/x86_64)

설치

Command Line Terminal에서 다음과 같이 명령어를 입력하여 설치하도록 한다.

# for use in npm scripts
> npm install electron-packager --save-dev

# for use from cli
> npm install electron-packager -g

사용방법

Electron Packager의 기본적인 사용방법은 --help 옵션을 통해 알 수 있다.

> electron-packager --help

위의 명령을 실행하면 다음과 같은 사용법 안내가 나온다.

Usage: electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch>

Required options

sourcedir          the base directory of the application source

  Either both of:

platform           all, or one or more of: darwin, linux, mas, win32 (comma-delimited if multiple)
arch               all, or one or more of: ia32, x64 (comma-delimited if multiple)

  Or:

all                equivalent to --platform=all --arch=all

  Examples:        electron-packager ./ --platform=darwin --arch=x64
                   electron-packager ./ --all

Optional options

appname            the name of the app, if it needs to be different from the "productName" or "name"
                   in the nearest package.json

* All platforms *

app-copyright      human-readable copyright line for the app
app-version        release version to set for the app
asar               packages the source code within your app into an archive
asar-unpack        unpacks the files to app.asar.unpacked directory whose filenames regex .match
                   this string
asar-unpack-dir    unpacks the dir to app.asar.unpacked directory whose names glob pattern or
                   exactly match this string. It's relative to the <sourcedir>.
build-version      build version to set for the app
cache              directory of cached Electron downloads. Defaults to `$HOME/.electron`
                   (Deprecated, use --download.cache instead)
deref-symlinks     whether symlinks should be dereferenced. Defaults to true.
download           a list of sub-options to pass to electron-download. They are specified via dot
                   notation, e.g., --download.cache=/tmp/cache
                   Properties supported:
                   - cache: directory of cached Electron downloads. Defaults to `$HOME/.electron`
                   - mirror: alternate URL to download Electron zips
                   - strictSSL: whether SSL certs are required to be valid when downloading
                     Electron. Defaults to true, use --download.strictSSL=false to disable checks.
icon               the icon file to use as the icon for the app. Note: Format depends on platform.
ignore             do not copy files into app whose filenames regex .match this string
out                the dir to put the app into at the end. defaults to current working dir
overwrite          if output directory for a platform already exists, replaces it rather than
                   skipping it
prune              runs `npm prune --production` on the app
strict-ssl         whether SSL certificates are required to be valid when downloading Electron.
                   It defaults to true, use --strict-ssl=false to disable checks.
                   (Deprecated, use --download.strictSSL instead)
tmpdir             temp directory. Defaults to system temp directory, use --tmpdir=false to disable
                   use of a temporary directory.
version            the version of Electron that is being packaged, see
                   https://github.com/electron/electron/releases

* darwin/mas target platforms only *

app-bundle-id      bundle identifier to use in the app plist
app-category-type  the application category type
                   For example, `app-category-type=public.app-category.developer-tools` will set the
                   application category to 'Developer Tools'.
extend-info        a plist file to append to the app plist
extra-resource     a file to copy into the app's Contents/Resources
helper-bundle-id   bundle identifier to use in the app helper plist
osx-sign           (OSX host platform only) Whether to sign the OSX app packages. You can either
                   pass --osx-sign by itself to use the default configuration, or use dot notation
                   to configure a list of sub-properties, e.g. --osx-sign.identity="My Name"
                   Properties supported:
                   - identity: should contain the identity to be used when running `codesign`
                   - entitlements: the path to entitlements used in signing
                   - entitlements-inherit: the path to the 'child' entitlements

* win32 target platform only *

version-string     a list of sub-properties used to set the application metadata embedded into
                   the executable. They are specified via dot notation,
                   e.g. --version-string.CompanyName="Company Inc."
                   or --version-string.ProductName="Product"
                   Properties supported:
                   - CompanyName
                   - FileDescription
                   - OriginalFilename
                   - ProductName
                   - InternalName

예제

Electron Packager를 이용한 App Packaging의 몇가지 예를 들어본다.

예제를 테스트 해보기 위하여 Electron App Template을 참고하여 예제 파일을 다운받고 실행하여 본다.

Windows

Win32 x64로 Packaging 해보도록 한다.

> electron-packager ./ MyApp --platform=win32 --arch=x64
Packaging app for platform win32 x64 using electron v1.2.6
Wrote new app to {YOUR_ELECTRON_APP_ROOT}\MyApp-win32-x64

만약 특정 node module이 포함되지 않도록 하려면 명령에 --ignore 옵션을 사용한다.

가령,

> electron-packager ./ MyApp --platform=win32 --arch=x64 --ignore=node_modules/{무시할-패키지-이름}

패키징이 완료된 후 해당 디렉터리를 살펴보면, MyApp.exe 실행 파일 및 필요한 .dll 파일 등이 있으며, resource 폴더와 locales 폴더가 생성된다.

위의 그림은 Windows에서 패키징 된 App의 폴더 구조이다. 자세히 들여다 보면 Node Webkit의 패키징 폴더와 거의 유사함을 알 수 있다.

Mac OS

Mac OS에서도 패키징 방식은 Windows와 별반 다르지 않다. 다만 Platform 이름만 Mac OS에 맞게 입력하면 된다. 가령,

> electron-packager ./ MyApp --platform=darwin --arch=x64

과 같이 명령을 입력하면 App이 패키징 된다.

위의 그림은 Mac OS에서 패키징 된 App의 폴더 구조이다. MyApp 실행 파일은 사실 압축파일에 불과하다.

우측 마우스를 클릭하여 "Show Package Contents"를 보면 포함된 리소스 및 라이브러리를 볼 수 있으며, 특히 Resources 폴더에 App의 아이콘 파일(MyApp.icns)을 볼 수 있다. 만약 아이콘을 변경하고자 한다면 동일한 이름으로 이 파일을 교체하면 된다.

이로써 Electron App의 패키징 방법에 대하여 알아보았다. 실무에서 Electron App 배포 시 유용한 참고 자료가 되길 바란다.