Electron with vue! (업데이트 하기!)

지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.

electron-updater를 사용하여 사용자가 딱히 신경 쓰지 않아도 업데이트가 되도록 해보겠습니다.

기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다.

업데이트를 위한 모듈 추가


npm i electron-updater --save
npm i electron-log --save

electron-updater는 업데이트를 위하여 사용되는 모듈입니다.

electron-log는 로그를 파일로 관리 하기 위함 입니다. 업데이트중에는 콘솔을 사용 할 수 없기에 파일에 남겨서 확인하는 것을 추천합니다.

빌드를 위한 일렉트론 설정!

일렉트론 프로젝트의 index.js를 수정하자

변경점의 색상을 변경 하였습니다.


const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')
const {autoUpdater} = require('electron-updater')
const log = require('electron-log')

const createWindow = (devMode) => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  if (devMode) {
    win.loadURL('http://localhost:8080')
  } else {
    win.loadFile('dist_web/index.html')
  }
  win.webContents.openDevTools()
}

app.whenReady().then(() => {
  if (process.env.NODE_ENV === 'dev') {
    createWindow(true)
  } else {
    autoUpdater.checkForUpdates()
  }
})

app.on('window-all-closed', () => {
  app.quit()
})

const templates = [{
  label: app.getName(),
  submenu: [
    {
      label: app.getVersion()
    }]
}]

const menu = Menu.buildFromTemplate(templates)
Menu.setApplicationMenu(menu)

autoUpdater.autoDownload = false

autoUpdater.on('checking-for-update', () => {
  log.info('업데이트 확인 중...')
})
autoUpdater.on('update-available', (info) => {
  log.info('업데이트가 가능합니다.')
  autoUpdater.downloadUpdate()
})
autoUpdater.on('update-not-available', (info) => {
  log.info('현재 최신버전입니다.')
  createWindow()
})
autoUpdater.on('error', (err) => {
  log.info('에러가 발생하였습니다. 에러내용 : ' + err)
  // createWindow()
  app.quit()
})
autoUpdater.on('download-progress', (progressObj) => {
  log.info('progressObj', progressObj)
})
autoUpdater.on('update-downloaded', (info) => {
  log.info(info)
  log.info('업데이트를 위한 파일 다운로드가 완료되었습니다.')
  setImmediate(() => {
    autoUpdater.quitAndInstall()
  })
})

위의 변경된 코드들의 변경점은 세가지 정도가 있다.

1. 컨텐츠를 로드하는 시점 (createWindow)

- 개발모드(설치파일로 설치되지 않은 경우)에서는 업데이트 자체를 실행되지 않는 경우를 위해

- 상용모드(설치파일로 설치된 경우)에서는 최신 앱인지 확인 후 실행이 되기 위해

2. 업데이트를 위한이벤트 및 로그 추가.

업데이트 이벤트는 아래의 경우 필수적으로 볼 수 있다.

- 해당 내용은 업데이트 error시에 앱을 끌 것인지 혹은 에러를 무시하고 실행 할 지에 대해서 결정을 해야한다.

- autoDownload 옵션에 따라서 몇몇 이벤트에 처리를 추가해야할 것이다. autoDownload를 사용하여 유저의 선택으로 리소스를 다운로드 받을 것인지? 이런내용을 추가 할 수도 있을 것이다. 나의 경우에는 다운로드 완료후에 quitAndInstall 함수를 이용 하여 컨텐츠를 바로 바꾸어주기 위하여 사용 하였다.

3. 앱정보를 보여주기위한 menu수정

- 업데이트 이후에 어플이 잘 업데이트 되었는지 확인 하기위하여 menu를 이용하여 표기 하였다. 대부분의 어플리케이션에서 확인 가능한 메뉴이다.

자 이제 코드는 이제 준비가 다 되었다.

빌드파일로 만든 후 설치 및 실행해보자.

그러면 실행이 되다가 종료되는 것처럼 계속 보일 것이다.

자 이때 로그를 살펴보자

윈도우라면 아래의 경로에서 확인 하면 된다.

%USERPROFILE%\AppData\Roaming\{app name}\logs\{process type}.log

C:\Users\sejiwok\AppData\Roaming\my-electron-app\logs\main.log

맥이라면 아래의 위치에서 확인하면 된다.

~/Library/Logs/{app name}/{process type}.log

/Users/sejiowork/Library/Logs/my-electron-app\main.log

아래의 오류가 발생 하였을 것이다.

[info] 에러가 발생하였습니다. 에러내용 : Error: No published versions on GitHub

GitHub을 통하여 배포하기!

사용하고 있는 repository의 우측 하단에 Create a new release를 클릭 해주도록 하자.

만약에 GitHub을 사용하고 있지 않다거나 private repository라면 다음 포스팅을 확인 해보는 것을 추천한다.

태그 추가 및 설명 파일추가등을 진행하자.

아래의 파일들을 추가해주면 된다.

MacOS인 경우 : latest-mac.yml, xxx-mac.zip, xxx.dmg

Windows인 경우 : latest.yml, xxx.exe

추가적으로 업로드 시에 파일이름에 공백이 있는 경우 아래처럼 "-" 치환해주도록 하자.

my-electron-app Setup 1.0.0.exe
my-electron-app-Setup-1.0.0.exe

업로드가 되었음에도 불구하고 GitHub의 경우에는 공백을 "."으로 치환을 하고 빌드시의 경우에는 "-" 치하기 때문에... 에러로 404가 뜰 수 있다.

이제 실행 해보면 아래와 같은 확면을 볼수 있을 것이다.

어플리케이션 버전 올리기!

일렉트론 프로젝트의 package.json의 version을 변경 해주자.

아래 처럼 version만 변경 한 후 빌드 후 위의 GitHub에 release과정을 반복해주도록 하자.


{
  "name": "my-electron-app",
  "version": "1.0.1",
  "description": "",
  후략 ...
}

위처럼 준비 되었다면 어플리케이션을 재실행 해주자.

아마도 mac이라면 코드 서명을 하지 않았기에 아무런 변화도 없을 것이다. 개발자 등록이 필요한 부분이므로 윈도우에서 테스트 해보도록 하자.

윈도우에서도 전자서명이 필요하지만 진행은 잘 된다. 이 부분은 다음에 따로 포스팅 해볼 수 있으면 하겠다.

윈도우라면 위 처럼 1.0.1이라고 노출 되는것을 볼 수 있을 것이다.

코드 땜장이

이 블로그 검색