Electron 데스크탑 앱 배포하기 (Packaging Applications)
Electron 데스크탑 앱을 일일이 수동으로 패키지로 만드는 대신, 서드 파티 패키징 툴을 사용하며 패키징을 자동화 시킬 수 있습니다. 저는 서드 파티 패키징 툴 중에서 electron-packager을 사용하여 앱을 패키징하는 방법을 소개하겠습니다.
electron을 devDependencies로 설치
기존에 electron을 devDependencies로 설치하지 않으신 분들은 electron 프로젝트 폴더에서 아래 명령어를 입력해 package.json 파일에 버전이 명시되도록 해주세요.
npm install electron --save-dev
electron-packager을 devDependencies로 설치
electron 프로젝트 폴더에서 아래 명령어로 electron-packager를 설치해줍니다.
npm install electron-packager --save-dev
asar을 devDependencies로 설치
electron 프로젝트 폴더에서 아래 명령어로 asar를 설치해줍니다
npm install asar --save-dev
그럼 아래와 같이 package.json 파일의 devDependencies항목에 버전이 명시됩니다.
앱 패키징
Electron 기본 아이콘으로 앱 패키징
1.package.json 파일을 아래와 같이 수정해 주세요. (scripts의 build 부분 추가)
{
"name": "electrontutorial",
"version": "0.1.0",
"description": "tutorial for electron",
"main": "index.js",
"scripts": {
"start": "electron index.js",
"build": "electron-packager . ElectronPJ"
},
"author": "",
"license": "ISC",
"devDependencies": {
"asar": "^0.13.0",
"electron": "^1.6.11",
"electron-packager": "^8.7.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
2.프로젝트 폴더 내에서 아래 명령어를 실행하세요.
npm run build
아이콘을 따로 지정해주지 않으면 기본 Electron 아이콘으로 앱 패키징이 되고 패키징된 폴더가 프로젝트 폴더내에 아래와 같이 생기게 됩니다. 예를 들어 저는 프로젝트 폴더 경로인 /Users/ohjiwon/dev/ElectronPJ 내에 /Users/ohjiwon/dev/ElectronPJ/ElectronPJ-darwin-x64와 같이 패키징 폴더가 생성되고 그 안에 ElectronPJ.app이 위치하게 됩니다.
사용자 지정 아이콘으로 앱 패키징
이전에 만들었던 ElectronPJ-darwin-x64 폴더를 상위 폴더인 프로젝트 폴더에서 아래 명령어로 삭제해주세요.
rm -rf ElectronPJ-darwin-x64
1.사용자 지정 아이콘으로 패키징을 하기 위해서 자신의 운영체제에 맞는 아이콘 파일을 프로젝트 폴더내에 저장해주세요.
예를들어 저의 경우 프로젝트 폴더 경로인 /Users/ohjiwon/dev/ElectronPJ 내에 아이콘 파일인 Icon.icns 파일을 저장해주었어요.
2.package.json 파일을 아래와 같이 수정해 줍니다. (scripts의 build 부분 수정)
{
"name": "electrontutorial",
"version": "0.1.0",
"description": "tutorial for electron",
"main": "index.js",
"scripts": {
"start": "electron index.js",
"build": "electron-packager . ElectronPJ && cp Icon.icns ElectronPJ-darwin-x64/ElectronPJ.app/Contents/Resources/electron.icns"
},
"author": "",
"license": "ISC",
"devDependencies": {
"asar": "^0.13.0",
"electron": "^1.6.11",
"electron-packager": "^8.7.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
3.프로젝트 폴더 내에서 아래 명령어를 실행하세요.
npm run build
아이콘을 따로 지정해주었기 때문에 패키징된 폴더안에 ElectronPJ.app의 아이콘이 지정한 아이콘으로 바뀐 것을 알 수 있습니다.
이러한 방식으로 패키징을 하게되면 해당 앱을 다운 받은 사용자가 앱의 패키징 내용을 아래와 같은 방법으로 접근하여 코드를 임의로 수정할 수 있게 되고 수정된 코드가 ElectronPJ.app에 반영되어버립니다.
따라서 앱의 소스코드가 사용자에게 노출되는 것을 방지할 필요가 있습니다.
asar 아카이브 포맷을 통한 코드 노출 방지
소스파일 전체를 복사해서 배포하는 것과는 별개로 asar 아카이브를 통해 애플리케이션의 소스 코드가 사용자에게 노출되는 것을 방지할 수 있습니다.
asar 아카이브를 사용할 땐 단순히 app 폴더 대신에 애플리케이션을 패키징한 app.asar 파일로 대체하면됩니다. Electron은 자동으로 app폴더 대신 asar 아카이브를 기반으로 애플리케이션을 실행합니다.
이전에 만들었던 ElectronPJ-darwin-x64 폴더를 상위 폴더인 프로젝트 폴더에서 아래 명령어로 삭제해주세요.
rm -rf ElectronPJ-darwin-x64
1.package.json 파일을 아래와 같이 수정해줍니다. (scripts의 package 부분 추가)
{
"name": "electrontutorial",
"version": "0.1.0",
"description": "tutorial for electron",
"main": "index.js",
"scripts": {
"start": "electron index.js",
"package": "asar pack ElectronPJ-darwin-x64/ElectronPJ.app/Contents/Resources/app ElectronPJ-darwin-x64/ElectronPJ.app/Contents/Resources/app.asar",
"build": "electron-packager . ElectronPJ && cp Icon.icns ElectronPJ-darwin-x64/ElectronPJ.app/Contents/Resources/electron.icns"
},
"author": "",
"license": "ISC",
"devDependencies": {
"asar": "^0.13.0",
"electron": "^1.6.11",
"electron-packager": "^8.7.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
2.프로젝트 폴더 내에서 아래 명령어를 실행하세요.
npm run build
npm run package
그럼 아래와 같이 ElectronPJ-darwin-x64/ElectronPJ.app/Contents/Resources 경로에 app.asar 파일이 생성된 것을 볼 수 있습니다.
3.app 폴더를 삭제하세요.
app.asar파일이 존재하므로 app 폴더를 삭제하여도 ElectronPJ.app은 정상 작동하게 되며 이로서 사용자는 앱의 소스코드에 접근하지 못하게 됩니다.
앱 배포
ElectronPJ.app을 실행하면(Linux에선 ElectronPJ Windows에선 ElectronPJ.exe 입니다) ElectronPJ 앱이 실행됩니다.
최종 사용자에겐 이 ElectronPJ 폴더(ElectronPJ.app)를 배포하면 됩니다.
마침
지금까지 electron-packager을 사용하여 앱을 패키징하는 방법을 소개하였습니다.
Electron 데스크탑 앱 배포에 관한 자세한 내용은 Electron 홈페이지의 Application Distribution나 Electron 한국 번역 문서의 애플리케이션 배포부분을 참고하세요.