💾 설치파일... 주세요? 그래서 진짜 `.exe` 만들고 자동 업데이트까지 해봤습니다

Electron으로 앱을 개발하고 있었습니다.

기능도 제법 잘 돌아가고, UI도 다듬어지고, "이제 좀 완성 느낌 난다" 싶은 그 타이밍.

그런데요.

누군가 아주 가볍게,

정말 아무렇지도 않게 말하더군요.

"설치파일 주세요~ 😊"

...

머릿속으로 이렇게 외쳤습니다:

“드… 드린다고 했는데… 그걸 내가 만든 적이 있었나…?”

---

🤯 배포, 그 이름만 들어도

React, Vite, Electron 조합으로 데스크탑 앱을 개발하던 저는

기능 구현, UI 구성, 상태 관리까지 자신 있었지만

"설치 파일 만들기",

그건 뭔가 건들면 안 될 것 같은 금단의 영역처럼 느껴졌습니다.

왠지 진입하면,

• 뭔가 Windows 98 느낌 나는 인스톨 마법사를 만들어야 할 것 같고
• 빌드하려면 인증서부터 발급받아야 할 것 같고
• 깔고 나면 레지스트리 지워야 할 것 같고

...그랬습니다.

그.런.데.

막상 해보니?

세상 간단합니다.

이제 저도 말합니다:

“테스트요? 설치파일 있으니 실행만 해보세요~ 😉”

---

🎯 목표: 설치부터 업데이트까지

제가 해결한 목표는 아래와 같았습니다:

• Electron 앱을 .exe 설치 파일로 패키징
• 더블클릭으로 설치, 시작메뉴/바탕화면 등록
• 다음 버전 배포 시 별도 안내 없이 자동 업데이트 적용
• 배포 파일을 수동으로 옮기지 않고 자동으로 서버에 올리기
• 내부망에서만 접근 가능한 서버에 안전하게 구성

---

🛠 기술 스택

항목	내용
프론트엔드	React + Vite
데스크탑 통합	Electron + vite-plugin-electron
상태관리	Zustand
빌드 도구	electron-builder
자동 업데이트	electron-updater, electron-log
배포 자동화	Node.js 스크립트 + scp
배포 서버	사내망 HTTP 서버 (ex. http://192.168.x.x:8000/updates/)

---

🧱 디렉토리 구조 (요약)

project-root/
├── src/                    # React 앱 코드
├── electron/
│   ├── main.ts            # Electron 진입점
│   └── preload.ts         # Preload 스크립트
├── dist/                  # Vite 빌드 결과물
├── dist-electron/         # Electron 빌드 결과물
├── release/               # 설치파일 및 자동업데이트 파일
├── scripts/deploy.js      # 배포 자동화 스크립트
└── vite.config.ts

---

⚠️ 흰 화면 지옥에서 살아남는 법

Electron에서 자주 겪는 문제 중 하나가 이겁니다:

빌드도 잘 되고 .exe도 잘 실행되는데…

창이 뜨긴 떴는데 아무것도 안 나옴 😱

✅ 원인 99%: 경로 설정 실수

Electron은 브라우저처럼 public 경로가 없습니다.

정확하게 경로를 잡아주지 않으면 로딩 실패 + 흰 화면이 발생합니다.

🧩 해결법

// main.ts
const startUrl = process.env.NODE_ENV === 'development'
  ? 'http://localhost:3000'
  : url.format({
      pathname: path.join(__dirname, '../../dist/index.html'),
      protocol: 'file:',
      slashes: true
    });

✅ 추가: Vite 설정도 꼭

// vite.config.ts
export default defineConfig({
  base: './', // 이거 안 넣으면 JS, CSS 못 불러옴
})

---

🔄 자동 업데이트 구현: 생각보다 쉽습니다

자동 업데이트를 위해 electron-updater와 electron-log만 설치하면 됩니다:

npm install electron-updater electron-log

핵심 코드 (main.ts)

import { autoUpdater } from 'electron-updater';
import log from 'electron-log';

log.transports.file.level = 'info';
autoUpdater.logger = log;

autoUpdater.checkForUpdatesAndNotify();

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall(); // 앱 꺼지고 재시작됨
});

package.json 설정

"build": {
  "publish": {
    "provider": "generic",
    "url": "http://192.168.0.100:8000/updates/" // 내부 서버 주소
  }
}

자동으로 latest.yml을 기준으로 새 버전이 있으면 다운로드 + 재설치까지 해줍니다.

---

📦 배포 폴더 구성

빌드 완료 후 release/ 폴더에는 다음 파일이 생깁니다:

release/
├── MyApp Setup 1.0.0.exe     ← 설치용
├── MyApp-1.0.0.exe           ← 자동 업데이트용
├── latest.yml                ← 업데이트 메타 정보

이 세 파일을 서버에 올려두면 자동 업데이트가 됩니다.

---

🚀 배포 자동화 스크립트

수동으로 서버에 옮기지 않고, 배포를 자동화했습니다.

📁 scripts/deploy.js

const { execSync } = require('child_process');

const files = ['latest.yml', 'MyApp Setup 1.0.0.exe', 'MyApp-1.0.0.exe'];
const server = 'user@192.168.x.x';
const remote = '/var/www/updates/';

files.forEach(file => {
  console.log(`[배포 중] ${file}`);
  execSync(`scp release/"${file}" ${server}:${remote}`);
});

실행 방법

npm run electron:build
node scripts/deploy.js

빌드하고 배포까지 30초 안에 끝납니다.

