별도 서버를 활용한 Electron AutoUpdater 적용

Electron Framework에는 다양한 AutoUpdater 방법이 있다.

기본적으로 제공하는 autoUpdater 모듈로는 Squirrel 방식인데 이전에 써보았을때 보면 확실히 업데이트 되는지도 모르게 알아서 업데이트 해주는게 인상적이였다.

다만 내 경우엔 기본 모듈인 autoUpdater를 쓰지 않고 있는데, 배포시에 electron-builder를 통해 패키징을 하기 때문에 electron-builder 에서 권장하는 electron-autoupdater를 사용하는 편이다.

Electron-AutoUpdater를 사용하기 위해서는 별도의 서버를 필요로 하는데, 상황에 따라 github이나 s3를 이용하는 방법도 있으나 이번 포스팅엔 별도 서버를 활용하는 방법에 대해서만 서술할 예정이다.

기본적으로 Electron을 사용할 수 있다는 전제하에 전체 코드가 아닌 요약코드로 작성되어있음을 주의하자.

---

설치

npm install --save electron-updater

#electron builder는 터미널 어디에서든 사용할 수 있게 global로 설치
npm install -g electron-builder

npm install electron-log

 

적용 (예제)

package.json 

• script 부분에 pacakge 추가

{
  "name": "client",
  "description": "platform",
  "author": "god-logger",
  "version": "0.0.1",
  "copyright": "Copyright ⓒ 2023. got-logger inc. all rights reserved.",
  "private": true,
  "dependencies": {
    "electron-log": "^4.4.8",
    "electron-updater": "^5.3.0",
  },
  "devDependencies": {
    "concurrently": "^8.0.1",
    "electron": "^24.1.2",
    "electron-builder": "^24.2.1",
  },
  "main": "./electron.js",
  "homepage": "https://got-logger.tistory.com",
  "scripts": {
    "start": "electron ./electron.js",
    "package": "electron-builder --config ./buildConfig.json --win --x64 -p always",
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

buildConfig.json (생성) 

※ package.json 내에 build라는 키로 넣어도 되지만, 추후에 profile에 따라 다르게 설정이 이루어져야하는 경우를 고려해 별도 파일로 처리하는게 좋기에 따로 json파일을 생성하였다.

• {  } 로 되어있는 부분을 본인 프로그램에 맞춰 변경
• 각 키에 대한 설명은 별도 게시글을 통해 상세히 작성할 예정

{
  "productName": "{프로그램 명}",
  "appId": "kr.godlogger.client",
  "asar": true,
  "files": [
    "**/*",
    "!.git",
    "!.vscode",
    "!buildConfig.json",
    "!package-lock.json",
    "!.gitignore.json",
    "!README.md",
    "!yarn.lock",
  ],
  "publish": [
    {
      "provider": "generic",
      "url": "https://{업데이트용 서버}/release",
      "channel": "latest",
      "publishAutoUpdate": true
    }
  ],
  "win": {
    "target": ["nsis", "zip"],
    "icon": "./icon.ico"
  },
  "nsis": {
    "oneClick": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "perMachine": true,
    "allowElevation": true,
    "shortcutName": "{단축아이콘 이름}",
    "allowToChangeInstallationDirectory": false,
    "installerLanguages": ["en_US", "ko_KR"],
    "language": "1042"
  },
  "directories": {
    "output": "{빌드 아웃풋 경로}"
  }
}

 

electron.js  (main)

※ 진행상태를 확인하기 위해 electron-log를 이용하여 로그를 남기는 방식을 선택

const { app, dialog } = require("electron");
const { autoUpdater } = require("electron-updater");
const log = require("electron-log");

... 

log.transports.file.level = "info";
autoUpdater.logger = log;

app.whenReady().then(()=>{
	... 
    autoUpdater.checkForUpdatesAndNotify();
});


autoUpdater.on("checking-for-update", () => {
    log.info("checking-for-update....");
});

autoUpdater.on("update-available", (info) => {
    log.info("update-available.");
});

autoUpdater.on("update-not-available", (info) => {
    log.info("update-not-available.");
});

autoUpdater.on("error", (err) => {
    log.info("update-error:" + err);
});

// 백단에서 다운로드 진행시 진행률 
autoUpdater.on("download-progress", (progressObj) => {
    log.info(
      "download speed:" +
        progressObj.bytePerSecond +
        "/ -download :" +
        progressObj.percent +
        "%" +
        " / (" +
        progressObj.transferred +
        "/" +
        progressObj.total +
        ")"
    );
});

// 업데이트 다운로드가 끝난 경우
autoUpdater.on("update-downloaded", (info) => {
    const options = {
      type: "question",
      buttons: ["업데이트", "취소"],
      title: "클라이언트 업데이터",
      message: "업데이트가 있습니다. 프로그램을 업데이트 하시겠습니까?",
    };

    let btnIndex = dialog.showMessageBoxSync(mainWindow, options);
    if (btnIndex === 0) {
      log.info("update install start and quit");
      autoUpdater.quitAndInstall();
    } else {
      log.info("no update. exit ");
      app.quit();
    }
  });

---

위 설정까지 하고 로컬로 실행하면 되지 않는걸 확인할 수 있다.

물론 서버 구축을 아직 진행하지 않은 상태이기 때문에 당연한 소리겠지만, 혹여나 서버가 정상적으로 구축되어 있는 경우에도 마찬가지다.

일렉트론 프레임워크 로컬환경에서는 오토업데이터는 진행되지 않고, 업데이트 확인을 위해선 실제 패키징(빌드)처리가 필요하다.

 

패키징

npm run pacakge

buildConfig.json 내 productName이 {name}부분으로 치환되어 생성

로그 경로

• on Linux: ~/.config/{app name}/logs/main.log
• on macOS: ~/Library/Logs/{app name}/main.log
• on Windows: %USERPROFILE%\AppData\Roaming\{app name}\logs\main.log

 

서버 내 업로드 

사용하고 있는 서버가  https://test.kr인 경우  https://test.kr/release을 부분으로 패키징된 파일들을 조회할 수 있도록 설정

nginx 설정을 통해 release를 인덱싱할 수 있도록 하는 방법에 대해 자세히 알고 싶으신 분은 아래 링크를 눌러주세요.
[작성중]

 

테스트 방법

1. package.json 내 version 상위 버전으로 변경한 후 재패키징
2. 서버내 release 폴더에 재 업로드
3. 기존 프로그램 실행 
4. 프로그램 다운로드가 다 끝났을 시점에 업데이트 여부 dialog 확인 (몇분이 지나도 안뜨면 로그를 확인하자)