WEB アプリを動かす！
一般に、複数メンバー間で同一の開発環境を構築するのは面倒なものです。
たとえば、Windows ユーザーは XAMPP を、Mac ユーザーは MAMP を使ってかなり近い環境を作ることはできますが、MySQL(MariaDB) のバージョンが微妙に違うために動かないプログラムがある、とか。
VirtualBox 上で Laravel/Homestead 環境を作る時でも、Vagrant box のバージョン指定方法を知らないと、ちょっと古い（とはいっても数年前の）環境が構築できない、とか。
こういうことを解決する知識は、長い目で見れば無駄なものとは思わないけど、プログラマーとしての作業の本質ではないので、可能な限り手っ取り早く済ませたい、というのが本音でしょう。
少なくとも私はそうです。
というわけで、今回は Docker で実際に動作する WEB アプリを構築してみます。
一から作るわけではなく、すでに構築されているものを「導入」するだけなのですが、これほど簡単に WEB アプリの開発環境が構築できるんだよ、というサンプルです。
Node の環境を構築？
自分の環境にはそもそも Node.js 入ってたかな？ なんてことは、もちろん考える必要はありません。
まず、適当なディレクトリを作り、そのディレクトリに移動します。
$ mkdir virtualMachines
$ cd virtualMachines
次に、git を使ってサンプルアプリを落とし、そのディレクトリに移動します。
※ git を使っていない場合は curl でも落とせます。参考 URL 参照。
$ git clone https://github.com/dockersamples/node-bulletin-board
$ cd node-bulletin-board/bulletin-board-app
さて、ここでダウンロードした中身をちょっとだけ見てみましょう。
$ ls -al
total 31
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 ./
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 ../
-rw-r--r-- 1 shind 197609 22 Mar 8 23:26 .gitignore
-rw-r--r-- 1 shind 197609 127 Mar 8 23:26 Dockerfile
-rw-r--r-- 1 shind 197609 1131 Mar 8 23:26 LICENSE
-rw-r--r-- 1 shind 197609 1239 Mar 8 23:26 app.js
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 backend/
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 fonts/
-rw-r--r-- 1 shind 197609 1826 Mar 8 23:26 index.html
-rw-r--r-- 1 shind 197609 572 Mar 8 23:26 package.json
-rw-r--r-- 1 shind 197609 888 Mar 8 23:26 readme.md
-rw-r--r-- 1 shind 197609 1071 Mar 8 23:26 server.js
-rw-r--r-- 1 shind 197609 1227 Mar 8 23:26 site.css
$ ls -al backend/
total 7
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 ./
drwxr-xr-x 1 shind 197609 0 Mar 8 23:26 ../
-rw-r--r-- 1 shind 197609 181 Mar 8 23:26 api.js
-rw-r--r-- 1 shind 197609 333 Mar 8 23:26 events.js
-rw-r--r-- 1 shind 197609 63 Mar 8 23:26 index.js
え、たったのこれだけ？ ていう感じです。プログラムっぽいものは JS が 5 ファイルあるだけ。
一番大きいのは HTML ですが、2KB もありません。
これが今回のプログラムの実体のようです。
サーバーの設定は Dockerfile と package.json だろうと思い中身を見てみますが
$ cat Dockerfile
FROM node:current-slim
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
EXPOSE 8080
CMD [ "npm", "start" ]
COPY . .
$ cat package.json
{
"name": "vue-event-bulletin",
"version": "1.0.0",
"description": "Demo application for the scotch.io tutorial",
"main": "server.js",
"author": "Ryan Chenkie, Jason Lam",
"license": "MIT",
"dependencies": {
"bootstrap": "^3.3.6",
"ejs": "^2.3.4",
"express": "^4.13.3",
"morgan": "^1.6.1",
"vue": "^1.0.10",
"vue-resource": "^0.1.17"
},
"devDependencies": {
"body-parser": "^1.14.1",
"errorhandler": "^1.4.2",
"method-override": "^2.3.5",
"morgan": "^1.6.1"
},
"scripts": {
"start": "node server.js"
}
}
これだけの記述で本当に Node.js のサーバーが出来上がるんでしょうか？
やってみましょう。
$ docker build --tag bulletinboard:1.0 .
[+] Building 1.8s (11/11) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 31B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:current-slim 1.6s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [1/5] FROM docker.io/library/node:current-slim@sha256:5cf3448bd86f70498653613372b862564b3b8415e11a86c6ea229939bb3dba4a 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 518B 0.0s
=> CACHED [2/5] WORKDIR /usr/src/app 0.0s
=> CACHED [3/5] COPY package.json . 0.0s
=> CACHED [4/5] RUN npm install 0.0s
=> CACHED [5/5] COPY . . 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:76842586e41e7c4ebb4fb0887ffb007c000927df33b4d1e6e81c61b0d8acdc27 0.0s
=> => naming to docker.io/library/bulletinboard:1.0 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
こんなんでホントに出来上がっているのかな？ 起動してアクセスしてみます
$ docker run --publish 8000:8080 --detach --name bb bulletinboard:1.0
f6edeb612848a13949e9ba2d1b2251fd048fa2132f2de858468c0d27b8a28e05
ブラウザで //localhost:8000/ にアクセス
ちゃんとアクセスでき、適当な値を入力をして Submit すると右エリアに反映します。
今回導入した WEB アプリは、動くとはいえ商品として成立するレベルのものではないのは明らかですが、それでもたったあれだけのファイル（と記述とコマンド実行）で環境構築できるのは驚きました。
次回は Dokcer を操作するうえで必要なコマンドをまとめてみたいと思います。
参考 URL
https://docs.docker.jp/get-started/part2.html
今回のネタはほとんどここからです
https://matsuand.github.io/docs.docker.jp.onthefly/engine/scan/
docker build した時の最後のメッセージの意味
Docker で LAMP 環境を作ろう 第 1 回
Docker で LAMP 環境を作ろう 第 2 回
Docker で LAMP 環境を作ろう 第 3 回