[Electron] 17.앱 빌드 및 패키징 - 레시피 일렉트론 앱

GitHub

https://github.com/bsorryman/recipe-bag

 

개요

생각해두었던 기능은 모두 구현 완료했고, 이제 마지막으로 빌드와 패키징이 남았다. electron forge를 이용해 프로젝트를 구성했기 때문에, 간단한 script 명령어 하나로 설치파일(setup)을 패키징할 수 있다. 

 

패키징 설정

{
  "name": "recipe.electron",
  "productName": "Recipe Bag",
  "version": "1.0.0",
  "description": "What should I eat today",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\"",
    "builder": "babel-node builder.js"
  },

package.json

 

위 설정 파일에서 name, productName, version, description 등을 설정할 수 있다. 각 설정 값들은 앱의 이름, 설명란 등에 사용된다. 

 

패키징 명령어는 forge를 설치하면서 자동으로 scripts 항목에 설정되는 make를 활용하면 된다. 

 

module.exports = {
  packagerConfig: {
    asar: true,
    extraResource: "./src/db",
    icon: "./src/assets/img/icon.ico"    
  },

forege.config.json

 

위 설정 파일에서는 resource 들을 asar 파일로 묶을 것인지 여부, asar에 포함할 수 없는 고용량의 파일 경로, icon으로 사용할 파일의 경로등을 설정할 수 있다.

 

그 외 코딩을 하며 실행하면서 설정했던 것들 그대로 두면 자동으로 .webpack 경로에 번들링되면서 함께 패키징된다. 

 

패키징 실행

위에서 서술했던 electron forge를 설치하며 설정된 script 명령어 단 하나만 실행하면 설치파일을 프로젝트 경로의 out 폴더에 생성하게 된다.

 

npm run make

 

빌드 및 패키징 처리 명령어

 

npm run make 명령어를 콘솔에 실행하면 위와 같이 시스템이 여러가지 항목을 체킹하고 설정에 맞게 out/make 경로에 설치파일을 생성한다. 

 

패키징 되어 생성된 설치 파일

위 생성파일에서 Setup.exe 파일을 실행하면 설치가 시작되며 아래와 같이 설치화면이 짧게 뜨고 완료되면 앱이 실행된다. 

설치 중인 모습

 

설치된 경로 및 파일

 

설치 경로는 default 값으로 C:\Users\{사용자계정}\AppData\Local\{프로젝트명} 이며, 해당 경로에 빌드된 여러 파일들을 확인할 수 있다.