[Electron 데스크톱 앱 개발] #8: GitHub Release로 Electron 앱 배포하기

 

이번에는 지금까지 만든 Electron 앱을 GitHub Release를 이용해 배포하는 방법을 알아보겠습니다.

프로그램을 친구나 지인에게 전달할 때는 USB, 메일, 메신저 등을 통해 Setup.exe와 같은 설치 파일을 직접 전달할 수 있습니다.

하지만 프로그램을 수정해 새로운 버전을 만들 때마다 설치 파일을 다시 전달해야 하는 불편함이 있습니다.

그래서 이번에는 GitHub Release를 이용해 배포 파일을 버전별로 관리하고, 한 곳에서 다운로드할 수 있도록 만드는 방법​을 알아보겠습니다.

---

✔️ 1. GitHub Repository와 Release의 차이

먼저 GitHub에서 사용하고 있는 Repository와 Release의 차이를 알아보겠습니다.

🔹 Repository

Repository는 프로그램을 개발하면서 소스코드를 관리하는 공간입니다.

저는 Electron 프로젝트를 SourceTree와 연결해서 사용하고 있으며, 코드를 수정한 후 Commit과 Push를 통해 GitHub Repository에 변경 내용을 저장하고 있습니다.

코드 수정
↓
SourceTree Commit
↓
GitHub Push
↓
GitHub Repository에 소스코드 저장

즉, 개발 과정에서 변경된 내용을 기록하고 관리하기 위한 공간입니다.

🔹 Release

Release는 개발이 완료된 프로그램을 특정 버전으로 만들어 배포하기 위한 기능입니다.

예를 들어 현재 만든 프로그램이 1.0.0 버전이라면,

Electron 프로젝트
↓
npm run make
↓
Setup.exe 생성
↓
GitHub Release v1.0.0
↓
사용자 다운로드

쉽게 생각하면,

Repository = 개발하면서 소스코드를 관리하는 곳
Release = 완성된 프로그램을 버전별로 사용자에게 배포하는 곳

이라고 이해하면 됩니다.

---

✔️ 2. 기존 GitHub Repository는 그대로 사용하기

저는 이미 Electron 프로젝트를 비공개 GitHub Repository에 연결해둔 상태입니다.

따라서 이번에 GitHub Release를 사용하기 위해 Repository를 새로 만들거나 SourceTree를 다시 연결할 필요는 없습니다.

현재 사용하고 있는 Repository에서 그대로 Release를 만들면 됩니다.

내 PC
 │
 │ SourceTree
 ▼
GitHub Repository
 │
 ├─ 소스코드
 ├─ package.json
 ├─ forge.config.js
 ├─ main.js
 └─ 기타 프로젝트 파일

💡 참고

GitHub Release는 기존 Repository와 별도로 새로운 저장소를 만드는 기능이 아니라,
현재 Repository에서 특정 버전을 배포하기 위한 기능이라고 생각하면 됩니다.

따라서 지금처럼 개발용 Repository를 비공개(Private)​로 사용하고 있어도 Release를 만들 수 있습니다.

❗️ GitHub Repository가 없는 경우

아직 GitHub Repository가 없다면 먼저 Repository를 생성하고
Electron 프로젝트를 GitHub에 연결해야 합니다.

이 글에서는 이미 Repository가 연결되어 있는 상태를 기준으로 진행하겠습니다.

🔹 비공개(Private) Repository를 사용하는 경우

현재 제가 사용하는 Repository는 비공개(Private) Repository입니다.

따라서 해당 Repository의 Release도 접근 권한이 있는 사용자만 확인하고 다운로드할 수 있습니다.

누구나 별도의 GitHub 권한 없이 프로그램을 다운로드할 수 있도록 배포하려면
공개(Public) Repository를 사용해야 합니다.

---

✔️ 3. GitHub Release를 사용하는 이유

사실 프로그램 하나를 친구에게 전달하는 정도라면 GitHub Release가 반드시 필요한 것은 아닙니다.

예를 들어 지금 만든 `Setup.exe` 파일을 USB나 메일, 메신저 등을 통해 직접 전달할 수 있습니다.

Setup.exe
   ↓
USB / 메일 / 메신저
   ↓
친구에게 전달

이 방법으로도 프로그램을 설치하는 데에는 문제가 없습니다.

하지만 프로그램을 수정해서 새로운 버전을 만들게 되면 조금 불편해집니다.

