electron-builderを使ってdmgファイルを生成する
このサイト上からdmgファイルをダウンロードし、ユーザーの端末上でインストールできるようにした。
Electronアプリからdmgファイルを生成する方法
electron-builderを用いる。
electron-builderを使うための設定
まず、package.json
内に以下のプロパティを設定している必要がある。
- name
- description
- version
- author
また、electron-builder自身の設定もpackage.json内に記述する。
dependencies
やscripts
と並列にbuild
というプロパティを設定する。
"build": { "appId": "com.electron.worc", "mac": { "target": "dmg" }, "directories": { "output": "docs" } }
appId
アプリの識別子。
MacではCFBundleIdentifier、WindowsではApplication User Model IDとして用いられる。
デフォルトはcom.electron.${name}
という形式。
Apple Developer Programに登録していないと警告が出るが、そのままパッケージングは進められる。
Code Signingに関してはこのあたり参照。
mac
Macにおける設定。
パッケージングファイル形式をdmgにしたい場合はtarget
プロパティにそう指定する。
directories
パス関連の設定。
dmgファイルのアウトプット先はoutput
プロパティに指定する。
今回はGitHub Pagesにホスティングさせるためにdocsディレクトリを指定した。
その他の設定
electron-builderを起動する
package.json
に以下のようにscriptsを登録した。
"scripts": { "pack:osx": "build --mac --x64" },
また、次の作業も必要。
- electronを
devDependencies
に置く必要がある package.json
のmain
プロパティに指定しているファイルをもとにパッケージング処理が走る- アプリのアイコンをbuildディレクトリ配下に用意する(ファイル名はicon.icns)
Worcのディレクトリ構成は以下のような感じ(一階層のみ表示)
. ├── README.md ├── app ├── assets ├── build <= アプリのアイコンを置く ├── dist ├── docs ├── node_modules ├── package.json └── webpack.config.js
全てが設定済みの状態で先ほどpackage.json
のscripts
に登録したコマンドを叩けば起動する。
$ npm run pack:osx
dmgファイルをGitHub Pagesにホストする
Worcでは、GitHub Pagesを利用してランディングページをホストしている。 ここにdmgファイルも一緒において、ダウンロードしてもらおうと考えた。
しかし、dmgファイルをGitHubにpushしようとすると100MBを超えていて、pushできない現象が陥った。 そこで、Git Large File Storage(LFS)を利用した。
LFSの使い方
下記の手順で行う。(hoge.dmgは適宜、正しいパスに置き換えてください)
$ git lfs install
$ git lfs track hoge.dmg
$ git add .gitattributes
$ git add hoge.dmg
$ git commit -m "add dmg file"
$ git push origin master
git lfs track
を行うと、.gitattributesが生成され、そこに対象のファイルが記述される仕組みとなっている。
これらの作業により、100MB以上のファイルもpushできる。(ただし月に1GBまで、それ以降は有料)
たぶん1ヶ月にそんなに多くリリースしないと思うので、無料でいけるはず・・・。
まとめ
今までelectron-packagerを用いてパッケージングを行なった後、zip形式にし、GitHubのreleaseページにデプロイしていた。
なぜかzipにした後に解凍してみるとアプリケーションが動かなかったり、よくわからない現象が起こって困っていた。
また、GitHubのreleaseページからのダウンロードはあまり良いユースケースとは思えなかったため、ランディングページから直接ダウンロードできるようになって良かった。