WSL2でElectronを動かすの巻

こんにちは！

お鍋が美味しい季節になってまいりました。おさむです。
WSL2＋Electronな環境を構築する機会がありましたので、やり方をシェアしたいと思います。

# この記事のゴール
WSL2環境下にて、Electronで作成した画面が表示出来るところまで

# 前提
1. WSL2のセットアップが完了している
2. Ubuntu 18.04 LTSのOSイメージを使用している（たぶん他のディストリでもいける）

# やりかた
## ①Node.jsとnpmのインストール
apt-getで入れてしまいましょう。

```bash
# Node.js
$ sudo apt-get install -y nodejs

# npm
$ sudo apt-get install -y npm
```

## ②プロジェクトの作成
[Electron Documentation](https://electronjs.org/docs/tutorial/first-app) に従い、npmのプロジェクトを作成します。

```bash
# ディレクトリを作成し、その中に移動
$ mkdir sampleProject
$ cd sampleProject

# npmプロジェクト作成。質問に答えながらいい感じに
$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (sampleProject) sample
version: (1.0.0) 1.0.0
description:
entry point: (index.js) index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/osamu/sampleProject/package.json:

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

```

続いて、サンプルのHTMLとJavaScriptの配置。
これらも[Electron Documentation](https://electronjs.org/docs/tutorial/first-app) のサンプルソースをお借りしましょう。
npm initを実行したディレクトリに、それぞれ**index.html**、**index.js**という名前で保存します。

```html:index.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>
```

```javascript:index.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.on('ready', createWindow)
```

こんな感じで配置できればOKです。

```bash
$ ls -l
total 12
-rw-r--r-- 1 osamu osamu 546 Nov 16 11:31 index.html
-rw-r--r-- 1 osamu osamu 342 Nov 16 11:31 index.js
-rw-r--r-- 1 osamu osamu 200 Nov 16 11:30 package.json
```

## ③Electronのインストール
[Electron Documentation](https://electronjs.org/docs/tutorial/first-app) に記載の通り、Electronのインストールを実行します。

``` bash
# ローカルインストールの場合はこっち
$ npm install --save-dev electron
# おまじない
$ sudo node node_modules/electron/install.js

# グローバルインストールの場合はこっち
$ sudo npm install -g electron
# おまじない。ディストリによっては/usr/lib/node_modules/electron/install.jsかも
$ sudo node /usr/local/lib/node_modules/electron/install.js
```

<details>
<summary>おまじないって何？</summary>
<div>
npm installしただけでは、electronの起動時に以下のような例外が出て起動に失敗します。

```bash
Electron failed to install correctly, please delete node_modules/electron and try installing again
```

この例外をスローしている箇所のソースを見てみると、path.txtが足りないとのこと。

```javascript:index.js

var pathFile = path.join(__dirname, 'path.txt')

function getElectronPath () {
  if (fs.existsSync(pathFile)) {
    ...
  } else {
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
  }
}

```

[ここ](https://stackoverflow.com/questions/43768589/trouble-importing-from-module-after-mix-a-compile)に書いてあるとおり、手でinstall.jsを実行することで欠落したファイルの追加インストールをすることが出来ました。
</div>
</details>

## ④ディスプレイサーバの導入
いざ、実行…といきたいところですが、もうひと手間必要です。
Electronにより生成された画面の情報をウィンドウとして表示するため、ディスプレイサーバを導入します。

### バイナリの取得・インストール
[VcXsrvのプロジェクトページ](https://sourceforge.net/projects/vcxsrv/)からダウンロードし、インストール。
インストール時の設定は全部デフォルトでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/2125ec43-4995-afde-9666-b1e4dd95b7c8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/f9bcf2e9-8967-aded-c458-23bb1c6bb772.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/7e143c13-ae4f-0dfb-0f1b-2cd07b9c3f22.png)

### サーバの起動
こんなかんじのアイコンのアプリケーションを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/ed26398e-c42d-56f4-8bac-4b85e7f84681.png)

サーバの設定も基本的にデフォルトでOKなのですが…以下の一点だけ変更が必要です。
**起動時のオプションに"-ac"を追加する**必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/3fc24306-41b1-709b-a485-cf0dec1d4c40.png)

<details>
<summary>-acって何？</summary>
<div>
アクセス制限を解除するオプションとのこと。
[XSERVER](https://www.x.org/archive/current/doc/man/man1/Xserver.1.xhtml) のページを見ると、このオプションについて言及されています。
> disables host-based access control mechanisms. Enables access by any host, and permits any host to modify the access control list.

WSL2はHyper-Vの上で動いているため、Windows側と別ホストとして扱われます（詳しくは[この記事](https://www.atmarkit.co.jp/ait/articles/1909/09/news020.html)を見てね）。
そのため、このオプションにより制限を緩めてやらないと画面の表示が出来ません。
</div>
</details>

### 環境変数DISPLAYの設定
WSL2からVcXsrvに接続するための設定を行います。
これは**シェルを起動する度に都度実行する必要がある**ので、.bashrcに追記してしまいましょう。

```bash
# 再起動の度にこれを叩くのはちょっと面倒なので…
$ export DISPLAY=`ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'`:0
```

```bash
# .bashrcの中に…
vi ~/.bashrc
```

```bash:~/.bashrc
# ~/.bashrc: executed by bash(1) for non-login shells.
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples

# ～～中略～～

# 追記。これでシェルを起動する度に自動で設定される。
export DISPLAY=`ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'`:0
```

<details>
<summary>なんでip routeを使ってるの？</summary>
<div>
別項でも触れていますが、WSL2はHyper-Vの上で動いているという前提のもと（詳しくは[この記事](https://www.atmarkit.co.jp/ait/articles/1909/09/news020.html)を見てね）。

WSL2の中から外のネットワークに出ていくのにあたり、
> WSL2　→　（Hyper-Vのネットワーク）　→　Windows（ホスト）　→　（ホストの所属するネットワーク）

という流れが構築されているようです。
WSL2のデフォルトルートとして設定されているのがWindowsのアドレスであり、
WSL2から送出されたパケットはWindowsめがけてHyper-Vのネットワークを駆け巡ることになります。
なので、デフォルトルート＝ディスプレイサーバが起動しているWindowsである、という理屈です。

ちなみに、Windows側ホストにも以下のような見慣れないアダプタが出現しています。
これを介してWSL2とやり取りをしているようですね。

```bat
イーサネット アダプター vEthernet (WSL):

   接続固有の DNS サフィックス . . . . .:
   IPv4 アドレス . . . . . . . . . . . .: 172.17.64.1
   サブネット マスク . . . . . . . . . .: 255.255.240.0
   デフォルト ゲートウェイ . . . . . . .:
```
</div>
</details>

## ⑤サンプルアプリケーションの起動
先程npm initしたディレクトリにて、下記コマンドを実行するとアプリケーションが立ち上がります。

```bash
# ローカルインストールの場合はこっち
$ node ./node_modules/electron/cli.js index.js 

# グローバルインストールの場合はこっち
$ electron index.js
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199230/24acb460-cd06-47a6-6f1e-2960472d7032.png)

お疲れさまでした。

# 参考サイト

- [Electron Documentation](https://electronjs.org/docs/tutorial/first-app) 
- [WSL2におけるVcXsrvの設定](https://qiita.com/ryoi084/items/0dff11134592d0bb895c)
- [Linuxがほぼそのまま動くようになった「WSL2」のネットワーク機能](https://www.atmarkit.co.jp/ait/articles/1909/09/news020.html)
- [Windows 10／Windows Server 2016のHyper-VでNAT（ネットワークアドレス変換）機能を利用する](https://www.atmarkit.co.jp/ait/articles/1612/16/news039.html)
- [Trouble importing from module after mix a compile](https://stackoverflow.com/questions/43768589/trouble-importing-from-module-after-mix-a-compile)
- [XSERVER](https://www.x.org/archive/current/doc/man/man1/Xserver.1.xhtml)