vagrant上のCentOS7でElectronアプリを動かす

# はじめに
vagrant環境は基本的にCUIで操作するため、GUIをもつElectronアプリを動かすにはいくつかの設定が必要です。この記事では、vagrant環境で動かしているCentOS7上でElectronアプリを実行するための手順を説明します。

## 仮想マシンの作成
今回の場合は仮想マシンを新規作成しますが、既存の仮想マシンを使いたい場合は `Vagrantfile` の編集のみすればOKです。

```bash:bash
$ vagrant box add centos/7 # Boxの追加
$ vagrant init centos/7
$ vim Vagrantfile
```

`vim`などのエディタを使って、`Vagrantfile`を以下のように編集しましょう。X11 Forwardingを有効にして、SSH経由でGUIを動かせるようにします。

```diff:Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "centos/7"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  # config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  # config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  # config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
  #   vb.memory = "1024"
  # end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Puppet, Chef, Ansible, Salt, and Docker are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
+  config.ssh.forward_x11 = true
end
```

以降の操作は仮想マシンの中で行うので、

```bash:bash
$ vagrant up
$ vagrant ssh
```

として仮想マシンにログインしましょう。

## Nodeやyarnをインストール
Node、yarn、gitなどをインストールします

```bash:bash
$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
$ curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
$ sudo yum install -y gcc-c++ make yarn git
```


## xauthのインストール
X11 Forwarding を使うために、`xauth`が必要です。

```bash:bash
sudo yum install -y xorg-x11-xauth
```

インストール後は**vagrantから一旦ログアウト**して、再度`vagrant ssh`でログインしましょう。

## Electronアプリを動かしてみる
[electron-api-demos](https://github.com/electron/electron-api-demos) というサンプルアプリを動かしてみましょう。

```bash:bash
$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ yarn install
$ yarn start
```

`yarn start` とするとElectronアプリがビルドされて動くはずなのですが、以下のようなエラーが出てしまうかと思います。

```bash:bash
$ yarn start
yarn run v1.7.0
$ electron .
/home/vagrant/electron-api-demos/node_modules/electron/dist/electron: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

これは、vagrantにGUIを動かすためのライブラリが足りてないのが原因です。結論から言えば、以下のコマンドを実行していくつかパッケージをインストールすればうまくいきました。詳しくは、コラムをご覧ください。

```bash:bash
sudo yum install -y gtk3-3.22.26-3.el7.x86_64  \
    libXScrnSaver-1.2.2-6.1.el7.x86_64 \
    GConf2-3.2.6-8.el7.x86_64 \
    alsa-lib-1.1.4.1-2.el7.x86_64
    
```

再度 `yarn start` とすればうまくいくかと思います。

![Screenshot from 2018-05-28 20-33-09.png](https://qiita-image-store.s3.amazonaws.com/0/106258/98a921c2-9460-50fe-6aae-246f7e2cc00f.png)



## コラム: インストールすべきパッケージを調べるには？
`yarn start` のエラーを詳しく見てみると、`libgtk-3.so.0` という共有ライブラリがないことがわかります。`yum provides` コマンドを使うと、特定の共有ライブラリが含まれるパッケージを検索することができます。

例えば、`libgtk-3.so.0`という共有ライブラリがどのパッケージにあるかを検索してみましょう。

```
$ yum provides libgtk-3.so.0*
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ftp.iij.ad.jp
 * extras: ftp.iij.ad.jp
 * updates: ftp.iij.ad.jp
gtk3-3.22.26-3.el7.i686 : GTK+ graphical user interface library
Repo        : base
Matched from:
Provides    : libgtk-3.so.0



gtk3-3.22.26-3.el7.x86_64 : GTK+ graphical user interface library
Repo        : base
Matched from:
Provides    : libgtk-3.so.0()(64bit)



gtk3-3.22.26-4.el7_5.i686 : GTK+ graphical user interface library
Repo        : updates
Matched from:
Provides    : libgtk-3.so.0



gtk3-3.22.26-4.el7_5.x86_64 : GTK+ graphical user interface library
Repo        : updates
Matched from:
Provides    : libgtk-3.so.0()(64bit)



gtk3-3.22.26-3.el7.x86_64 : GTK+ graphical user interface library
Repo        : @base
Matched from:
Provides    : libgtk-3.so.0()(64bit)
```

OSはCentOS7.4、64bitなので`gtk3-3.22.26-3.el7.x86_64`をインストールすればよさそうだ、ということがわかります。

```
$ sudo yum install -y gtk3-3.22.26-3.el7.x86_64 
```

再度 `yarn start` を実行すると、エラーメッセージが変化するはずなので同様な手順で必要なパッケージを検索してインストールしましょう。

## コラム: `Gtk-WARNING **: cannot open display: `というエラーが表示される
`yarn start` を実行したときに、次のようなエラーメッセージが表示されることがあります。

```
$ yarn start
yarn run v1.7.0
$ electron .

(electron:4994): Gtk-WARNING **: cannot open display: 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

Vagrantfileを編集し、`config.ssh.forward_x11 = true`を追記したか、`xorg-x11-xauth`をインストールし、インストール後に一旦vagrantからログアウトしたかを確認してください。