모든 개발이 완료되고, 배포를 해야 하는 경우에 윈도우의 경우 exe 파일, macOS의 경우 .app으로 패키징하여야 한다. 물론 소스 파일을 배포하고 사용자가 지난번 포스팅(https://ahnbk.com/?p=366, https://ahnbk.com/?p=383)과 같이 개발환경을 갖추어서 실행할 수 있지만 매우 복잡하고, 릴리즈 모드가 아닌 관계로 살짝 느린 면이있다.
Scratch 3.0은 React.js를 사용하여 개발되었다. 즉 이를 실행하기 위해선 웹브라우저가 필요하다. 개발 시에는 webpack-dev-server를 이용하였다. 이를 대체할 것이 필요한데, 이때 필요한 것이 Electron(https://electronjs.org)이다.
Electron은 NodeJS, Chromium을 이용하여 JavaScript, HTML, CSS를 이용하여 동일한 소스로 Windows, macOS, Linux 등에서 실행 가능한 Desktop 앱을 개발할 수 있는 플랫폼이다.
Electron은 npm을 이용하여 쉽게 설치할 수 있다.
$ npm install -g electron다음으로 지금까지 개발한 Scratch 3.0을 릴리즈 형태로 빌드한다. Scratch-gui 디렉토리로 이동하여 다음과 같이 입력한다.
$ cd scratch-gui
$ npm run-script build이제 빌드가 완료되면, build 디렉토리에 release 모드로 빌드된 파일들이 생성되어 있음을 볼 수 있다.
이제 편의상 scratch-app 디렉토리를 하나 생성하고 위 build 디렉토리를 복사한다. 다음으로 election 앱을 만들기 위해 다음과 같이 입력한다.
$ cd scratch-app
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (scratch-app)
version: (1.0.0)
description: Scratch 3.0 for OROCA Edubot
entry point: (index.js) main.js
test command:
git repository:
keywords: scratch, oroca, edubot, block-coding
author: Byeong-Kyu Ahn
license: (ISC) BSD-2-Clause
About to write to /Users/byeongkyu/Developer/scratch/scratch-app/package.json:
{
"name": "scratch-app",
"version": "1.0.0",
"description": "Scratch 3.0 for OROCA Edubot",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"scratch",
"oroca",
"edubot",
"block-coding"
],
"author": "Byeong-Kyu Ahn",
"license": "BSD-2-Clause"
}
Is this OK? (yes) 위와 같이 사용자의 환경에 맞추어 입력하게 되면, package.json 파일이 생성되어 있음을 볼수 있다. package.json 파일을 에디터를 이용해 다음과 같이 수정한다.
{
"name": "scratch-app",
"version": "1.0.0",
"description": "Scratch 3.0 for OROCA Edubot",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"scratch",
"oroca",
"edubot",
"block-coding"
],
"author": "Byeong-Kyu Ahn",
"license": "BSD-2-Clause"
}이제 main.js 파일을 생성하고 다음과 같이 입력한다.
const { app, BrowserWindow } = require('electron')
var path = require('path')
let win
function createWindow () {
win = new BrowserWindow({
frame: true,
width: 1200,
height: 800,
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
})
win.loadFile('./build/index.html')
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})다음과 같이 입력하여 실행해 본다.
$ npm start정상적으로 되었다면, 앱이 실행 됨을 볼 수 있다.
이제 이렇게 생성된 electron 앱을 패키징하는 과정만 남아 있다. 먼저 앱의 아이콘을 생성한다. 기본값은 Electron의 기본 아이콘이다. 이미지 편집기 등을 이용하여 1024×1024 크기의 png 파일을 생성한다.
윈도우 앱의 경우 ico 파일을 사용하고, macOS의 경우 icn 파일을 사용한다. https://icoconvert.com, https://iconverticons.com/online 등의 웹페이지에서 변환이 가능하다. 생성된 파일을 scratch-app 디렉토리에 복사한다.
다음으로 electron-packager를 설치한다. npm을 이용하여 쉽게 설치할 수 있다.
$ npm install -g electron-packager다음으로 패키징에 필요한 electron을 설치한다.
$ cd scratch-app
$ npm install --save-dev electron마지막으로 macOS용 앱을 패키지할 경우 다음과 같이 입력한다.
$ electron-packager . --overwrite --platform=darwin --arch=x64 --icon=./assets/icons/edubot_icon.icns --prune=true --out=release-builds다음과 같은 메시지가 나오면 성공
Packaging app for platform darwin x64 using electron v4.0.8
Wrote new app to release-builds/scratch-app-darwin-x64이제 위에서 알려준 디렉토리로 이동해 보면 .app 파일이 생성되어 있음을 볼 수 있다. macOS의 경우 /Application으로 복사하여 사용하면 된다.
윈도우용 앱을 패키징 할 때, macOS에서 진행하는 경우 wine 툴이 필요하다. homebrew를 이용하여 쉽게 설치가 가능하다.
$ brew install wine설치가 완료되면, 다음과 같이 입력하여 윈도우용 앱을 패키징한다.
$ electron-packager . scratch-edubot-app --overwrite --platform=win32 --arch=x64 --icon=assets/icons/edubot_icon.ico --prune=true --out=release-builds --version-string.CompanyName="OROCA" --version-string.FileDescription="OROCA Edubot" --version-string.ProductName="Scratch Edubot"다음과 같은 메시지가 나오고 해당 디렉토리로 이동하면 exe 파일이 생성됨을 볼 수 있다.
Packaging app for platform win32 x64 using electron v4.0.8
Wrote new app to release-builds/scratch-edubot-app-win32-x64
위 디렉토리를 압축하여 윈도우 환경에서 exe 파일을 실행한다.
끝!
