Electron with vue! (빌드하기!)

지난 시간까지 만든 프로그램을 매번 node를 통하여 실행하게 만들 수는 없다.

다른 유저들에게 배포용도라면 더욱더! 그래서 이번 시간에는 electron-builder를 사용하여 설치를 할 수 있는 파일을 만들 수 있게 할 것이다.

기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다.

빌드를 위한 일렉트론 설정!


npm i electron-builder --save-dev
npm i cross-env --save-dev

일단 위의 명령어를 사용하여 필요한 노드 패키지들을 설치하자! 위의 패키지들을 간단하게 설명하면

electron-builder는 말그대로 electron 프레임워크로 만들어진 프로그램을 빌드해주는 역할을 해주는 패키지이다.

cross-env는 환경 변수를 수정해주는 역할을 해준다. 이게 왜 필요한 이유는 아래에 코드를 보면서 설명 하겠다.

package.json을 아래와 같이 빨간색으로 표현 된 부분을 추가해주자.


{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=dev electron .",
    "dist": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^18.0.1",
    "electron-builder": "^23.0.3"
  }
}

scripts에 보면 cross-env를 통하여 NODE_ENV환경 변수를 dev로 설정해주는 부분이 있다. 이 부분은 아래의 index.js를 보면 알 수 있다.

index.js를 아래의 빨간줄 부분을 수정하자.


const {app, BrowserWindow} = require('electron')
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  if(process.env.NODE_ENV === 'dev') {
    win.loadURL('http://localhost:8080')
    win.webContents.openDevTools()
  } else {
    win.loadFile('dist_web/index.html')
  }
}

app.whenReady().then(() => {
  createWindow()
})

저 빨간줄에 대한 의미를 설명을 하자면, 환경변수에 NODE_ENV의 값이 dev일때는 'http://localhost:8080' 즉 vue를 개발할 때 사용 되는 서버를 통하여 BrwoserWindow를 로드를 하여, vue의 코드 변경에 따라서 매번 electron을 다시 빌드해야하는 불편함을 제거 할 수 있다.

그와 NODE_ENV의 값이 dev가 아닐때에는 dist_web/index.html 파일을 로드하여 사용 하겠다는 뜻이다. 우리가 작성한 vue 코드를 빌드하여 서버에 배포할 예정이라면 당연하게도 loadURL을 이용 하여 로드해도 되겠지만, 단독으로 사용 할 것이기에 electron 빌드시에 같이 포함시켜서 배포할 것이다.

빌드를 위한 vue 설정!

vue쪽은 그렇게 많은 변경은 없다.

config/index.js 파일에 아래의 부분만 수정하자.

dev 속성이 아니라 build속성이니 이점 주의하자.

...생략...
build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist_web/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist_web'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
...생략...

index, assetRoot속성에서는 dist => dist_web 빌드후 배포 되는 위치만 바꿔주었다.

assetsPublicPath는 최종 빌드 후에 확인 해보록 하자.


npm run build

위의 커맨드를 사용 하여 vue코드들을 빌드해주자.

위의 이미지 처럼 dist_web폴더가 생성 되었을 것이다.

일렉트론 빌드

이제 일렉트론 폴더에 vue의 build결과인 dist_web을 복사 붙여넣기 하자.

여기까지 되었다면 이제 마지막 빌드 커맨드만 남았다.


npm run dist

이렇게 여기까지 하였다면 빌드 실행한 OS에 따라서

dmg파일이나 윈도우 인스톨파일이 생성 된 것을 볼 수 있다.

추가로 assetsPublicPath를 바꾼것은 아래와 같다.

루트 폴더의 기준에서 현재폴더의 기준으로 변경 된 것인데... 빌드후에 루트폴더에서는 해당 파일을 찾을 수 없다. 빌드가 되었기 때문에 빌드파일에서 찾아야 한다.

file:///Applications/my-electron-app.app/Contents/Resources/app.asar/dist_web/static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css

위처럼 말이다. assetsPublicPath를 바꾸지 않은 상태의 경로는 아래와 같다.

file:///static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css

당연하게도 위의 위치에 해당 파일이 없기 때문에 파일이 로드 되지 않는다. 따라서 위처러 리소스들을 다운로드 받지 못할것이다.

코드 땜장이

이 블로그 검색