vue - electron - github releases - ( 3 )

https://programmerk.tistory.com/56

vue - electron - github release - ( 2 )

 

 

일전에 작성햇던 위 글에서 조금 추가할 계획입니다.

 

 

 

기존에는 아래 로직처럼   electron 이 실행후 상태가 ready 상태가 되면 autoUpdate.checkForUpdates() 가 실행되도록 개발되었습니다.

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
  let a = autoUpdater.checkForUpdates() 
})

 

이런경우  github releases 에 배포한 latest 버전보다 현재 버전이 낮을 경우 무조건 업데이트가 되도록 개발되 있습니다.

 

 

이제 빌드시 개발 환경을 포함시키고 개발 환경에 맞는 배포를 진행하여  환경에 맞는경우에만 업데이트 되도록 수정할 예정입니다

 

1.    .env 파일 생성

 

각 파일별로 파일안에는 

.env.dev  파일에는 VUE_APP_MODE = dev

.env.master 파일에는 VUE_APP_MODE = master 

.env.product 파일에는 VUE_APP_MODE = product

라고 만들어 놧습니다.

 

2. package.json 수정

  "name": "electron-builder",
  "version": "0.1.41",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build-dev": "vue-cli-service electron:build --mode dev",
    "electron:build-master": "vue-cli-service electron:build --mode master",
    "electron:build-product": "vue-cli-service electron:build --mode product",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
   },

 

여기서 주의할점은 version 과 script 입니다

여기서 지정한 version이 github releases에 올라가기때문에 빌드 electron build 환경에 따라 이름을 수정해줘야하는 불편함이있습니다.

ex) dev 환경으로 배포할 경우 version 을 x.y.z.-dev

그리고 dev 환경으로 빌드를 진행합니다  npm run electron:build-dev  ( --mode dev 는 .env.dev 파일을 읽어옴 )

 

3. background.js 수정

 

let mode = process.env.VUE_APP_MODE; // 실행 모드
..
..
..
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
  
  log.info('app.on ready');
  let result = await autoUpdater.getUpdateInfoAndProvider();
  let releasesVersion = result.info.version;
  log.info(releasesVersion);
  log.info(releasesVersion.split('-')[1]);
  if(releasesVersion.split('-')[1]===mode){
    log.info(mode);
    autoUpdater.checkForUpdates()
  }
})

빌드시 설정된 --mode dev 에 따라 .env.dev 파일을 읽어왔기 때문에  첫줄의 VUE_APP_MODE 에서 dev를 읽어올수 있습니다.

 

그리고  app.on 의 ready 상태에서 수정사항이 있습니다.

이전처럼 바로 checkForUpdates()를 진행하는것이아니라 getUpdateInfoAndProvider()을 실행시켜 현재 github releases 에 latest 버전을 가져옵니다. 그리고 가저온 버전이  빌드된 프로그램과 같은 배포 환경 ( dev,master,product) 라면 업데이트 체크를 진행하도록 수정하였습니다.

 

 

이런식으로 하나의 repo 에서 개발환경별 자동 배포 설정이 완료되었습니다.

 

아직 version 을 dev인지 master 인지 product 인지 입력해야하는 불편함이 있어서 좀더 찾아봐야할것같습니다.