서론
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초컷 바로 클릭을 하면 타이밍이 엇나가는 경우가 생긴다. 왜이러는거지??
알게되면 다시 수정하러옴
'🩵electron' 카테고리의 다른 글
apple 개발자 계정으로 macOS application 코드서명+공증 하기(code sign, notarization) (0) | 2024.07.21 |
---|---|
windows 설치파일 digitcert로 전자서명 하기 (0) | 2024.07.17 |
직접 개발한 exe 실행파일을 실 유저에게 배포하려면? (코드 전자 서명) (0) | 2024.05.27 |
electron 디컴파일 해보기, 방지하기 (2) | 2024.04.29 |
electron+react-boilerplate 개발환경에서 deeplink 오류 해결 (0) | 2024.04.29 |