Macでelectronアプリのexe版をdockerを使ってビルドする

概要

electron+vue+sqliteでmac向けデスクトップアプリを作ったが、それのwin版をmacでビルドしようとしたら色々ハマったのでそのメモ

調査/下準備

こちらの記事によるとwin版をmacでビルドするためにはwineをインストールする必要があるらしい。
しかし、昔macにwineを入れたらぐちゃぐちゃになった思い出があって、できれば環境を汚さずにwineを入れたいので今回はdockerを使うことにした。

docker hubにmisterpaladin/docker-wineというリポジトリがあるが、うまく動かなかったのでnodeリポジトリからwineをインストールするDockerfileを用意することにする。

また、今回はdocker-composeを使う。
(普通にdocker buildしてからコンテナを立ち上げてもできるけど、docker-compose使った方がビルド、マウント、実行を一括にできるため)

electronのバージョンやicoファイルはあらかじめ用意しておく。

手順

1. 以下のファイル構成にする

   .
   ├── Dockerfile
   ├── app
   ├── build
   ├── docker-compose.yml
   ├── icon
   ├── node_modules
   ├── package-lock.json
   ├── package.json
   └── readme.md
   

2. Dockerfileに下記を記述

   Dockerfile

   FROM node
   
   RUN dpkg --add-architecture i386 && \
     apt update && \
     apt install -y wine && \
     apt install -y wine32 && \
     npm i -g electron-packager
   
   WORKDIR /home
   
   CMD [ "electron-packager",".","app-name","--name=app-name","--platform=win32","--arch=x64","--electronVersion=2.0.5","--out=build","--overwrite","--icon=icon/icon.ico"]
   

   CMDを一行で書かなきゃいけないのは見栄えが悪くてツライですね。。

3. docker-compose.ymlに下記を記述

   docker-compose.yml

   version: "2"
   services:
     electron-packager:
       build: .
       volumes:
        - .:/home
   

4. docker-compose upを実行

これでbuild/app-nameにたくさんのファイルとexeファイルができる。

最後に

electronってクロスプラットフォームのデスクトップアプリが簡単にできるものだと思っていたら色々ハマりポイントがありましたね。。

まあweb+nodeで簡単にmacアプリ作れるってだけでありがたいですが。

これの他にもelectron+vue+sqliteという組み合わせで色々ハマったので、そのうち記事が書ければ

参考

• Mac環境でElectronのWindows用パッケージングをしたら大変だった話 - Qiita
• fr/Wine - Debian Wiki