dev/개인 프로젝트

electron-builder 사용하여 데스크톱 앱 배포하기

jeongsu 2020. 2. 17. 09:02

electron-builder 에 대한 옵션값은 다른 블로그나 공식사이트에 잘 정리 되어있으니 넘어가고,

 

방법만 순서대로 보여드리겠습니다.

 

1.  electron-builder 를 설치합니다.

npm install --save-dev electron-builder

 

2. 설치 후, package.json 에 몇가지를 추가하셔야합니다.

 

설정 값 추가

 

사진의 빨간 부분의 설정이 제가 추가한 부분입니다.

 

[밑에서 복사해서 쓰세요]

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "deploy":"electron-builder --windows nsis:ia32"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^8.0.0",
    "electron-builder": "^22.3.2"
  },
  "build": {
    "productName": "HelloElectron",
    "appId": "com.electron.hello",
    "asar": true,
    "protocols": {
      "name": "helloElectron",
      "schemes": [
        "helloelectron"
      ]
    },
    "win": {
      "target": [
        "zip",
        "nsis"
      ],
      "icon": "./resources/installer/Icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "buildResources": "./resources/installer/",
      "output": "./dist/",
      "app": "."
    }
  }
}

 

3. 배포 명령어를 실행 

npm run deploy

 

4. dist 폴더에 설치 파일 생성

설치파일 생성

5. setUp.exe 실행

설치중

 

6. 설치 완료

 

설치 완료

 

7. 실행파일 완료

 

exe 실파일이고, Uninstall exe가 삭제파일