Electron + React + TS + Python - Desktop application 윈도우 배포하기

1. electron-builder 설치

npm i -D electron-builder
yarn add -D electron-builder

 

2. package.json 에 build config 추가

{
	.....,
    
    "main": "dist/main.js", // webpack 후 main 의 경로를 적어준다
    "homepage": "./",
    "build": {
    "appId": "{your-app-id}", // 앱 아이디를 적어준다 exe 파일의 이름이 됨
    "productName": "{your-app-name}", //설치 되고 나서 표시되는 앱의 이름
    // 아웃풋 디렉토리를 설정해주지 않으면 dist 폴더로 지정된다. 
     //나같은 경우 webpack을 돌리면 dist 폴더가 생기기 때문에 따로 분리해줌
    "directories": {
      "output": "./out/", 
    },
    //electron-builder 는 맥과 윈도우 모두 패키지 할수 있다
    "mac": { 
      "target": {
        "target": "dmg",
        "arch": "universal"
      }
    },
    "win": {
      "target": {
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    },
    // 윈도우 용 nsis script 추가
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true // 설치 경로 변경 가능
    },
    "buildVersion": "1",
    // 빌드하면 electron-react 프로젝트가 asar 파일로 패키징 되는데 이때 추가로 함께 빌드되어야 하는 리소스 경로를 여기 적어준다. 그럼 {appPath}/resources 에 고대로 담겨진다
    "extraResources": [ 
      {
        "from": "scripts", // 리소스 경로
        "to": "scripts" // 빌드 경로
      },
      {
        "from": "pyenv",
        "to": "pyenv"
      }
    ]},

 

3. package.json 에 build script 추가

"scripts": {
    ...,
    "build:win": "cross-env NODE_ENV=production electron-builder build --win",
    "build:mac": "cross-env NODE_ENV=production electron-builder build --mac"
}

 

4. 윈도우 패키징 결과물!!!

 

눙물...)

진짜 삽질만 한 일주일 넘게 한거 같다ㅠㅠ 

아나콘다에서 띄워서 사용하던 파이썬 가상환경 같은 경우는 패키징 하기 정말 막막했는데 이 블로그 덕분에 광광 울면서 같이 성공적으로 패키징 할 수 있게 되었다. 궁금하신 분들은 참고해보시길!!!

https://velog.io/@ktaewon98/Node-electron-%ED%8C%8C%EC%9D%B4%EC%8D%AC%EC%9D%B4-%EC%84%A4%EC%B9%98%EB%90%98%EC%A7%80-%EC%95%8A%EC%9D%80-PC%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%EA%B0%80%EB%8A%A5%ED%95%98%EB%8F%84%EB%A1%9D-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0feat.-python-shell-anaconda