설치파일 요청 들어오면 이제 “잠깐만요, 바로 올릴게요” 하면 됩니다.

🤖 그런데 자동 업데이트는 도대체 왜 자동으로 되는 걸까요?

Electron 앱이 자동 업데이트를 할 수 있는 건,

electron-updater와 electron-builder가 아주 잘 짜여진 규칙을 공유하고 있기 때문입니다.

이 시스템은 아래처럼 작동합니다:

1. 앱 실행 시, autoUpdater.checkForUpdatesAndNotify()를 호출하면
2. 설정된 서버 주소(publish.url)에 있는 latest.yml 파일을 다운로드합니다.
3. 이 latest.yml에는 현재 배포 중인 최신 버전 정보가 들어 있습니다.

version: 1.0.1
path: MyApp Setup 1.0.1.exe
sha512: <무결성 검사용 해시>

1. 앱의 package.json에 명시된 현재 버전과 비교해서,

2. 최신 버전이 더 높으면 path에 명시된 .exe를 다운로드하고

3. 사용자가 앱을 종료하면 autoUpdater.quitAndInstall()을 통해

   새 설치파일이 자동으로 실행되고 기존 앱은 교체됩니다.

---

✅ 이게 가능한 이유는?

• electron-builder가 빌드할 때 자동으로 latest.yml과 버전별 .exe를 생성해줍니다.
• electron-updater는 이 latest.yml의 구조를 정확히 이해하고 다운로드 + 설치까지 처리합니다.
• 그리고 우리는 그저… 버전만 올리고, 서버에 올리면 끝.

  즉, 우리가 자동화한 건 배포고, Electron이 자동화해준 건 업데이트 로직입니다.

---

📦 요약하면 이렇게 됩니다:

구성 요소	역할
latest.yml	최신 버전 메타정보 제공
electron-updater	버전 비교 + 다운로드 + 설치
electron-builder	.exe, latest.yml 자동 생성
내 배포 스크립트	서버 업로드 자동화 (scp)
사용자는	그냥 실행만 하면 알아서 최신으로 업데이트됨

---

👀 실무 팁 모음

• appId는 고정값이어야 자동 업데이트가 정확히 동작합니다.
• version 필드는 반드시 수동으로 올려야 합니다 (자동 업데이트 비교용).
• win.target: 'nsis'는 설치 마법사를 만들어줍니다.
• autoUpdater.checkForUpdatesAndNotify()는 앱 실행할 때마다 업데이트 체크합니다.
• 사용자 로그는 electron-log로 남기면 /AppData/Local/... 에 자동 저장됩니다.

---

❓ 글을 본 사람들이 추가로 궁금해할 수 있는 질문들

1. “이거 GitHub 같은 공개 저장소 없어도 되나요?”

네, electron-updater는 GitHub를 기본으로 삼지만

provider: "generic"을 쓰면 내부망 서버나 로컬 서버에서도 완벽히 작동합니다.

심지어 사설 IP나 사내 파일서버도 OK입니다.

---

2. “Setup.exe랑 1.0.0.exe 차이는 뭐예요?”

Setup.exe: 사용자가 처음 설치할 때 쓰는 전체 설치파일MyApp-1.0.0.exe: 자동 업데이트용 패치 파일 (silent install용)

자동 업데이트는 이 작은 -버전.exe만 다운로드해서 설치합니다.

---

3. “버전은 어떻게 인식해요?”

package.json의 "version": "1.0.1" 값을 사용합니다.

자동 업데이트는 latest.yml의 버전과 비교해서

현재 앱보다 높은 버전이면 실행됩니다.

버전 안 올리고 배포하면 업데이트 안 됩니다.

---

4. “설치파일 설치하면 어디에 설치돼요?”

기본적으로 Windows의

C:\Users\{username}\AppData\Local\Programs\MyApp\ 경로에 설치됩니다.

electron-builder에서 installDirectory, 아이콘, 실행 권한 등도 설정 가능합니다.

---

5. “앱 아이콘은 어떻게 바꿔요?”

build 설정에 .ico 파일을 지정하면 됩니다.

"build": {
  "win": {
    "icon": "public/icon.ico"
  }

---

6. “설치할 때 관리자 권한(UAC) 뜨게 할 수 있나요?”

네! 다음 옵션을 추가하면 됩니다:

"win": {
  "requestedExecutionLevel": "requireAdministrator"
}

그러면 설치할 때 UAC 경고창이 뜨며 관리자 권한으로 실행됩니다.

---

7. “자동 업데이트 안 되는 경우도 있어요?”

네, 이런 경우에는 동작하지 않습니다:

• latest.yml이 서버에 없거나 URL 설정이 틀림
• version을 이전 버전으로 다시 낮췄을 경우 (다운그레이드 미지원)
• 앱을 UAC 권한 없이 설치했는데, 업데이트 파일이 관리자 권한을 요구함
• 네트워크에서 업데이트 서버 접근이 불가능한 경우

---

🧘 마무리하며

React + Electron 앱을 설치형으로 배포하려면 뭔가 복잡하고 무서울 것 같았습니다.

하지만 해보니 꽤 재밌고, 은근히 뿌듯하고,

무엇보다 “내가 만든 앱이 진짜로 깔린다”는 경험은 굉장히 짜릿합니다.

웹 개발자도 설치형 앱 만들 수 있습니다.

그리고 그 앱이 알아서 업데이트도 합니다.

그걸 서버에 자동으로 배포하는 스크립트까지 굴러갑니다.

이 글을 여기까지 읽으신 당신도, 지금 바로 npm run electron:build을 해보세요.