[라즈베리파이 크로스컴파일] 6. electron-builder를 통한 윈도우 -> 라즈베리파이 크로스컴파일 하기

굉장히 중요한 부분이고 많은 분들이 어려움을 많이 겪었을 것이라 생각한다.

왜냐면 많은 한, 영문의 문서들이 컴팩트한 정보를 담고 있지도 않고

생각보다 복잡하게 설명하고 있다고 생각했다.

 

그래서 나는 최대한 컴팩트하고 빠르게 크로스 컴파일을 진행해보겠다.

우선 앞에서 사용하던 serialport exam을 이용해서

해당 내용들을 조금 수정하고 install이 필요한 것은 인스톨해 주겠다.

ps. electron-forge는 크로스 컴파일에 관해 정보가 없어서 electron-builder로 진행한다.

---

package.json의 devDependencies 부분에 electron-builder를 추가시키기 위해 아래 코드를 터미널에서 실행해준다.

npm install --save-dev electron-builder

터미널에서 npm 명령어를 실행했을때 cmake처럼 building을 해 줄 스크립트다.

라즈베리만을 타겟팅한 스크립트이므로 진짜 컴팩트하게 적었다.

//package.json
//은 복붙 후 다 지워야한다.
{
  "name": "JM_DNC",
  "version": "1.0.1",
  "description": "JM_DNC_v1.1",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build:linux64": "electron-builder --linux --x64"
  },
  "repository": {},
  "keywords": [],
  "author": {"name" : "CJM", "email": "이메일도 대충 적자"},
  "homepage": "http로 시작하는 깃헙주소를 대충 적자 그렇지 않으면 오류가 생긴다.",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^16.0.5",
    "electron-builder": "^22.14.5"
  },
  "dependencies": {
    "serialport": "^10.0.0"
  },
  "build": {
    "productName": "JM_DNC",
    "appId": "kr.co.JM_DNC.www 빼먹지 말자",
    "asar": true,
    "linux": {
      "target": [
        "deb",
        "rpm",
        "zip",
        "tar.gz"
      ]
    }
  }
}

이제 라즈베리에서 실행을 위해 preload.js, renderer.js를 지우고 index.html을 지워준 다음

약간만 바꿔서 build를 해보겠다.

npm run build:linux64

npm start와 비슷하게 script안의 명령이 실행된다고 보면 된다.

이메일과 homepage, appId까지 잘 적었다면 오류가 생기지 않는다.

 

우선 윈도우 환경에서 다시 npm start를 통해 잘 실행된 모습을 확인해 보겠다.

라즈베리에서도 이렇게 나오면 성공!

해당 폴더의 dist폴더로 가면

이런 식으로 여러 가지가 있다.

어차피 압축을 풀어도 asar파일이 들어 있으니

linux-unpacked로 가서 asar파일을 라즈베리파이로 복사시켜준다.

참고로 필자는 FileZilla를 통해 간단하게 복붙 시켜줬다.

VNC를 통해 잘 들어왔는지 확인해 보겠다.

Downloads폴더에 잘 들어왔다. 저 옆의 폴더는 미리 연습해 본 것.

asar파일을 압축 해제하기 위해서는 npm에서 인스톨이 필요하다.

npm install -g asar
npx asar extract app.asar JM_DNC_v1.1

이렇게 실행한다면 해당 폴더가 생성된다!

 

하지만 바로 npm start 하면 실행되지 않는다.

package.json에서 script부분이 빠져있고,

dependencies 부분의 재설치가 필요하기 때문이다.

npm install --save-dev electron
npm install

터미널에서 해당 명령어를 통해 package.json을 수정해주자

sudo nano package.json

바로 이런 식으로 script 부분을 넣어주면 npm start를 했을 때 윈도우에서 처럼 실행된다.

이제 npm start를 해준다면????

휴 정상적이게 잘 됐다.

터미널을 사용하면서 가장 큰 오류의 원인은 타이핑이다.

뭔가 잘 안되거나 했을 때는 타이핑을 잘 살펴보자....

---

다음 편부터는 중요한 기능을 넣을 때마다

계속해서 크로스 컴파일을 하면서 중간중간 체크를 해줄 것이다.