Remix IDEをDockerで起動してローカルディレクトリと同期する

# Dockerでremix-ideをローカルディレクトリと同期してみる
WindowsでRemix IDEをインストールしようとしたところ、色々エラーが発生して手間だったのでDockerで環境を作ってみました。

## 環境
- windows10
- Docker

# やってみる
[remix-ide github](https://github.com/ethereum/remix-ide)を参考に実施していきます。

## 1.コンテナの作成
nodeの公式イメージでコンテナの作成をしていきます。
パラメータに、remix-ideで利用するポートと、ファイルを編集しやすいように共有ディレクトリを設定しました。

```terminal
$ docker run -it -d --name remix -p 8080:8080 -p 65520:65520 -v //E/work/share/Ethreum/remix-ide:/apl node:11.14.0
$ docker exec -it remix /bin/bash
```

## 2.remix-ideのリポジトリを取得

remix-ideをインストールしていきます。
インストール方法はnodeモジュールとしての取得とリポジトリのクローンどちらでもできるようですが、今回はリポジトリのクローンで実施していきます。

```terminal
$ cd apl
$ git clone https://github.com/ethereum/remix-ide.git
$ cd remix-ide
$ npm update
$ npm install
```

## 3.remix-ideのビルド
 
公式のドキュメントに記載されている通り「npm start」と、実行していきたいですが、
このままでは以下のエラーが発生し動かないのでbuildします。

```console:err
GET http://localhost:8080/build/app.js net::ERR_ABORTED 404 (Not Found)
```

ビルド。

```terminal
$ npm run-script build
```
## 4.ローカルディレクトリ同期のための設定変更

次にローカルディレクトリ用の設定変更します。
この時点で「npm start」をすればremixは動作すると思いますが、ローカルディレクトリとの共有を行おうとすると以下のエラーが発生します。

```console:err
WebSocket connection to 'ws://localhost:65520/' failed: Connection closed before receiving a handshake response
```

```console:remix起動時ログ
[remixd  ] [WARN] You may now only use IDE at http://127.0.0.1:8080 to connect to that instance
[remixd  ] [WARN] Any application that runs on your computer can potentially read from and write to all files in the directory.
[remixd  ] [WARN] Symbolinc links are not forwarded to Remix IDE
[remixd  ] 
[remixd  ] [WARN] Symbolic link modification not allowed : ./contracts | /apl/remix-ide/contracts
[remixd  ] Sat Apr 27 2019 06:34:17 GMT+0000 (Coordinated Universal Time) Remixd is listening on 127.0.0.1:65520
```

ローカルディレクトリ同期用のリスナーが(127.0.0.1:65520)で立ち上がっているため、接続に失敗しているのだと思うので、IPを変更していきます。
websocket.js内のIPを「127.0.0.1」から「0.0.0.0」に変更します。
変更することで、ディレクトリ共有のリスナーが「0.0.0.0:65520」に変更されます。

```terminal
$ sed -i s/127.0.0.1/0.0.0.0/g ./node_modules/remixd/src/websocket.js
```

# 動作確認

準備完了です！起動していきます！

```terminal
npm start

> remix-ide@0.7.5 start /apl/remix-ide
> npm-run-all -lpr serve watch onchange remixd

[serve   ] 
[serve   ] > remix-ide@0.7.5 serve /apl/remix-ide
[serve   ] > execr --silent http-server .
[serve   ] 
[onchange] 
[onchange] > remix-ide@0.7.5 onchange /apl/remix-ide
[onchange] > onchange build/app.js -- npm-run-all lint
[onchange] 
[watch   ] 
[watch   ] > remix-ide@0.7.5 watch /apl/remix-ide
[watch   ] > watchify src/index.js -dv -p browserify-reload -o build/app.js --exclude solc
[watch   ] 
[remixd  ] 
[remixd  ] > remix-ide@0.7.5 remixd /apl/remix-ide
[remixd  ] > ./node_modules/remixd/bin/remixd -s ./contracts --remix-ide http://127.0.0.1:8080
[remixd  ] 
[watch   ] WS server listening on  39167
[remixd  ] [WARN] You may now only use IDE at http://127.0.0.1:8080 to connect to that instance
[remixd  ] [WARN] Any application that runs on your computer can potentially read from and write to all files in the directory.
[remixd  ] [WARN] Symbolinc links are not forwarded to Remix IDE
[remixd  ] 
[remixd  ] [WARN] Symbolic link modification not allowed : ./contracts | /apl/remix-ide/contracts
[remixd  ] Thu Apr 25 2019 11:46:17 GMT+0000 (Coordinated Universal Time) Remixd is listening on 0.0.0.0:65520
[remixd  ] Thu Apr 25 2019 11:46:26 GMT+0000 (Coordinated Universal Time) Connection accepted.
[remixd  ] setup notifications for /apl/remix-ide/contracts
[remixd  ] Thu Apr 25 2019 11:46:32 GMT+0000 (Coordinated Universal Time) Remix 172.17.0.1 disconnected.
[watch   ] NOW ASKING FOR CLIENT TO RELOAD
[watch   ] 26856676 bytes written to build/app.js (20.88 seconds) at 11:46:35 AM
[onchange] 
[onchange] > remix-ide@0.7.5 lint /apl/remix-ide
[onchange] > standard | notify-error
[onchange] 
```

ブラウザで「 http://127.0.0.1:8080 」を表示。
Remixの画面が表示されました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359665/8463bdd5-d14b-4068-757c-1e2a90ebaa3b.png)

次にローカルディレクトリと共有してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359665/59d4dadd-12b5-1010-9d15-a1419549b465.png)

サイドバーに「lockalhost」ディレクトリが表示されました！
ディレクトリ共有出来ているみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359665/c56af8c1-7cbb-52f9-8176-a7f47dd12ff5.png)

Remixのローカルディレクトリ同期先を変更したい場合は以下の「./contracts」のパスを変更すれば好きなディレクトリと同期できるようです。

```json:package.json
"remixd": "./node_modules/remixd/bin/remixd -s ./contracts --remix-ide http://127.0.0.1:8080",
```

# おまけ
Dockerfileも作ってみました。
/apl/remix-ide 配下でnpm startで動きます。

```dockerfile:Dockerfile
FROM node:11.14.0
SHELL ["/bin/bash", "-c"]

RUN mkdir apl
WORKDIR  /apl

# remix-ide clone
RUN git clone https://github.com/ethereum/remix-ide.git

WORKDIR  /apl/remix-ide
RUN npm update
RUN npm install

# ホストで利用できるようIP変更
RUN sed -i s/127.0.0.1/0.0.0.0/g ./node_modules/remixd/src/websocket.js

# ビルド
RUN npm run-script build
```

# 参考
https://github.com/4c0n/remixd-docker/blob/master/Dockerfile