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という組み合わせで色々ハマったので、そのうち記事が書ければ

参考