지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.
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
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.exemy-electron-app-Setup-1.0.0.exe
업로드가 되었음에도 불구하고 GitHub의 경우에는 공백을 "."으로 치환을 하고 빌드시의 경우에는 "-" 치하기 때문에... 에러로 404가 뜰 수 있다.
이제 실행 해보면 아래와 같은 확면을 볼수 있을 것이다.
어플리케이션 버전 올리기!
{
"name": "my-electron-app",
"version": "1.0.1",
"description": "",
후략 ...
}
아마도 mac이라면 코드 서명을 하지 않았기에 아무런 변화도 없을 것이다. 개발자 등록이 필요한 부분이므로 윈도우에서 테스트 해보도록 하자.
윈도우에서도 전자서명이 필요하지만 진행은 잘 된다. 이 부분은 다음에 따로 포스팅 해볼 수 있으면 하겠다.
윈도우라면 위 처럼 1.0.1이라고 노출 되는것을 볼 수 있을 것이다.
댓글
댓글 쓰기