최근에 이직한 회사에서 데스크탑 앱 서비스에 관심을 보이길래.
당당하게 외쳤다.
Electron !
electron-quick-start를 이용해서 바로 시작해봤다. 역시 데스크탑앱 생태계 최상위 포식자답게 상세한 문서와 스타터팩을 지원한다. 한 가지 아쉬운 점은 한글 문서가 없다는 점이다. 대한민국 일렉트론 개발자들 각성하라.
Hello Electron!
JavaScript is EVERYWHERE !
최근 웹 개발 트렌드가 서버에서 클라이언트 쪽으로 대부분의 비즈니스 로직이 넘어오면서. 프론트엔드 프레임워크들의 위상이 매우 높아졌다.(React, Vue, Angu어쩌구 그리고 Svelte)
요즘은 대부분의 서비스들의 화면 영역은 웹 기술을 이용한다. 프론트엔드 개발자는 이제 철밥통!(?)
이번에 얘기할 Electron도 결국은 웹 기술을 이용한 데스크탑 앱을 만드는 기술이다.
뼛속부터 Vue 개발자인 나는 프론트엔드 스펙은 무조건 Vue를 채택한다. React를 할 줄 모른다.
여러 자료 중 가장 눈에 띄는 자료는 electron-vue였다.
vue로 구축 된 electron 애플리케이션을 만들기 위한 보일러 플레이트
바로 클론 받고 감탄하는 순간. 이게 웬걸?
Electron 버전이 2 ... ?
현재 시점으로 Electron stable은 13이다..(18까지도 개발 중) 버전이 너무 구닥다리라서 바로 손절했다.
앞서 얘기한 electron-vue가 Electron 위에 Vue를 올린 느낌이라면. Electron Builder 는 기존 NPM 프로젝트에 Electron을 씌우는 느낌이다. Vue에서는 정말 유용하게도 Vue CLI에서 지원해준다. (정말 최고!)
Vue CLI Plugin Electron Builder
기존 Vue 프로젝트에 해당 라이브러리만 추가해주면 된다. 정말 쉽다.
$ vue add electron-builder대단하다고 느낀게, 기존 Vue 프로젝트에 해당 라이브러리만 추가해주면 일렉트론으로 서비스를 실행할 수 있다.
기존 Vue프로젝트를 쉽게 Electron으로 띄웠다.
라이브러리를 추가하면 src/background.js이 생기는데, Electron의 main.js역할을 하는 것으로 예상된다.
웹 서비스를 데스크탑 앱 서비스로 당장 런칭하고 싶다면, 이 방법을 적극 추천할 것이다.
데스크탑 앱을 관심 갖기 시작하면서 가장 궁금했던 부분이 어떻게 사용자한테 업데이트를 자동으로 시킬 수 있는가였다. Auto Updater와 GitHub Release를 이용해서 구현해보자.
아래는 공식 문서에 있는 내용을 옮긴 것이다. 공식 문서 설명이 너무 부실하다.
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
publish: ['github']
}
}
}
}...
+ import { autoUpdater } from "electron-updater"
...
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
+ autoUpdater.checkForUpdatesAndNotify()
}
...3-3. https://github.com/settings/tokens에서 토큰을 만들어준다. Generate new token.
$ export GH_TOKEN=[내 토큰 정보]$ npm run electron:build -- -p always
$ yarn electron:build -p always
Windows 기준 빌드 결과물이다. /dist_electron 아래에 생긴다.
Draft a new release !
-
Windows
- lastest.yml
- XXXX-Setup-[version].exe
-
MacOS
- lastest.yml
- XXXX-[version].dmg
*Trouble Shooting
여기서 주의해야 될 점은.
설치 파일들의 파일명을 저렇게 수정해서 올려야 된다는 거다. 나의 경우 Windows에서 빌드 했을 때 mbti-admin Setup 0.1.1.exe로 결과물이 나왔는데, Release에 올리면 mbti-admin.Setup.0.1.1.exe로 바뀌어서 올라갔었다. 이 문제로 이틀 동안 헤맸다...
에러내용
Error: Cannot download "https://github.com/es5es5/mbti-admin-web/releases/download/v0.1.2/mbti-admin-Setup-0.1.2.exe", status 404: lastest.yml에 file 정보가 mbti-admin-Setup-0.1.2.exe로 돼있는 걸 확인할 수 있다.
version: 0.1.2
files:
- url: mbti-admin-Setup-0.1.2.exe
sha512: gUmqfkJz9Kw1qF2oERLbLsX2IlRO/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
size: 70176638
path: mbti-admin-Setup-0.1.2.exe
sha512: gUmqfkJz9Kw1qF2oERLbLsX2IlRO/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
releaseDate: '2021-12-10T02:54:45.988Z'현재 프로젝트의 package.json version정보와 Release의 최신 버전을 비교해서 업데이트 가능 여부를 판단한다.
업데이트 하시겠습니까?
네!!!!
왼쪽 하단에 버전정보를 써뒀다. (v0.1.2 → v0.1.3)
