[일렉트론/electron] 일렉트론으로 크로스플랫폼 실행파일 만들기

일렉트론(Electron)

요즘 회사일 때문에 프론트엔드 개발을 위한 공부들을 시작했다.

자바스크립트, 리액트, HTML 등등. 그러던 중에 일렉트론(Electron)이라는 자바스크립트용 패키지 메이커를 노마드코더 유튜브에서 봤고, 한 번 실제로 패키지를 만들어서 실행시켜봤다. 

영상 링크(https://www.youtube.com/watch?v=6Ep8ot0ABH0)

 

작업 환경

먼저, 내가 패키지로 만들어보려고 사용한 레포는 노마드 코더에서 무료 강의로 열려있는 자바스크립트로 투두 리스트 만들기를 따라한 레포이다. 지금은 일렉트론을 이용한 세팅까지 레포에 들어가있어서, 레포 클론해서 패키지 인스톨하고 실행하면 웹이 아닌 별도의 GUI창을 띄워서 사용할 수 있다.

 

내가 일렉트론을 설치한 환경은 우분투 20.04 이다. 지금 사용하고있는 MSI노트북에 깔려있는 운영체제는 우분투 20.04와 윈도우10이 있는데, 회사에서도 우분투를 쓰기도하고, 뭐든 개발할 때에는 확실히 윈도우보단 우분투가 편하기 때문에 우분투에서 작업을 진행했다.

 

프로젝트 실행

영상을 따라서 해보면 GUI로 창을 띄우는 부분까지는 무리없이 진행된다.

이게 내가 만든 투두리스트를 일렉트론을 이용하여 GUI로 만들었을 때의 모습이다. 사진도 내꺼고 각 기능들도 같이 개발했던 것 대로 잘 돌아간다

 

패키지 만들기

리눅스

GUI로 실행되는 것은 확인했으니, 이제 패키지로 만드는건 어떻게 했는지 정리해본다.

package.json 에서 볼 수 있는 것처럼, 패키지로 만들려면 npm run make (혹은 yarn make) 명령어를 커맨드에 실행시키면 가능하다.

별도의 argument를 입력하지 않으면 기본적으로 현재 플랫폼에 해당하는 패키지를 만드는 것 같았다.

 

그런데 우분투에서 진행하니 리눅스에 해당해서 deb패키지 뿐 아니라 rpm패키지도 만들려고 에러를 뿜어서 rpm도 설치해줬다.

sudo apt install rpm

아마 그냥 deb만 뽑을 수 도 있지만 어차피 여기저기 쓸 수 있는 파일 만든다는 취지라면 다른 패키지들은 뭐가 필요한지 알아보는 것도 중요하니까 일단 설치해봤다.

그리고 나서 이름이 달라서 make를 할 수 없다는 에러가 나와서 package.json파일에 있는 "name" 과 "productName" 항목을 동일한 값으로 변경해줬더니 에러가 해결됐다.

{
  "name": "momentum", <-- 이거랑
  "version": "1.0.0",
  "description": "Made chrome app by javascript",
  "main": "main.js",
  "productName": "momentum", <-- 이거를 같게!
   ...
  }

이렇게 설정하고 npm run make (yarn make)를 실행시키니까 작업 폴더에 out이라는 폴더가 생기고, 그 아래에 make폴더 아래에 deb 와 rpm 폴더가 생긴 것을 볼 수 있었다.

뽑힌 파일 중 deb파일을 설치해서 실행시켜봤는데 잘 동작했다! 이렇게 되는거 보고 좀 신기해했다.

그리고 나서 다른 플랫폼의 파일을 뽑아내려고 시도해봤다.

윈도우

그리고나서 윈도우를 위한 실행파일을 만들어보려고 시도했다. 커맨드는 아래와 같다.

npm run make -- --platform win32

엄청난 에러들을 뿜어냈고 그 에러들은 윈도우 환경을 에뮬레이팅할 wine 패키지를 설치해서 해결할 수 있었다.

sudo dpkg --add-architecture i386
sudo apt update
sudo apt install wine64 wine32

그랬는데도 아래와 같은 에러가 발생했다.

An unhandled error has occurred inside Forge:
An error occured while making for target: squirrel
spawn mono ENOENT
Error: spawn mono ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! momentum@1.0.0 make: `electron-forge make "--platform" "win32"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the momentum@1.0.0 make script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sunandbean/.npm/_logs/2022-04-10T06_58_31_162Z-debug.log

mono라는 패키지가 없어서 그런거라 mono도 다운로드 받았다

sudo apt update
sudo apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF

sudo apt-add-repository 'deb https://download.mono-project.com/repo/ubuntu stable-focal main'

sudo apt install mono-complete

그랬는데도 에러가 나왔다.

An unhandled error has occurred inside Forge:
An error occured while making for target: squirrel
Failed with exit code: 1
Output:
Attempting to build package from 'momentum.nuspec'.
Authors is required.

Error: Failed with exit code: 1
Output:
Attempting to build package from 'momentum.nuspec'.
Authors is required.

    at ChildProcess.<anonymous> (/home/sunandbean/Documents/momentum/node_modules/electron-winstaller/src/spawn-promise.ts:52:16)
    at ChildProcess.emit (events.js:400:28)
    at ChildProcess.emit (domain.js:475:12)
    at maybeClose (internal/child_process.js:1058:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)

무슨 에러인가 했는데, package.json의 author가 비어있어서 생긴 문제였다.

package.json에 author를 넣어주니 에러가 해결됐다.

{
  ...
  "keywords": [],
  "author": "Sunbin",
  "license": "ISC",
  ...
}

패키지 메이킹이 끝났고, 아래 사진처럼 exe파일을 얻을 수 있었다.

해당 파일을 윈도우로 가져가서 확인해봤는데, 아주 잘 동작했다!

크로스 플랫폼 컴파일링이 이렇게 간단하게 되는게 너무 신기했다.

맥 OS

마지막으로 맥 OS를 위한 패키지도 만들어봤다. 

맥 용은 아래 커맨드를 입력해서 만들었다.

npm run make — —arch arm64 —platform darwin

m1을 타겟으로 하려고 arm64랑 플랫폼은 darwin으로 설정해서 패키지 추출을 진행했는데 별 이상 없이 잘 뽑혔다.

이런식으로 .app파일이 들어있는 압축파일을 결과물로 받아볼 수 있었다.

아쉽게도 내가 m1맥도 없고 인텔맥도 없어서 이걸 테스트해보진 않았지만, 유튜브 영상은 m1환경으로 진행된거니까 분명히 잘 실행이 될 것 같다.

 

마치며

만들어둔 작은 웹 프로젝트 파일을 다양한 플랫폼에서 이용할 수 있는 실행파일로 바꿔서 배포할 수 있다는게 정말 엄청난 일이었다.

자바스크립트가 얼마나 다양한 용도로 쓰일 수 있는지 이 작업을 해보면서 알 수 있었다.

에러 하나하나 해결해서 윈도우에서 실행이 딱 됐을 때의 쾌감은 아직도 잊을 수가 없다!

나중에 무언가를 배포해야하는 상황이 생기면 이 방법을 이용해서 배포하는 것도 잘 고려해봐야겠다!