Electron & React & Redux & TypeScript 앱 제작 워크샵 9일째(최종회)

첫날

둘째 날

3일째

4일째

5일째

6일째

7일째

8일째

9 일째 (이 기사)

개요

마지막까지 앱 작성이 완료되었습니다.

이번에는 제품으로 패키징 (Windows에서는 .exe, macOS에서는 .dmg 및 .pkg 파일을 작성) 및 설치 프로그램을 작성합니다.

아이콘 준비

아이콘을 설정하지 않아도 패키징은 할 수 있습니다만, 제품으로서 앱 작성하려면 반드시 필요한 작업이겠지요.

Windows용으로는 .ico 파일, macOS용으로는 .icns 파일이 필요합니다.

각각 기본 이미지 유형은 크기에 맞게 여러 종류를 만들어야 합니다.

이미지 파일의 변환에 대해서는 아래를 참조하십시오.

아이콘 파일(*.ico) 만들기 - Qiita

ICON CONVERTER: Convert PNG to ICO and ICNS online - iConvert Icons

이번에는 작성한 파일을 프로젝트 폴더에 'icon' 폴더를 만들어 둡니다.

electron-builder 도입

패키지하는 툴로서 electron-packager 도 있습니다만, electron-builder 을 이용하면, 패키지와 인스톨러의 작성까지 할 수 있으므로 편하다고 생각합니다.

> npm install --save-dev electron-builder

main.js 수정

main.js 에서는 index.html 을 읽습니다만, 이것은 하는 패스가 되도록(듯이) 아래와 같이 수정합니다.

(원인은 모르겠지만 내 환경에서는 이렇게해야했습니다)

function createWindow() {
    // ブラウザウィンドウの作成
    win = new BrowserWindow({
        width: 800,
        height: 600
    })
    // index.html をロードする
    // --> 変更
    const path = require('path');
    win.loadFile(path.join(__dirname, './index.html'));
    //win.loadFile('index.html')
    // <-- 変更
    // 起動オプションに、 "--debug"があれば開発者ツールを起動する
    if (process.argv.find((arg) => arg === '--debug')) {
        win.webContents.openDevTools()
    }
    // ブラウザウィンドウを閉じたときのイベントハンドラ
    win.on('closed', () => {
        // 閉じたウィンドウオブジェクトにはアクセスできない
        win = null
    })
}

패키지 정의 만들기

package.json 내에 electron-builder의 설정을 기술합니다.

{
・・・
  "scripts": {
    "build": "webpack",
    "start": "electron ./ --debug",
    "package:mac": "webpack && electron-builder --mac --x64",
    "package:windows": "webpack && electron-builder --win --x64",
    "package:linux": "webpack && electron-builder --linux --x64"
  },
・・・
  "build": {
    "productName": "TODO",
    "appId": "todo.exsample.com",
    "directories": {
      "output": "./product"
    },
    "files": [
      "./dist/**/*.js",
      "./index.html",
      "./main.js",
      "./icon/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./icon/todo.icns",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "icon": "./icon/todo.ico",
      "target": "msi"
    }
  }
}

각 프로퍼티의 상세나 여기에 쓰여지지 않은 프로퍼티에 대해서는 공식 페이지 를 참조해 주세요.

directories/output에서 패키지 및 설치 프로그램의 출력 대상을 지정합니다.

files는 앱이 작동하는 데 필요한 파일을 지정합니다. "*/"라는 쓰는 방법은 폴더의 깊이에 관계없이 모든 파일을 의미합니다.

mac, win에서 각각의 패키지를 설정하고 있습니다.

script에서 작성을 위한 명령을 정의하고 있습니다.

만들려고

windows의 경우, 다음을 실행하면 product 폴더에 설치 프로그램을 사용할 수 있어야 합니다.

> npm run package:windows

인스톨러로, 레지스트리의 처리나 파일의 카피 등, 다양한 처리를 실시하고 싶은 경우는, 이노 설정 등으로 작성하는 것이 좋다.

electron-builder 로 작성된 win-unpacked 폴더내의 파일 세트로서 인스톨러에 포함하는 것이 좋을 것입니다. 시작하는 exe 또한 여기에 있습니다.

요약

Electron 앱 개발에 대해서는 일단 끝납니다.

React나 Redux의 이야기가 많아 Electron에 대한 이야기가 적었을까 생각합니다.

가능하면 메인 프로세스, 렌더 프로세스, 그 사이의 프로세스간 통신이라고도 쓰고 싶었습니다만, 이것은 다른 기회로 하고 싶을까 생각합니다.