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

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

github.com

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

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

https://www.electron.build/

electron-builder

electron-builder A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box. NPM packages management: Code Signing on a CI server or development machine. Auto Up

www.electron.build

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

nklayman.github.io

세세한 설정까지 아직 사용해보지 않았지만 단순히 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를 사용하지 않으면 관련한 설정을 일일이 해야 한다.