Edited at

【初心者向け】Dockerで手軽にNode.js開発環境構築 (2)

More than 1 year has passed since last update.

前回【初心者向け】Dockerで手軽にNode.js開発環境構築 (1)


Node.js

サーバーサイド Javascript

[参考]

Node.js を5分で大雑把に理解する

基礎から学ぶNode.js:第1回 Node.jsとは


Express.js

シンプルな Web アプリケーションフレームワーク

Express - Node.js Web アプリケーション・フレームワーク

Version は 4.16.0 を使う

巷には Express 3 の情報が溢れているが(最近は4も増えてきた)

互換性がないので Express 3 系の記事は絶対鵜呑みにしてはいけない

結局上の公式リファレンスが最強だと思う


開発環境構築

普通に作ろうとすると

・Homebrew (Mac 用パッケージマネージャー)

・Nodebrew (Node.js のバージョン管理ツール)

・Node.js 本体

をインストールした後

npm (Node.js 用パッケージマネージャー)を用いて

Express などの必要なパッケージをインストール

みたいな手順を踏むため環境が汚れてしまう

そこで Docker の出番


ディレクトリ作成

プロジェクト名はなんでもいい

以下のようなディレクトリ構成にする

ターミナルで移動しやすい場所(ホームディレクトリの近くとか?)だと少し楽

MyApp

├─ node
│ ├─ Dockerfile
│ └─ .dockerignore
└─ docker-compose.yml


Dockerfile

公開されているイメージをそのまま使ってもいいが Dockerfile を作成してみる

Dockerfile とは Docker イメージの設計書のようなもの


Dockerfile

# ベースイメージを指定

# 今回は LTS の 8.9.4 にする
# alpine は 軽量の linux OS
FROM node:8.9.4-alpine

# node.js の環境変数を定義する
# 本番環境では production
ENV NODE_ENV=development

# 雛形を生成するのに必要なパッケージのインストール
RUN npm install -g express-generator@4.16.0

# ディレクトリを移動する
WORKDIR /app

# ポート3000番を開放する
EXPOSE 3000


[参考]

Dockerfile reference (公式)

Dockerfile リファレンス (日本語訳)

日本語訳は情報が古いので注意


Compose file


docker-compose.yml

version: '3'

services:
webserver:
build: node
image: node-express-dev:1.0
container_name: node
tty: true
volumes:
- ./node/app:/app
ports:
- "8080:3000"

services 以下にコンテナの情報を記述していく

webserver

Docker が構築する Network でのホスト名になる(任意の名前で良い)

例えばこの場合、別のコンテナから node に繋げたいときは http://webserver:3000 といった感じ

build

Dockerfile があるディレクトリを指定する。省略した場合は local または Docker Hub からイメージを取得する

image

イメージの名前を指定する

build の有無で意味が変わる

container_name

コンテナ名

tty

コンテナ内の標準出力とホストの出力を繋げるためのもの

docker run 時の -t オプションに対応

これがないとコンテナがすぐ終了してしまうため、基本的に true

volumes

ボリュームには2種類あるので気をつけること

この場合はコンテナのディレクトリをホスト(Mac)のディレクトリにマウントするという意味

現時点でホストには ./node/app というディレクトリは存在しないが

この状況で Compose を立ち上げると

ホストにディレクトリが生成され、コンテナ内のディレクトリとしてマウントされる

こうすることで VSCode などのエディタでホストのファイルを直接編集すれば

コンテナ内のファイルを編集したことになるので、開発がすごく楽になる

ports

この場合はコンテナのポートとホストのポートを繋げる役割

例えば http://localhost:8080 で node コンテナの 3000 番に繋がる

[参考]

Compose file version 3 reference


コンテナの起動

準備が整ったのでコンテナを立ち上げていく

docker-compose.yml が置いてあるディレクトリに移動する

cd MyApp

Dockerfile からイメージをビルド

$ docker-compose build

コンテナを生成し、今回はバックグラウンドで起動

$ docker-compose up -d

node ディレクトリの直下に app ディレクトリができているのが確認できる

MyApp

├─ node
│ ├─ app ←
│ ├─ Dockerfile
│ └─ .dockerignore
└─ docker-compose.yml

ちなみに上2つのコマンドを Docker Compose を使わないでやると次のようになる

$ docker build ./node -t node-express-dev:1.0

$ docker run -itd —-name node -v ~/MyApp/node/app:/app -p 8080:3000 node-express-dev:1.0


コンテナに接続

状態を確認

$ docker-compose ps

Name Command State Ports
--------------------------------------------------------
node node Up 0.0.0.0:8080->3000/tcp

Commandnode になっているのはベースイメージ由来のコマンド

このプロセスに attach しても REPL(Read eval print loop:対話的実行環境)に接続するだけでサーバを起動できない

ここでは別プロセスを立ち上げて接続するための docker exec コマンドを利用する

$ docker exec -it node /bin/sh

express-generator で雛形を作成する

# express -f --view=pug /app

-f オプションをつけることで

既にディレクトリが存在していても強制的に作成できる

必要なパッケージのインストール

# npm install

サーバーを起動

# npm start

ブラウザで http://localhost:8080 にアクセス

Welcome to Express!

確認ができたら Ctrl + C で終了

コンテナを抜ける

$ exit

コンテナを止める

$ docker-compose stop

次回からは start コマンドでコンテナを起動できる(コンテナ自体を作り直す場合は up コマンド)

$ docker-compose start

次は express のコード周りを見ていきます