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

# はじめに

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

## 実行環境

**[なでしこ(v3)のマニュアル](https://nadesi.com/doc3/)** から、以下の4つの実行方法が提供されていることがわかる。

 1. **[Web(公式サイト )簡易エディタ *](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)**  
公式サイトで提供されている **WEB上のREPL**
 2. **[Webブラウザ版(ClientSide JavaScript 
Library)](https://nadesi.com/v3/)** **[wnako3.js]**  
**[HTMLへの埋め込み方法](https://nadesi.com/doc3/index.php?HTML%E3%81%B8%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95)** にある通り、 **wnako3.js**  を取り込むことで `<script type="なでしこ">...</script>` と **scriptタグ内になでしこのコードを記述** して実行することができる
 3. **[Windows版](https://github.com/kujirahand/nadesiko3win32/releases)** **[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)](https://www.npmjs.com/package/nadesiko3)**  
**[macOS版](https://nadesi.com/doc3/index.php?macos%252Finstall)** 、 **[Raspberry Piでなでしこ3を動かそう](https://nadesi.com/doc3/index.php?%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%9D%E3%81%86)** 、 **[その他OSでなでしこ3をインストールする方法](https://nadesi.com/doc3/index.php?%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%ABPC%E3%81%A7%E3%83%90%E3%83%83%E3%83%81%E5%87%A6%E7%90%86%E3%81%AB%E4%BD%BF%E3%81%86)** は **Node.js** 上で動かす方法です。 Windows版のnakopad以外の実行が可能ですが、**『圧縮』『解凍』や『キー送信』命令を使うためにはNode.jsの他に追加でインストールが必要[^1]**です。  
    1. **nako3edit(tools/nako3edit/run.js)**  
ローカルサーバを起動し **WEBページ** 形式の **ローカル版(Node.jsのランタイム)** の編集エディタ
    2. **nako3server(src/nako3server.js)**  
ローカルサーバを起動し **WEBページ** 形式の **WEBブラウザ版(ブラウザのランタイム)** の編集エディタ
    3. **cnako3(src/cnako3.js)**  
**ローカル版(Node.jsのランタイム)** の **CUI**

[^1]: https://github.com/kujirahand/nadesiko3/blob/master/README.md

## 開発環境

**[公式リポジトリのdoc/SETUP.md](https://github.com/kujirahand/nadesiko3/blob/master/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](https://github.com/kujirahand/nadesiko3/blob/master/README.md)** の記載法に合わせて記載する。

###　DOCKERで利用する

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

```
# 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: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イメージを作成します。

``` console:buildコマンド
docker build -t nadesiko3 .
```

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

``` shell-session:実行確認
$ 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: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" ]
```

``` console:buildコマンド
docker build -t nadesiko3:edit -f Dockerfile.edit .
```

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

``` shell-session:実行確認
$ 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:Dockerfile.server
FROM nadesiko3
CMD [ "nako3server" ]
```

``` console:buildコマンド
docker build -t nadesiko3:server -f Dockerfile.server .
```

``` shell-session:実行確認
$ 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: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" ]
```

``` console:buildコマンド
docker build -t nadesiko3:development -f Dockerfile.development .
```

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

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

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

``` shell-session:実行例
$ 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](https://github.com/j5c8k6m8/nadesiko3/commit/0d9516ed4aceaa0c69dbd425abb32a909bb76397) にも上げています。

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