[Electron] 튜토리얼 Part 6: 앱 배포 및 자동 업데이트

GitHub Publisher 설정

Electron Forge는 GitHub Publisher 플러그인을 통해 앱의 배포 파일을 GitHub Releases에 업로드할 수 있습니다. 먼저, 아래와 같이 Publisher 모듈을 설치합니다.

npm install --save-dev @electron-forge/publisher-github

설치 후, forge.config.js 파일에 GitHub Publisher를 설정합니다. 예제에서는 배포를 초안(draft) 상태로 생성하여 나중에 GitHub 웹사이트에서 릴리즈 노트를 작성할 수 있도록 구성합니다.

// forge.config.js
module.exports = {
  packagerConfig: {
    // 운영체제별 서명 옵션 등을 여기에 설정할 수 있습니다.
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel', // Windows 배포용 (예: .exe, .msi)
      config: {
        name: 'my_electron_app'
      }
    },
    {
      name: '@electron-forge/maker-dmg', // macOS 배포용
      config: {}
    },
    {
      name: '@electron-forge/maker-zip', // macOS용 ZIP 파일 생성
      platforms: ['darwin']
    }
  ],
  publishers: [
    {
      name: '@electron-forge/publisher-github',
      config: {
        repository: {
          owner: 'your-github-username', // GitHub 사용자 이름
          name: 'your-repo-name'         // 저장소 이름
        },
        prerelease: false,
        draft: true  // 초안 상태로 릴리즈를 생성하여 검토 후 수동 공개
      }
    }
  ]
};

GitHub Publisher는 GitHub API에 접근하기 위해 GITHUB_TOKEN 환경 변수를 사용합니다. 개인 액세스 토큰(PAT)을 생성하고, public_repo 권한을 부여한 후 환경 변수에 등록해야합니다.

2. 배포 파일 생성 및 게시

프로젝트 루트에서 아래 명령어를 실행하면 Electron Forge가 앱을 패키징하고 GitHub Releases에 업로드합니다.

//package.json
"scripts": {
  "start": "electron-forge start",
  "package": "electron-forge package",
  "make": "electron-forge make",
  "publish": "electron-forge publish"
},

npm run publish

이 명령은 먼저 앱을 패키징한 후, 지정한 메이커들을 사용해 플랫폼별 배포 파일을 생성합니다. 생성된 파일은 out/make 폴더에 위치하게 되며, GitHub Releases의 초안 릴리즈로 업로드됩니다. 또한, npm의 version 명령을 사용하면 Git 태그를 붙여 릴리즈와 코드 베이스를 연동할 수 있습니다.

3. 자동 업데이트 기능 구현

앱이 배포되면, 새로운 버전이 출시되었을 때 사용자가 자동으로 업데이트할 수 있도록 자동 업데이트 기능을 추가할 수 있습니다. Electron은 autoUpdater 모듈을 통해 업데이트 피드를 확인하지만, 이를 보다 쉽게 구성하기 위해 update-electron-app 모듈을 제공하고 있습니다.

npm install update-electron-app

그 후, 메인 프로세스 코드에 아래와 같이 추가합니다.

// main.js
const { app, BrowserWindow } = require('electron');

// update-electron-app 모듈을 즉시 호출하여 자동 업데이트를 설정합니다.
require('update-electron-app')();

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false
    }
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});