Make Local Happiness

自分の幸せは自分で作る!!!

create-react-appを使ってElectronをMacでビルドしてRaspberryPiで動作させる

f:id:iwate_takayu:20180212175359p:plain

みなさんはRaspberryPiでElectronのアプリを動かしたことがありますか? RaspberryPiは小型のPCとしてはかなり優秀で、「RaspberryPi3 model B」はメモリを1GB積んでCPUも4コア入っているます。 しかし、そんな高スペックなRaspberryPiでも簡単に動かすことができないのがElectronです。

Electronとはクロスプラットフォームで動作するアプリを作るためのフレームワークですが、 RaspberryPiでも動作させることができます。 以前にRaspberryPiでElectronアプリを自動起動させるための記事も書いたことがあるのですが、 これを試した皆さんならお気づきかと思いますが、RaspberryPi上でのElectronのbuildは時間がかかり過ぎるのです。

ganeza.hatenablog.com

私の開発しているシステムはMacでBuildを実行した場合は数分で終わります。

しかし、RaspberryPiでは3時間もかかるのです。

正直3時間待って本番用のビルドがコケた際には本当に時間が無駄ですし、 トライアンドエラーがなかなかできないので困っていました。

そこでMacでRaspberryPi用にビルドできないかと考えました。 普段GUIの開発はReactを利用しているので、 今回はcreate-react-appを使ってRaspberryPi用にElectronアプリをビルドし起動させるところまで行いました。

create-react-appでElectronアプリを起動する

※ 事前にcreate-react-appのインストールをしてください

こちらの記事を参考にelectron-packagerのインストールまで進めてください

qiita.com

RaspberryPi用にビルドする

Electronアプリをビルドする方法

Electronをpackage化するライブラリは2種類あります。 electron-builderを利用した場合は、インストール型のアプリができます。 今回は手軽に実行したら、そのままアプリが起動する方が嬉しいので、electron-packagerを利用します。

package.jsonを修正する

packageというコマンドを追加します。 package化したフォルダはreleaseフォルダに格納されます。 RaspberryPiのアーキテクチャuname -aで確認することができます。

  "scripts": {
    "package": "electron-packager . electron-react-app --platform=linux --arch=armv7l --overwrite --prune=true --out=release"
  }

RaspberryPiで実行する

$ yarn run build
$ yarn run package

$ zip -r release/electron-react-app-linux-armv7l.zip release/electron-react-app-linux-armv7l/
$ scp release/electron-react-app-linux-armv7l.zip pi@raspberrypi.local:/home/pi/

# connect raspberry pi
$ ssh pi@raspberrypi.local
$ unzip electron-react-app-linux-armv7l.zip
$ cd electron-react-app-linux-armv7l
$ chmod +x electron-react-app
$ DISPLAY=:0 ./electron-react-app

まとめ

Macでbuildしたアプリをraspberrypi上で起動できるので開発が捗るようになりました。 今回作成したリポジトリはこちらになります。

github.com

みなさまよいElectron開発ライフを!