electron s3 github actions 자동 배포 및 autoUpdater 설정

 

서론

autoUpdater는 electron에 내장된것과 'electron-updater'에 내장된것 두가지가 있다. 'electron-updater'가 좀 더 많은 기능을 제공하며 사용하기 편했다. 

처음에는 electron 앱의 자동 배포가 gtihub release에 연동되어있었다. 그러나 파일 다운로드 url은 s3에서 따로 관리되고있어서 다운로드와 자동배포 모두 s3와 연동되게 변경하기로 했다. 하는김에 github actions를 사용해서 s3에 exe 파일을 자동배포 할 수 있도록 해준다. 

그리고 기존 코드가 배포하는 과정에서 package.json에 github token이 들어가있어서 잘못하면 토큰이 털릴 수 있는 구조로 되어있었다.그래서  

 

 

과정

다른 과정은 어떤걸 배포하든 똑같으니 생략 (aws s3 버킷생성, 업로드용 IAM 생성, github secret에 IAM키값 설정)

workflows의 yml 파일 구성에 대해서만 볼것이다. 

 

github secret에 GH_TOKEN 및 AWS 키값들 등록해야함

 

완성된 yml 파일

name: Build and Deploy to S3

on:
  push:
    branches:
      - main

jobs:
  build-and-upload:
    runs-on: windows-latest

    steps:
      - name: Check out repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install Dependencies
        run: npm install

      - name: Build App
        run: |
          npx ts-node ./.erb/scripts/clean.js dist
          npm run build

      - name: Build Windows Executable
        run: |
          npx electron-builder build --win --publish always
          npm run build:dll
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

      - name: Install AWS CLI
        run: choco install awscli

      - name: Configure AWS CLI
        run: |
          aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws configure set default.region ap-northeast-2

      - name: Upload Executable to S3
        run: |
          for file in release/build/*.exe; do
            newname="${file// /-}"
            mv "$file" "$newname"
            aws s3 cp "$newname" s3://stephow-desktop-releases/
          done
          aws s3 cp release/build/latest.yml s3://stephow-desktop-releases/
        shell: bash

 

문제

npm run package 명령어로 로컬에서 빌드 후 실행하면 s3의 업데이트 파일을 제대로 가져오는데, github actions로 업로드한 exe파일을 다운받아서 실행하면 s3의 업데이트 파일을 가져오지 못함. 위 폴더에 업데이트할 최신파일을 다운로드 받아와야하는데 그러지 못하고있는 상황

 

 

 

 

 

인줄 알았는데 다운로드 속도보다 예 버튼을 먼저 눌러버리면 문제가 되는거였음. 

다운로드 완료 후 저 창이 나오도록 변경

 

아래와같이 코드를 변경해주었다. 

// 업데이트 가능한 새 버전이 있는 경우
autoUpdater.on('update-available', async () => {
  autoUpdater.downloadUpdate();
});

autoUpdater.on('update-downloaded', async () => {
  const { response } = await dialog.showMessageBox({
    type: 'info',
    title: '업데이트 다운로드',
    message: '새로운 업데이트가 있습니다. 다운로드를 진행해주세요. ',
    buttons: ['예', '아니오'],
    defaultId: 1,
    cancelId: 1,
  });

  if (response === 0) {
    autoUpdater.quitAndInstall();
  }
});

autoUpdater.on('error', (error) => {
  dialog.showMessageBox({
    type: 'error',
    title: '업데이트 오류',
    message: `업데이트 과정 중 오류가 발생했습니다: ${error}`,
  });
  console.error(`AutoUpdater error: ${error}`);
});

 

이제 새로운 파일이 다운로드 된 후에 alert 창이 뜬다.

아니 그런데도 alert 창이 뜨자마자 0.1초컷 바로 클릭을 하면 타이밍이 엇나가는 경우가 생긴다. 왜이러는거지??

알게되면 다시 수정하러옴