Electron 앱을 Github에 자동 배포하고 Update하기

지인·2025년 5월 17일

electron 데스크탑 앱 웹 앱 일렉트론

졸업프로젝트

목록 보기

2/2

일렉트론은 Node.js를 사용하여 간단한 웹 앱을 만들 수 있게 해주는 프레임워크이다. 간단한 과정만으로 배포가 가능해 빠르게 데스크탑 앱을 개발할 수 있다.

오늘은 Electron 앱을 배포하고 깃헙에서 자동 업데이트까지 할 수 있는 방법에 대해 설명하고자 한다.

준비사항

먼저 Node.js와 NPM이 설치되어 있어야 한다.

node -v
npm -v

위 명령어를 통해 설치를 확인하고 되어있지 않다면 Node.js 공식사이트에서 설치해준다. 그리고, 프로젝트가 깃헙에 올라가 있어야 한다. 현재 진행중인 Node.js, React 기반 채찍피티 프로젝트로 진행하겠다.

이제 배포할 준비가 되었다!

1. package.json 수정하기

1. 이름 및 버전 관리

"name": "capstone_project",
  "version": "1.0.1",
  "main": "frontend/main.js",
  "type": "commonjs"

먼저 프로젝트의 이름을 설정해준다. 또, 프론트엔드가 진입하는 지점도 표시해줘야 한다.
배포를 하게되면 버전이 생기는데, 버전은 업데이트시 올려서 표현해주면 된다. 지금은 첫 배포므로 1.0.1로 표현하겠다.

Type은 common.js로 명시해준다. Electron의 main.js가 CommonJS 문법 (require)을 쓰기 때문에 위 ESM을 쓰는 Vite와 충돌 가능성이 있기 때문이다.

2. Script 수정

"scripts": {
    ...
    "build": "vite build --config frontend/vite.config.js",
    "dist": "electron-builder",
    "deploy": "npm run build && npm run dist -- --publish always",
    ...
  },

스크립트에서는 원래 있던 것에 다음 세가지를 추가하면 된다.
build를 통해 먼저 프론트엔드 빌드하는 명령을 추가하고, deploy 명령어를 통해 배포를 해주면 된다.

3.build 항목 추가

"build": {
  "appId": "com.chaejjikpt",
  "productName": "채찍피티",
  "files": [
    "frontend/main.js",
    "frontend/preload.js",
    "frontend/dist/**",
    "backend/**",
    "node_modules/**",
    "package.json"
  ],
  "directories": {
    "buildResources": "assets"
  },
  "publish": [
    {
      "provider": "github",
      "owner": "minsihihi",
      "repo": "Fabre"
    }
  ]
}

appId는 앱의 고유한 아이디로 도메인의 반대로 작성해주면 된다. productName은 앱의 이름으로 다운 받았을 때의 이름과 같다. file에는 패키징에 포함될 파일들을 넣어준다.

publish는 깃헙 자동 배포를 위한 항목으로 provider에는 github을, owner와 repo에는 각각 연결된 리포지토리의 owner github 아이디와 레포지토리 이름을 넣으면 된다.