예를 들어,

Huni Roulette v1.0.0
        ↓
버그 수정
        ↓
Huni Roulette v1.0.1

새로운 버전이 만들어질 때마다 새로운 설치 파일을 다시 전달해야 합니다.

사용자가 많아질수록 이런 방식은 점점 번거로워집니다.

GitHub Release를 이용하면 완성된 버전을 GitHub에 올려두고, 사용자가 필요한 버전을 다운로드할 수 있습니다.

GitHub Repository
       │
       └─ Releases
           ├─ v1.0.0
           │ └─ Setup.exe
           │ 
           ├─ v1.0.1 
           │ └─ Setup.exe
           │ 
           └─ v1.0.2 
             └─ Setup.exe

따라서 프로그램의 버전이 많아져도 어떤 버전이 배포되었는지 확인하기 편리합니다.

💡 참고
GitHub Release 자체가 자동 업데이트 기능을 제공하는 것은 아닙니다.
다만 이후 Electron의 자동 업데이트 기능을 구현할 때 GitHub Release를 새로운 버전의 배포 파일을 제공하는 장소로 활용할 수 있습니다.

이번 글에서는 Release를 이용한 기본적인 배포까지만 진행하고, 업데이트 기능은 다음 글에서 알아보겠습니다.

 

---

✔️ 4. Electron 앱 배포 파일 만들기

이제 실제로 GitHub Release에 등록할 배포 파일을 만들어보겠습니다.

현재 Electron 프로젝트에서 다음 명령어를 실행합니다.

npm run make

실행이 완료되면 out 폴더가 생성되고, 그 안에 Windows용 배포 파일이 만들어집니다.

저의 경우 다음과 같은 파일들이 생성되었습니다.

out
└─ make
   └─ squirrel.windows
      ├─ Huni Roulette-1.0.0 Setup.exe
      ├─ Huni Roulette-1.0.0-full.nupkg
      └─ RELEASES

이번에는 실제 사용자가 실행해서 설치할 수 있는 `Setup.exe` 파일을 이용해 배포해보겠습니다.

Huni Roulette-1.0.0 Setup.exe

---

✔️ 5. GitHub에서 Release 만들기

이제 GitHub에서 Release를 만들어보겠습니다.

먼저 Electron 프로젝트의 GitHub Repository로 이동합니다.

Repository 화면 오른쪽의 Releases 영역에서 Create a new release를 클릭합니다.

Release를 만들 수 있는 화면이 나타나면 먼저 배포할 버전을 지정합니다.

🔹 Tag

Release에는 배포할 버전을 지정할 수 있습니다.

이번에는 첫 번째 배포 버전이므로 다음과 같이 설정해보겠습니다.

v1.0.0

Tag는 GitHub에서 특정 시점의 소스코드를 버전으로 구분하기 위해 사용하는 이름입니다.

앞으로 새로운 버전을 배포한다면 다음과 같이 버전을 올려가면서 관리할 수 있습니다.

v1.0.0
v1.0.1
v1.0.2

🔹 Release title

Release 제목은 다음과 같이 작성하겠습니다.

Huni Roulette v1.0.0

🔹 Release 설명

Release에는 해당 버전에 대한 간단한 설명도 작성할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

Huni Roulette 첫 번째 배포 버전입니다.

- 랜덤 룰렛 기능
- 참가자 추가 및 삭제
- Windows 설치 지원
- 앱 이름 및 아이콘 적용

설명은 꼭 길게 작성할 필요는 없습니다.

나중에 새로운 버전을 배포할 때 어떤 변경사항이 있었는지 확인할 수 있도록 간단하게 작성해주면 됩니다.

---

✔️ 6. Setup.exe 업로드하기

이제 앞에서 `npm run make` 를 실행해서 생성했던 `Setup.exe` 파일을 Release에 추가합니다.

Huni Roulette-1.0.0 Setup.exe

파일을 Release 화면에 드래그하거나 파일 선택을 통해 업로드할 수 있습니다.

파일 업로드가 진행되면 다음과 같이 표시됩니다.

업로드가 완료되면 파일이 Release에 표시됩니다.

모든 내용을 확인한 후 Publish release를 클릭합니다.

그러면 GitHub에 v1.0.0 Release가 생성됩니다.

---

✔️ 7. GitHub Release에서 파일 다운로드하기

