なでしこ(v3) の 実行環境 / 開発環境 を DOCKER で作成する

はじめに

なでしこのインストール方法は、 公式ページ および github に記載があるが、
なでしこ(v3) は、以下の通り 複数の 実行環境 と 開発環境 のセットアップ方法 が提供されている。

実行環境

なでしこ(v3)のマニュアル から、以下の4つの実行方法が提供されていることがわかる。

1. Web(公式サイト )簡易エディタ *
   公式サイトで提供されている WEB上のREPL
2. Webブラウザ版(ClientSide JavaScript
   Library) [wnako3.js]
   HTMLへの埋め込み方法 にある通り、 wnako3.js を取り込むことで <script type="なでしこ">...</script> と scriptタグ内になでしこのコードを記述 して実行することができる
3. Windows版 [nadesiko3win32-3.0.681.zip]
   オールインワンパッケージ。zipを解凍し、初回セットアップ( setup.vbs を実行)をすることで、以下の4つの実行が行える。
   1. nakopad.vbs(もしくは、bin/nakopad.exe)
      ローカルサーバを起動し WEBページ 形式の ローカル版(Node.jsのランタイム) の編集エディタ
   2. nako3edit.vbs
      windowsのデスクトップアプリ (v1と同じ形式)の ローカル版(Node.jsのランタイム) の編集エディタ
   3. nako3server.vbs
      ローカルサーバを起動し WEBページ 形式の WEBブラウザ版(ブラウザのランタイム) の編集エディタ
   4. cnako3.bat
      ローカル版(Node.jsのランタイム) の CUI
4. Node.js版 (npm)
   macOS版 、 Raspberry Piでなでしこ3を動かそう 、 その他OSでなでしこ3をインストールする方法 は Node.js 上で動かす方法です。 Windows版のnakopad以外の実行が可能ですが、**『圧縮』『解凍』や『キー送信』命令を使うためにはNode.jsの他に追加でインストールが必要¹**です。
   1. nako3edit(tools/nako3edit/run.js)
      ローカルサーバを起動し WEBページ 形式の ローカル版(Node.jsのランタイム) の編集エディタ
   2. nako3server(src/nako3server.js)
      ローカルサーバを起動し WEBページ 形式の WEBブラウザ版(ブラウザのランタイム) の編集エディタ
   3. cnako3(src/cnako3.js)
      ローカル版(Node.jsのランタイム) の CUI

開発環境

公式リポジトリのdoc/SETUP.md には、以下の2つの開発環境のセットアップ方法が記載されている。すべての環境において、git と Node.js が必要 なため、両者のインストールは省略する。

1. 【Windows】
   npm で node-gyp と windows-build-tools のグローバルインストール が必要。
2. 【macOS】
   『圧縮』『解凍』テストケース実行のため、実行方法同様、p7zip のインストール が必要。

また両者とも NAKO_HOME の環境変数を設定する必要がある。

DOCKERで作成するメリット

DOCKERの説明は省略する。

実行環境では、 Windows版 のように オールインワンパッケージ が実現でき、
開発環境では、依存関係を宣言し、環境構築の手間を減らす ことができる。

実行環境(DOCKER)

以下 README.md の記載法に合わせて記載する。

###　DOCKERで利用する

先に、DOCKERをインストールし、
次いで、コマンドラインから以下のコマンドを実行して、Dockerイメージを取得します。
(注意) Docker Hubにイメージを登録していないため、以下のコマンドではDockerイメージを取得できません。
Dockerイメージの作成は後述の Dockerイメージを作成する を参照してください。

# Docker Hub からなでしこ3のDockerイメージを取得する
$ docker pull nadesiko3
$ docker pull nadesiko3:server
$ docker pull nadesiko3:edit

イメージを取得後、以下のコマンドで なでしこ が利用できます。

# なでしこをCUIで実行
$ docker run --rm nadesiko3 cnako3 -e "「Hello World」を表示する"
# なでしこエディタ(ローカル版)を起動
$ docker run -d -p 3030:3030 nadesiko3:edit
# なでしこエディタ(WEBブラウザ版)を起動
$ docker run -d -p 3000:3000 nadesiko3:server

実行環境(DOCKER)のイメージ作成

まずは共通となる実行環境のイメージを作成します。

Dockerfile

FROM node:13-alpine
WORKDIR /app

RUN apk add --update --no-cache p7zip
RUN apk add --update --no-cache xdotool

RUN npm -g install nadesiko3

ENV NAKO_HOME /usr/local/lib/node_modules/nadesiko3

上記、Dockerfileを用いて、dockerイメージを作成します。

buildコマンド

docker build -t nadesiko3 .

CUIでの実行確認は以下の通り

