지난 시간까지 만든 프로그램을 매번 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폴더가 생성 되었을 것이다.
일렉트론 빌드
여기까지 되었다면 이제 마지막 빌드 커맨드만 남았다.
npm run dist
이렇게 여기까지 하였다면 빌드 실행한 OS에 따라서
dmg파일이나 윈도우 인스톨파일이 생성 된 것을 볼 수 있다.
추가로 assetsPublicPath를 바꾼것은 아래와 같다.
루트 폴더의 기준에서 현재폴더의 기준으로 변경 된 것인데... 빌드후에 루트폴더에서는 해당 파일을 찾을 수 없다. 빌드가 되었기 때문에 빌드파일에서 찾아야 한다.
댓글
댓글 쓰기