Electron으로 데스크탑 앱 만들기 (3) - 배포하고 앱 실행하기

Electron을 시작하기 전에 약간의 삽질이 있을 수도 있다.. 고 말씀하셨던 개발자 동료분.. 의 말에 정확하게 삽질이 있긴 했다.
하고 나서 생각해 보면 너무 흔한 오류인가? 싶기도 하고, 경험담이겠지? 싶은 🤣
프로젝 생성까지 했으니 배포 레츠고.

🏠 구조 🏠
electron-app/
 - sample-app/  👉🏻 생성 프로젝트
    - src/
 - main.js  👉🏻 Electron 메인 프로세스 (앱 창 띄우기)
 - package.json  👉🏻 Electron + 실행 스크립트 설정
 - node_modules/

🔨 실행 🔨
> nvm use 
> npm run dev

 

NVM 및 Electron 설치는 아래 포스팅 참고 🔽

https://cyjcyj.tistory.com/207

Electron으로 데스크탑 앱 만들기 (1) - NVM 설치부터

https://cyjcyj.tistory.com/208

Electron으로 데스크탑 앱 만들기 (2) - React + Vite + JavaScript

 

---

🏃🏻‍♀️ 목표

 

목표 : 배포하고, 데스크톱 앱으로 실행하기

순서 : 1️⃣ electron-builder 설치 2️⃣ 빌드 설정 및 진행 3️⃣ 앱 실행

 

1️⃣ electron-builder 설치

> npm install --save-dev electron-builder
electron-builder : Electron 앱을 window 👉🏻 .exe / macOS 👉🏻 .dmg, .app 등으로 간단하게 패키징 해주는 도구 

 

🤔 macOS라서 .exe 파일을 만들지 못하지만, 윈도우 PC에서 실행하면 파일 생성이 됨.

 

 

2️⃣ 빌드 설정 및 진행

1) electron-app/package.json 수정

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.회사.앱이름", // 앱의 고유 ID
    "productName": "MyElectronApp", // 앱 이름, 설치 파일 이름
    "files": [
      "sapmle-app/dist/**/*",
      "main.js"
    ],
    "directories": {
      "output": "release" // 결과물 저장 위치
    },
    "win": {
      "target": "nsis"
    }
  },
  "scripts": {
    "dev": "concurrently \"npm:dev:react\" \"npm:dev:electron\"",
    "dev:react": "cd electron-app && npm run dev",
    "dev:electron": "wait-on http://localhost:5173 && electron ."
  },
  "devDependencies": {
    "concurrently": "^9.x.x",
    "electron": "^3x.x.x",
    "wait-on": "^8.x.x"
  }
}

✅ "win" : { "target" : "nsis" } : nsis는 Windows에서 사용하는 설치 마법사 .exe 포맷


2) electron-app/sample-app 빌드
> npm run build
dist 폴더 생성


3) main.js 수정

const { app } = require('electron');

const isDev = !app.isPackaged;

if (isDev) {
    win.loadURL('http://localhost:5173');
  } else {
    win.loadFile(path.join(__dirname, 'sample-app/dist/index.html'));
  }​

✅ isDev로 개발 서버와 배포 화면 구분


4) electron-app 빌드
> npm run build
main.js 또는 package.json 등 수정 시 빌드 필요.

 

 

3️⃣ 앱 실행

🔽 Windows일 때
npm run build 진행 시 electron-builder가 실행되고, release/ 폴더 안에 .exe 파일이 생성됨 👉🏻 설치 진행.
🔽 macOS일 때 
npm run build 진행 시 electron-builder가 실행되고, release/mac-arm/앱.app 생성.

 

 

---

🐸 버그

 

❗️ 빌드까지 완료하고, app을 열어보았으나 내가 작성한 "Hello World"가 보이지 않는 것! 이유가 무엇인가 하면?

 

파악한 상황 🔽

MyElectronApp을 실행해도 빈 화면만 출력.

Contents > MacOs > MyElectronApp 실행 시에는 Hello World 정상 출력.

앱은 정상으로 실행되지만, 렌더링을 하지 못하는 상황.

화면에 출력하는 타이밍 문제일까 싶어 아래 코드 추가.

 

> main.js 수정

win.once('ready-to-show', () => {
  win.show();
});

// new BrowserWindow()에 아래 코드도 추가
show: flase

 

✅ Electron 창은 자동으로 보이도록 (show: true)가 설정되어 있는데, 화면이 준비되지 않은 상태에서 창을 띄워 빈화면 출력.

따라서 show: false 설정 후, ready-to-show 이벤트가 발생할 때만 win.show() 실행.