Dockerでremix-ideをローカルディレクトリと同期してみる

WindowsでRemix IDEをインストールしようとしたところ、色々エラーが発生して手間だったのでDockerで環境を作ってみました。

環境

windows10
Docker

やってみる

remix-ide githubを参考に実施していきます。

1.コンテナの作成

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

$ 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モジュールとしての取得とリポジトリのクローンどちらでもできるようですが、今回はリポジトリのクローンで実施していきます。

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

3.remix-ideのビルド

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

err

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

ビルド。

$ npm run-script build

4.ローカルディレクトリ同期のための設定変更

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

err

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

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」に変更されます。

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

動作確認

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

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の画面が表示されました！

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

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

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

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

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

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