Help us understand the problem. What is going on with this article?

【初心者向け】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 のコード周りを見ていきます

yukin01
iOS → Firebase → インフラ/SRE 見習い
globis
グロービスは 1992 年の創業以来、社会人を対象とした MBA、人材育成の領域で Ed-Tech サービスを提供し、現在は日本 No.1 の実績があります。これらの資産と、さらに IT や AI を活用することで、アジア No.1 を目指しています。
http://www.globis.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away