ahnbk.com

모든 개발이 완료되고, 배포를 해야 하는 경우에 윈도우의 경우 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 파일을 실행한다.

끝!