Release가 만들어지면 GitHub Repository의 Releases 메뉴에서 방금 만든 버전을 확인할 수 있습니다.

여기에서 `Setup.exe` 파일을 다운로드할 수 있습니다.

다운로드한 파일을 실행하면 기존에 만들었던 것처럼 Windows에 Huni Roulette을 설치할 수 있습니다.

 

즉, 이제 프로그램을 전달할 때 설치 파일 자체를 직접 보내는 대신

GitHub Release에 등록된 배포 파일을 이용할 수 있게 되었습니다.

 

🔹 다운로드 시 보안 경고가 나타나는 경우

현재 Huni Roulette는 아직 코드 서명을 적용하지 않은 상태입니다.

 

따라서 Windows에서 프로그램을 다운로드할 때,

브라우저나 Windows의 보안 기능에 의해 경고가 표시될 수 있습니다.

 

제가 테스트했을 때 Microsoft Edge에서는 다음과 같은 경고가 표시되었습니다.

Huni Roulette-1.0.0.Setup.exe은(는) 일반적으로 다운로드되지 않습니다. 열기 전에 Huni.Roulette-1.0.0.Setup.exe을(를) 신뢰하는지 확인합니다.

이러한 경고는 다운로드한 파일의 평판이나 코드 서명 여부 등에 따라 표시될 수 있습니다.

 

이 메시지가 표시되더라도 프로그램을 설치할 수 없는 것은 아닙니다.

 

브라우저에 따라 경고 표시 방식이 다를 수 있으므로
다른 브라우저에서 다운로드해 테스트해볼 수도 있습니다.

 

또한 Windows의 보안 경고 내용을 확인한 후

파일을 신뢰할 수 있다면 실행하여 설치할 수 있습니다.

 

저는 Chrome에서 보안 경고 내용을 확인한 후 정상적으로 실행되는 것을 확인했습니다.

 

현재는 개인적으로 만든 프로그램을 테스트하고 배포하는 단계이므로
이 글에서는 코드 서명 없이 진행하겠습니다.

💡 참고
실제로 사용자에게 프로그램을 배포할 때는 코드 서명을 적용하는 것이 좋습니다.

코드 서명을 적용하면 프로그램의 게시자 정보를 확인할 수 있으며,
Windows에서 발생하는 일부 보안 경고를 줄이는 데 도움이 될 수 있습니다.

코드 서명은 이후 배포 과정을 다루면서 별도로 알아보겠습니다.

---

✔️ 8. 실제 배포 과정 확인하기

지금까지 진행한 과정을 정리하면 다음과 같습니다.

Electron 앱 개발
      ↓
npm run make
      ↓
Windows 배포 파일 생성
      ↓
GitHub Release 생성
      ↓
v1.0.0 Tag 지정
      ↓
Setup.exe 업로드
      ↓
Release 발행 
      ↓ 
사용자 다운로드
      ↓
프로그램 설치

기존에 사용하던 Repository와 Release를 함께 보면 다음과 같은 구조가 됩니다.

GitHub Repository
│
├─ 소스코드
│   ├─ main.js
│   ├─ package.json
│   └─ forge.config.js
│
└─ GitHub Releases
    └─ v1.0.0
        └─ Huni Roulette-1.0.0 Setup.exe

앞으로 새로운 버전을 만들게 되면,

Releases
├─ v1.0.0
│   └─ Setup.exe
│
├─ v1.0.1
│   └─ Setup.exe
│
└─ v1.0.2
    └─ Setup.exe

처럼 버전별로 배포 파일을 관리할 수 있습니다.

---

✔️ 9. 마무리

이번 글에서는 GitHub Release를 이용해 Electron 앱을 배포하는 방법을 알아봤습니다.

기존처럼 `Setup.exe` 파일을 USB나 메일 등을 이용해 직접 전달하는 것도 가능하지만, GitHub Release를 이용하면 배포 파일을 한 곳에서 관리하고 버전별로 구분해서 배포할 수 있다는 장점이 있습니다.

현재는 새로운 버전이 만들어지면 사용자가 새로운 `Setup.exe` 를 직접 다운로드해서 설치해야 합니다.

다음 글에서는 여기서 한 단계 더 나아가 새로운 버전이 출시되었을 때 기존 사용자가 직접 설치 파일을 다시 다운로드하지 않아도 업데이트할 수 있는 방법을 알아보겠습니다.