KnP House for Daily

[electron] Electron-builder 알아보자. 본문

Web/Electron

[electron] Electron-builder 알아보자.

K.ung 2016.10.20 16:46

https://github.com/electron-userland/electron-builder 과https://github.com/szwacz/electron-boilerplate 를 이용하였습니다.

목차

개요

처음 Electron을 배포하기 위한 작업을 하려고 electron-packager을 이용하여 패키징 작업을 진행하였습니다. 하지만 mac에서 dmg 생성이라던가, windows에서 installer 를 생성하거나, 소스들을 숨기거나 하는 작업을 진행할 수가 없었습니다.
그래서 알게 된 것이 electron-packager입니다. 깃헙프로젝트에 가면 첫문장으로 A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box. 이 설명되어있습니다.
위 문장을 보면 MacOS, WindowsOS, 그리고 Linux를 로 Electron app을 배포하기 위하여 패키징과 빌드를 하게 해주는 완전한 솔루션이라고 서술되어 있습니다. 
그렇습니다. electron-builder는 패키징과 빌딩을 동시에 한번에 작업을 해주는 것입니다.

Electron-builder 란?

electron app을 배포하기 위해 준비(패키징, 빌드)를 도와주는 라이브러리

장점

  • NPM 패키지 관리
    • 실제 production dependencies들 만 관리합니다.(만약 2개의 package.json 구조로 하였다면..참고)
    • Devlopment dependencies들은 배포시 포함시키지 않게 해줍니다.
  • CI서버나, 개발서버에 Code Signing을 도와줍니다.
  • app이 패키징 돼면 자동 업데이트 해줍니다.
  • 버젼관리도해줌
  • 다양한 os 타겟에 맞게 포매팅 해줍니다.
    • All platforms: 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir (unpacked directory).
    • MacOS: dmg, mas.
    • Linux: AppImage, deb, rpm, freebsd, pacman, p5p, apk.
    • Windows: NSIS, Squirrel.Windows.

Quick Setup Guide

  1. package.json에 기본적인 namedescriptionversionauthor 은 app/package.json에 작성합니다.(prod용)
  2. build를 하기 위한 커맨드 옵션들을 작성하는 것은 root/package.json 에 위치 합니다.(dev package.json)

    • 실제 사용 소스

      "build": { "appId": "com.exam.exam-electron", "win": { "target": [ "nsis" ], "icon": "resources/windows/exam.ico" }, "nsis": { "oneClick": true, "installerHeaderIcon": "resources/windows/setup-icon.ico" }, "mac": { "target": "dmg", "category": "public.app-category.graphics-design", "icon": "resources/osx/exam.icns" }, "dmg": { "icon": "resources/osx/dmg-icon.icns", "background": "resources/osx/dmg-background.png" } }

    다양한 옵션이 존재합니다. 참고하세요.(실제 사용 옵션은 나중에 설명)

  3. 프로젝트 root에 실제 빌드를 진행할 폴더, resources(icon image들)폴더를 생성합니다.

  4. 프로젝트 root에 만들어논 package.json 에 script속성에 다음과 같이 build script를 작성합니다.

    • 실제 코드입니다.

      // better-npm-script 를 이용합니다.
      "scripts": {
      "build": "better-npm-run build",
      "postinstall": "install-app-deps" 
      },
      "betterScripts": {
      "build": {
        "command": "gulp build",
        "env": {
          "NODE_ENV": "production"
        }
      }
      }
    • 프로젝트 root에 있는 package.json는 devDependencies 만 존재해야 합니다.

    • postinstall을 위와 같이 작성해야합니다.

Build : CLI 옵션들

Building:
  --mac, -m, -o, --osx, --macos  Build for MacOS, accepts target list (see
                                 https://goo.gl/HAnnq8).                 [array]
  --linux, -l                    Build for Linux, accepts target list (see
                                 https://goo.gl/O80IL2)                  [array]
  --win, -w, --windows           Build for Windows, accepts target list (see
                                 https://goo.gl/dL4i8i)                  [array]
  --x64                          Build for x64                         [boolean]
  --ia32                         Build for ia32                        [boolean]
  --dir                          Build unpacked dir. Useful to test.   [boolean]
  --extraMetadata, --em          Inject properties to application package.json

Publishing:
  --publish, -p  Publish artifacts (to GitHub Releases), see
                 https://goo.gl/WMlr4n
                           [choices: "onTag", "onTagOrDraft", "always", "never"]
  --draft        Create a draft (unpublished) release                  [boolean]
  --prerelease   Identify the release as a prerelease                  [boolean]

Deprecated:
  --platform  The target platform (preferred to use --mac, --win or --linux)
               [choices: "mac", "osx", "win", "linux", "darwin", "win32", "all"]
  --arch      The target arch (preferred to use --x64 or --ia32)
                                                 [choices: "ia32", "x64", "all"]

Other:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Examples:
  build -mwl                build for MacOS, Windows and Linux
  build --linux deb tar.xz  build deb and tar.xz for Linux
  build --win --ia32        build for Windows ia32
  build --em.foo=bar        set application package.json property `foo` to `bar`

실제 Build CLI Option 확인

실제 프로젝트에서 사용 한 것만 설명 할 것입니다.

"build": { "appId": "com.exam.exam-electron", "win": { "target": [ "nsis" ], "icon": "resources/windows/exam.ico" }, "nsis": { "oneClick": true, "installerHeaderIcon": "resources/windows/setup-icon.ico" }, "mac": { "target": "dmg", "category": "public.app-category.graphics-design", "icon": "resources/osx/exam.icns" }, "dmg": { "icon": "resources/osx/dmg-icon.icns", "background": "resources/osx/dmg-background.png" } },

appId

win

window 빌더를 위한 속성입니다.

target

  • 기본은 squirrel이며, nsis, squirrel, 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir와 같은 리스트 패키지 타입을 지정합니다.

icon

  • window app icon을 지정합니다.
  • 확장자는 .ico로 됩니다.

nsis

window에서 target을 설정할 때 쓰는 타겟 입니다.

oneClick

  • 기본 true이며, 인스톨러 파일을 한번 클릭으로 인스톨이 되게 도와줍니다.

installerHeaderIcon

  • 인스톨러 아이콘을 지정합니다.
  • .ico 확장자입니다.

mac

mac 용 빌드 속성입니다.

target

  • 인스톨러 타겟 포맷팅 설정
  • 기본 dmg이며, 그외 default, dmg, mas, 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir 이 있습니다.

category

ico

  • 앱 아이콘
  • .icns 확장자 입니다.

dmg

macOS에서 dmg 인스톨러에 대한 속성

icon

  • 인스톨러 dmg 아이콘 설정
  • .icns

background

  • dmg실행시 띄워지는 화면에 백그라운드 이미지 설정
  • .png 로 해야하며 기본 540x380을 기준으로 한다.


저작자 표시
신고

'Web > Electron' 카테고리의 다른 글

[electron] Electron webview tag에 대해서  (0) 2016.10.20
[electron] Electron-builder 알아보자.  (0) 2016.10.20
0 Comments
댓글쓰기 폼