간단한 형태로라도 앱이 만들어졌으니 패키징하고 배포를 해보도록 한다.
Electron을 패키지하는 방법은 소스코드를 asar로 압축해서 electron, node와 함께 실행파일로 묶으면 된다. 사실 개발하면서 electron .로 앱실행하는 거랑 별반 다를 것이 없다. 그럼 그냥 zip으로 압축해서 배포하면 되는거 아닌가 싶지만... 그렇게 하면 다운로드 받아서 실행하기 불편하기도 하고 모양새도 좋지 않다.
공식문서에 이에 대한 설명이 잘 나와있다. 이렇게 이걸 얼렁뚱땅 넘어가는 이유는 이 방법은 너무 복잡하고 어렵기 때문이다. 역시나 잘 만들어진 툴을 통해서 쉽게 해결하자.
electron-builder
대표적인 패키지 라이브러리는 electron-packager와 electron-builder가 있다. 처음 사용해봤던 것은 electron-packager인데 편하긴 했지만 앱 아이콘 변경같은 자잘할 설정이 번거로웠다. 그래서 electron-builder를 쓰기로 했다.
"script": {
"dist": "build",
"dist-all": "build --linux --win --mac zip --x64",
"dist-mac": "build -m --x64",
"dist-linux": "build -l --x64",
"dist-win": "build -w --x64"
}
내가 사용 중인 build script다. build만 하는 경우 현재 플랫폼(OS)에 해당하는 앱을 만든다. 옵션을 주면 다른 플랫폼용 앱도 만들 수 있는데 이때 몇가지 설치해야하는 것들이 있다. 실행하면 뭐가 없다고 오류가 나니 그걸 설치하면 된다.
맥 스토어용 앱은 오직 맥 OS에서만 빌드가 가능하다. (dmg도 맥에서만 가능하다) 그래서 맥에서 개발하고 맥에서 빌드하면 좀 더 편하다.
icon
electron-builder는 build/icon.icns파일만 있으면 linux나 window용 아이콘 파일로 변환해준다는데 실제로 해보면 잘 동작하지 않는다. 아이콘 변환 사이트에서 icns, ico, png 파일들을 각종 크기로 만들어서 build디렉토리 안에 넣어주면 쉽게 해결된다. build 디렉토리 구조는 다음과 같이 만들어두면 된다.
build/icon.icns
build/icon.ico
build/icons
├── 16x16.png
├── 24x24.png
├── 32x32.png
├── 48x48.png
├── 64x64.png
├── 96x96.png
├── 128x128.png
└── 256x256.png
이렇게 모든 과정에 대한 설명이 끝났다. 이 설명은 스스로에게 하는 설명이기도 하다. 생각도 정리하려고 좀 더 electron에 대해서 많이 이해하고 react도 더 많이 이해할 수 있었던 것 같다. 앞으로도 계속 업데이트하면 좋을 것 같다.
