vue 로 만든 웹을 desktop app으로 사용하기 (electron builder 소개)

Rancher Desktop의 구성

docker desktop을 사용하지 않고 docker, kubernetes를 사용하기 위한 대안을 찾다가 rancher desktop을 사용해봤다.

2021.12.01 - [Study/Docker & Kubernetes] - Window에서 Docker Desktop 없이 docker, kubernetes 사용하기

해당 app을 사용하면서 어떻게 만들어졌는지 궁금했는데 github에 공개되어 있었다.

https://github.com/rancher-sandbox/rancher-desktop

GitHub - rancher-sandbox/rancher-desktop: Kubernetes and container management to the desktop

해당 app은 Vuejs와 typescript를 사용하여 웹으로 만들어졌다.

electron builder는 해당 웹을 window나 mac, linux에서 app으로 사용할 수 있도록 packaging 하도록 도와준다.

https://www.electron.build/

electron-builder

app으로 사용할 수 있으면서 설정을 통해 자동 업데이트도 가능하기 때문에 app을 하나 만들고 주기적인 업데이트를 제공해줄 수 도 있다.

Vue CLI Plugin Electron Builder 소개

electron builder는 webpack, react 결과물을 packaging 해주는데 vue도 지원한다.

vue의 경우 Vue CLI Plugin Electron Builder를 통해 더욱 손쉽게 packaing 할 수 있다.

https://nklayman.github.io/vue-cli-plugin-electron-builder/

Vue CLI Plugin Electron Builder

세세한 설정까지 아직 사용해보지 않았지만 단순히 vue plugin을 추가한 것만으로도 packing이 되었다.

설치하기

vue cli를 사용하고 있다면 vue ui에서 해당 프로젝트의 plugin을 추가하면 된다.

command로 추가하려면 아래처럼 추가한다.

vue add electron-builder

이렇게 plugin을 추가하면 package.json에 아래 정보가 추가된다.

{
  "scripts": {
    // ...
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "devDependencies": {
    // ...
    "electron": "13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "^2.1.1"
  },
}

또한 빌드와 관련된 src/background.js가 추가된다.

vue cli plugin electron builder를 사용하지 않으면 관련한 설정을 일일이 해야 한다.

사용하기

기본적으로 설치하면 제공되는 4개 script는 다음과 같다.

• electron:build : installer를 빌드
• electron:serve : 개발용 서버를 실행
• postinstall
• postuninstall

아래 두 개의 경우 의존성 관련 처리인 듯하다.

build로 installer가 생성되어 사용하면 된다.

테스트로 예전에 만들어봤던 diablo2 룬워드 검색 페이지를 빌드해보았다.

설치되는 내용은 다음과 같다.

exe를 실행하면 vue web이 window app으로 실행된다.

해당 페이지는 기존에 github에 올렸던 페이지이다.

https://luversof.github.io/diablo2

소감

웹페이지를 그대로 app으로 만들 수 있다는 것이 재밌기도 했고 웹 개발자 입장에서 좀 더 친숙한 방식인 웹페이지를 사용하여 설치형 앱을 만들 수 있는 게 신기했다.

버전을 체크하여 업데이트를 할 수 있는 기능도 있다고 하고 좀더 세세하게 살펴보면 더 많은 기능들을 쓸 수 있을 거 같다.