Development Etc. - .jar 파일을 이용한 Electron Build

 

[Java Etc.] .jar 파일을 이용한 Electron Build

 

 

Electron을 사용하면서 Server와 Client를 함께 사용할 수 있는 방법이 없을지 고민을 많이 했다.

 

Cloud Server를 사용하면 가장 쉽지만 그러한 환경이 되지 않는다면 로컬에서 사용할 서버를 생각해야 했다.

 

서버를 따로 띄우고 클라이언트 환경만 Electron 빌드를 하여 사용할 수 있어도 그 마저 불편함을 느껴 Server + Client를 묶은 jar나 war 파일 하나로 Electron 빌드를 하여 실행파일을 실행해서 바로 Server가 실행되고 그 후 Client 화면이 나오도록 구현하였다.

 

Electron의 가장 큰 장점인 Backend를 Node.js 기반이라는 점에서 운영체제와의 상호간의 소통이 자유롭다는 점을 최대한 활용하는 것이 좋았다.

 

(main.js)

// 기본적인 사이클 : .jar/.war 파일을 Node.js로 실행 -> 서버 Start(로딩 이미지 출력) -> 화면 출력 // 1. Server Start const jarPath = app.getAppPath() + '.jar/.war 파일이 있는 경로'; const process = require('child_process').spawn( 'java', ['-jar', jarPath, ''] ); // 서버 실행 로그 process.stdout.on('data', function(data) { console.log('stdout: ' + data); }); // 실제 화면을 만들어 주는 부분 app.on('ready', function(){   // Loading Start const splash = new BrowserWindow({ width: 800, height: 600, transparent: true, frame: false, alwaysOnTop: true, icon: path.join(__dirname, '로딩 나올때 작업표시줄에 나오는 로고') }) splash.loadURL(`로딩 이미지가 있는 주소`); // Create the browser window. function createWindow () { const mainWindow = new BrowserWindow({ width: 1280, height: 900, webPreferences: { preload: path.join(__dirname, 'preload.js'), defaultEncoding: 'UTF-8' }, }) // 실행된 서버의 URL을 입력하여 GUI 환경으로 보여줌 mainWindow.loadURL(`Server에 설정된 주소(예: http://localhost:3000)`) // Loading이 끝난 뒤 처리 mainWindow.once('ready-to-show', () => { splash.destroy(); mainWindow.show(); }); }   // Server의 URL을 setTimeout을 이용해 접속을 계속 확인하고 접속이 완료되면 // createWindow()를 실행시켜 화면을 만듬. function startUp () { const apiURL = `Server의 URL`; requestPromise.get(apiURL).then(function (response) { createWindow(); }, function (response) { setTimeout(()=>startUp(),200); }); }; // 서버 실행 startUp(); })

 

Git Repository : https://github.com/soft91/Electron-Study.git / spring_electron