実行確認

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nadesiko3           latest              78908220982b        26 minutes ago      157MB
$ docker run --rm nadesiko3 cnako3 -e "「Hello World」を表示する"
Hello World

なでしこエディタ(ローカル版) 用のDockerfileも用意します。
nako3edit のプロセスがフォアグラウンドで動かないため、起動用シェルを追加します。

Dockerfile.edit

FROM nadesiko3
RUN echo -e "#!/bin/sh\n\nnako3edit\n\ntail -f /dev/null" > nako3edit.sh
RUN chmod 755 nako3edit.sh
CMD [ "./nako3edit.sh" ]

buildコマンド

docker build -t nadesiko3:edit -f Dockerfile.edit .

実行確認は以下の通り。run 後の CONTAINER IDを指定して、アクセス対象のURLを取得することに注意してください。

実行確認

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nadesiko3           edit                80680a121dd9        15 minutes ago      157MB
nadesiko3           latest              8b48267d6548        16 minutes ago      157MB
node                13-alpine           b01d82bd42de        3 weeks ago         114MB
$ docker run -d -p 3030:3030 nadesiko3:edit
29ff97991e17e1b63f5818406b07c4854d949c8d1fd69d4953d0aabd91409625
user@localhost:~/tmp/nadesiko3 (master)$ docker logs 29ff97991e17e1b63f5818406b07c4854d949c8d1fd69d4953d0aabd91409625
* [WEBサーバ(なでしこ+Express)] (debug)
| 以下のURLで起動しました。
+- [URL] http://localhost:3030
>>> --------------------------------------------------
>>> サーバ起動に成功しました。

>>> nako3edit にアクセスするには、以下のURLにアクセスします
>>> [URL] http://localhost:3030?appkey=34149_20085_5302
>>>
[static] /html /usr/local/lib/node_modules/nadesiko3/tools/nako3edit/html
[static] /release /usr/local/lib/node_modules/nadesiko3/release
[GET] /
[GET] /test
[GET] /files
[GET] /load

なでしこエディタ(WEBブラウザ版) 用のDockerfileも用意します。

Dockerfile.server

FROM nadesiko3
CMD [ "nako3server" ]

buildコマンド

docker build -t nadesiko3:server -f Dockerfile.server .

実行確認

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nadesiko3           server              d81e733303c8        2 minutes ago       157MB
nadesiko3           edit                80680a121dd9        27 minutes ago      157MB
nadesiko3           latest              8b48267d6548        27 minutes ago      157MB
$ docker run -d -p 3000:3000 nadesiko3:server
d98e488e0a4d18af057c601d5816bcc663ddf55ccc8eed96bede0ac675f2d9bc
$ docker logs d98e488e0a4d18af057c601d5816bcc663ddf55ccc8eed96bede0ac675f2d9bc
documentRoot: /usr/local/lib/node_modules/nadesiko3
+ サーバーを開始しました
+ [URL] http://localhost:3000

開発環境(DOCKER)

開発環境は、git のワークスペースと開発環境用のコンテナをマウントさせ、
git のワークスペースの変更をコンテナに反映させる構成とします。

Dockerfile.development

FROM node:13-alpine
WORKDIR /app

RUN apk add --update --no-cache p7zip
RUN apk add --update --no-cache xdotool
RUN apk add --update --no-cache wine

ENV NAKO_HOME /app/nadesiko3

CMD [ "tail", "-f", "/dev/null" ]

buildコマンド

docker build -t nadesiko3:development -f Dockerfile.development .

起動時には、 gitのワークスペース を /app/nadesiko3 にマウントします。

実行コマンド

# gitのワークスペースにて実行
docker run --rm -d -v $PWD:/app/nadesiko3 -p 3000:3000 -p 3030:3030 nadesiko3:development

docker execにて、起動したコンテナに入り、必要なコマンドを実行できます
※ 必要に応じてdocker-composeを使用すれば、起動コマンドも管理可能です。

実行例

$ docker run --rm -d -v $PWD:/app/nadesiko3 -p 3000:3000 -p 3030:3030 nadesiko3:development
7d69ac3a42419ba75c5937eacd915051ee2ae0e91106fde072c539f47b800038
/app # cd nadesiko3/
/app/nadesiko3 # node src/nako3server.js
documentRoot: /app/nadesiko3
+ サーバーを開始しました
+ [URL] http://localhost:3000

さいごに

今回作成した Dockerfile は 個人のGITHUB にも上げています。

開発環境は必要なコマンドをすべて試してはいませんが、
なでしこ は多くの実行の仕方を提供し、electronを使用したビルドなど
依存関係も多いため、DOCKERのメリットを多く享受できると思います。

1. https://github.com/kujirahand/nadesiko3/blob/master/README.md ↩