Electron과 React를 같이 사용해 보자 - 배포하기

 

2024.06.26 - [ELECTRON] - Electron과 React를 같이 사용해 보자. (Electron + React 연동)

 

 

지난 글에 이어서 electron과 react가 연동된 프로젝트를 배포해 보자.

 

당연하지만 react를 먼저 빌드하고 electron을 나중에 해야 한다.

 

 

 

React 

 

react관련 설정은 이미 package.json에 다 되어 있다.

 

"scripts": {
    ......
    "build": "react-scripts build",
    ......
  },

 

npm run build를 해주면 public폴더 내용을 build로 옮겨준다.

 

 

Electron

 

electron을 위해서는 설정할 게 몇 가지 있다.

 

우선 윈도용 빌드 스크립트를 추가한다.

 

"scripts": {
    ......
    "build:win": "electron-builder --win --x64"
  },

 

 

그리고 electron-builder용 설정을 package.json에 추가한다.

 

이때, 기본적으로 build에 들어가는 설정에 "files"와 "extraMetadata"를 추가한다.

 

"build": {
  ......
  "files": [
    "public_electron/**/*"
  ],
  "extraMetadata": {
     "main": "public_electron/main.js"
  },
  ......
}

 

 

이전 글에서 electron용 ts파일 컴파일 결과물을

public_electron에 저장하도록 설정했다.

 

그래서 files에 이 폴더를 electron-builder의 결과물에 추가해야 한다.

 

예전에는 electron-builder로 build 하면

프로젝트 폴더에 있는 모든 폴더가 다 추가됐던 것 같은데

버전이 바뀌면서 동작이 변한 것 같다. 

 

꼭 필요한 것만 복사를 하는 것 같은데

내가 만든 public_electron은 안 되더라...

 

그래서 강제로 추가해 줬다.

 

 

그리고 package.json에 "main"이 명시되어 있음에도

프로그램 시작 점으로 electron.js를 찾는 오류가 발생했다.

 

⨯ Application entry file "D:\DEV\electron-react\dist-win\win-unpacked\resources\app\build\electron.js" does not exist. Seems like a wrong configuration.  failedTask=build stackTrace=Error: Application entry file "D:\DEV\electron-react\dist-win\win-unpacked\resources\app\build\electron.js" does not exist. 

 

구글링으로 extraMetadata에 main 시작점을 추가하면 된다는 것을 찾았다.

그래서 해당 부분도 추가해 줬다.

 

 

이렇게 하면 무사히 프로젝트를 배포할 수 있다.