Node.js - Electron 빌드하기 ( .exe파일 생성)

 

안녕하세요.

 

최근 NodeJs로 만들고 있는 Jira 보고서 관리 툴을 Electron으로 빌드하여 사용하기 위해 다양한 삽질을 하고 있었습니다.

 

특히 Electron 빌드가 좀 처럼 되지 않다가 조금 전 빌드에 성공해서 잊기전에 글로 남기려고 합니다.

 

참고한 사이트 :

https://www.electron.build/

https://itinerant.tistory.com/88

 

※ 윈도우 어플리케이션으로 빌드했으며, 설정은 최소한으로만 했습니다.

 

---

 

[ 주요 수정 사항 ]

 

1. dependencies > devDependencies로 변경

 

에러 중 다음과 같은 내용이 있었습니다.

 

Package "electron" is only allowed in "devDependencies".
Please remove it from the "dependencies" section in your package.json.
Package "electron-builder" is only allowed in "devDependencies". 
Please remove it from the "dependencies" section in your package.json...(생략)

대충 해석 했을 때 "electron, electron-builder는 devDependencies에서만 허용되니 dependencies에서 지우고 옮겨라."

이런 내용이길래 얼른 수정했더니 조용해졌습니다.

 

 

 

2. 빌드 관련 옵션 추가

 

사실 이 내용은 비교적 많은 편이였으나, 저에게 필요한 내용이 있는 적절한 블로그를 찾는 것이 관건이였습니다.

 

제가 찾던 내용은 '최소한의 설정으로 윈도우 어플리케이션 빌드' 였으며, 해당 내용이 있는 블로그가 위에 태그한 블로그 중 두 번째 블로그입니다.

 

그 설정을 참고하여 한 설정이 아래 내용이며, package.json 파일에 추가되는 내용입니다.

...

"scripts": {
    "start": "electron .",
    "dist": "electron-builder build"
 },
"build": {
    "asar": true,
    "appId": "com.electron_exer1",
    "productName": "electron_exer1",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
	},
    "author": "hwlee",
    "license": "ISC",
    "devDependencies": {
    "asar": "^2.0.3",
    "electron": "^7.1.9",
    "electron-builder": "^21.2.0"
},

...

추가된 내용은 "build"입니다. 

 

각각의 세팅에 대한 내용은 위의 두 링크에서 확인 가능하며, 정리되는대로 별도의 게시글로 작성하여 업로드 하겠습니다.

 

"script" 내용을 같이 넣어둔건 "build" 내용을 추가할 때 수월하게 하기 위함도 있지만, 다음 주요 수정 사항과 관련이 있어 같이 추가했습니다.

 

 

 

3. script 추가

 

빌드 시작 커맨드로 "electron-builder build"를 shell에 입력하여 바로 실행시키는 봤는데, 세팅이나 OS 차이인지 잘 안됐습니다.

 

그래서 다른 가이드 문서(위의 첫 번째 링크)를 참조하여 "electron ." 커맨드와 같이 script에 작성하여 실행 했더니 정상적으로 build start를 했습니다. (이후 1번 내용의 에러를 접하게 됩니다. 서순...) 

 

---

 

이렇게 Electron을 빌드하기 위해 했던 삽질 중 주요 내용을 기록했습니다. 

 

막상 적어두고 나니 공부할 내용이 더 많아진 것 같지만 그래도 빌드에 성공했으니 첫 번째 관문을 넘었다고 생각합니다. (기능 추가 할 생각에 신남)

 

읽어주셔서 감사합니다.

 

 

 

 

---

+ 2020.03.04 package.json 전체 내용 추가

 

{
  "name": "electron_jira",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder build"
  },
  "author": "hwlee",
  "license": "ISC",
  "devDependencies": {
    "asar": "^2.0.3",
    "electron-packager": "^14.1.1",
    "electron": "^7.1.9",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "asar": true,
    "appId": "com.electron_jira",
    "productName": "electron_jira",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": true,
      "perMachine": false,
      "createDesktopShortcut": true
    }
  },
  "dependencies": {
    "jira-client": "^6.14.0"
  }
}