Electron Builder

Electron

Electron BuilderはElectronで作ったアプリを.exeや.dmgにして配布するツール

Install

npm install --save-dev electron-builder

package.json

{
  "name": "video-analyzer",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.yourname.videoanalyzer",
    "productName": "Video Analyzer",
    "directories": {
      "output": "dist"
    },
    "files": [
      "dist/**/*",
      "main.js",  <-- ※1
      "preload.js",
      "package.json"
    ],
    "win": {
      "target": "nsis",   <-- 512x512pxのPNG画像をつくりICNSファイルにコンバートすること
      "icon": "icon.ico"  <-- ICOファイルを作らければデフォルトのElectronマークがロゴとなる
    },
    "mac": {
      "target": "dmg",   <-- 作成したICO,ICNSファイルはプロジェクトフォルダ直下（ルート直下）に配置する
      "icon": "icon.icns"  
    },
  },
  "scripts": {
    "build": "vite build && electron-builder"
  }
}

※1 … これがないと「⨯ Application entry file “main.js” in the “C:\Windows\System32\electronpj\dist\win-unpacked\resources\app.asar” is corrupted: Error: “main.js” was not found in this archive」つまり、エントリーファイル（main.js）が見つかりませんというビルドエラーが発生します

Build

ビルドするときはプロジェクトフォルダをSystem32から別の場所に移動すること
System32はOS保護がかかっておりビルドエラーが発生するから
C:\electronpj\　とかに移動させると良い

npm run build
成功すると/distフォルダの中に.exe（MacOSの場合は.dmg）などが生成される
再ビルド可能（Home.jsxなどを変更して再度ビルドし直す等）

配布

Setup exeファイルをクリックすればデスクトップにショートカットが作成されるので、これをZIPにすればWordPressを介して配布できます

（※「win-unpacked」に入っている単体のexeファイルはデスクトップに移すと起動しなくなります）

・Windows Defender SmartScreen が出る場合は署名証明書(code signing certificate)を取得すること

Build Error

ビルドしてEXEファイルを開くと、画面が真っ白

開発中はElectronのエントリーポイント（main.js）がlocalhost:5173のviteサーバーを見て動きますが、本番環境ではindex.htmlを見て動くように指定する必要があります。本番環境では5173がないので何も表示されません

// main.js

function createWindow() {
  const win = new BrowserWindow({
  ...
  });

  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:5173');
  } else {
    win.loadFile(path.join(__dirname, 'dist', 'index.html'));
  }
}
// vite.config.js

export default defineConfig({
  plugins: [react()],
  root: '.',
  base: './',
  build: {
    outDir: 'dist',
  },
})

画面は表示されたが、server.jsにアクセスする「解析する」ボタンを押すとコンソールエラーが発生する

開発中であればnode server.jsでサーバーを立ち上げますが、本番環境で立ち上げていないのでエラーになります。なので、main.jsに追記することで、Electron起動時にserver.jsをバックグラウンドで起動させます

// main.js

const { fork } = require('child_process');   <-- 子プロセスでserver.jsを実行

function createWindow() {
  const win = new BrowserWindow({
    ...
  });

  win.loadFile(path.join(__dirname, 'dist', 'index.html'));
}

app.whenReady().then(() => {
  // server/server.jsのパスを指定するために↓のような形にする
  const serverPath = path.join(__dirname, 'server', 'server.js');
  fork(serverPath, [], { stdio: 'inherit' });    <-- 自動でnode server.jsを実行

  createWindow();
});
// package.json

"files": [
  "server/**/*" <-- 追加
]
"build": {
  "asar": false,  <-- 追加（falseにするとソースコードが丸見えになる）
}

「範囲を選択」ボタンを押しても赤い枠線が表示されないが、プレビュー画像はしっかり表示される

未解決

BACK