Electron-Vue (Vite) Web Wrapper & Auto-Update Lab

이 프로젝트는 Vite로 빌드된 Vue.js 3 웹 애플리케이션을 Electron 데스크톱 환경으로 패키징하고, GitHub Actions를 통한 CI/CD 및 자동 업데이트 시스템을 통합한 데스크톱 앱 프로젝트입니다.

---

🚀 주요 기능

• Vite + Vue 3 Integration: 현대적인 프론트엔드 빌드 도구인 Vite와 Vue 3를 사용하여 빠르고 효율적인 개발 환경을 제공합니다.

• Web-to-App Wrapper: 기존 웹 서비스를 Electron 브라우저 창 내에서 실행하여 독립적인 데스크톱 프로그램처럼 동작하게 합니다.

• GitHub Actions 자동 배포: 소스 코드를 GitHub에 푸시하면 GitHub Actions가 실행되어 Windows용 .exe 설치 파일을 자동으로 빌드하고 Release 섹션에 업로드합니다.

• 자동 업데이트 (Auto-Update): electron-updater를 활용하여 앱 실행 시 GitHub의 최신 릴리스를 체크하고, 상위 버전이 존재할 경우 자동으로 업데이트를 다운로드 및 적용합니다.

---

🛠 기술 스택

• Framework: Vue.js 3
• Build Tool: Vite
• Desktop Runtime: Electron
• CI/CD: GitHub Actions (Windows 최적화 빌드)
• Update Library: electron-updater

---

💻 시작하기

의존성 설치

npm install

개발 모드 실행

# Vite 개발 서버와 Electron을 동시에 실행합니다.
npm run dev

로컬 빌드

# Windows용 설치 파일(.exe)을 로컬 환경에서 빌드합니다.
npm run build

---

📦 배포 및 업데이트 워크플로우

1. 버전 관리: 신규 기능 추가 후 package.json의 version을 업데이트합니다.

2. 자동 배포: GitHub 저장소로 푸시하면 build-and-release.yml 워크플로우에 의해 자동으로 빌드가 시작됩니다.

3. 릴리스 생성: 빌드가 성공하면 GitHub Releases 페이지에 설치 파일과 버전 정보가 포함된 latest.yml이 자동으로 게시됩니다.

4. 클라이언트 업데이트: 사용자가 프로그램을 실행하면 main.cjs에 구현된 autoUpdater 로직이 실행되어 최신 버전을 유지합니다.

---

⚙️ 주요 설정 파일

• main.cjs: Electron 메인 프로세스 로직 및 자동 업데이트 설정 담당

• preload.cjs: 메인 프로세스와 렌더러 프로세스 간의 안전한 브릿지 역할

• build-and-release.yml: GitHub Actions를 이용한 자동 빌드/배포 파이프라인 정의

• vite.config.js: Vue 3 프로젝트 빌드 및 경로 설정