56
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

docker+Node.js(Express)の最小構成プロジェクトを作成する

Last updated at Posted at 2018-10-19

目的

Node.jsのWebフレームワークExpressを、docker上のnode.jsを使ってホストマシンからアクセスできるようにする

環境

macOS High Sierra 10.13.6
Docker version 18.06.1-ce
docker-compose version 1.22.0
node v9.11.1
npm 6.4.1

完成品

この記事で作ったソースは以下のgithubにあげています
https://github.com/ryo-ohnishi/node_express

作成

Expressの雛形作成

Expressの雛形を生成してくれるパッケージ express-generator を使って雛形を作成します。
まずはexpress-generatorをインストール。

project/
mkdir generator
cd generator
npm install express-generator

続いて myapp という名前のプロジェクトを作成します。
今回テンプレートエンジンはejsを指定しました。ここは好みですのでお好きなものを使ってください。 ※デフォルトはjade

project/
cd generator
./node_modules/.bin/express --view=ejs ../myapp

これで project/myapp にExpressの雛形が作成されました。
express-generatorは雛形作成のために必要で、今後必要ないので削除します。

project/
rm -rf generator

ローカルで起動してみる

まずはローカルでExpressが起動するかみてみましょう。
必要パッケージをインストール後、起動してみます。

project/
cd myapp
npm install
npm start

以下のURLにアクセスすると、画像のようなページが表示されます。
http://localhost:3000/

スクリーンショット 2018-10-11 18.32.23.png

終了する場合は control+c を押してください。

尚、先ほど実行した npm start ですが、 project/myapp/package.json で指定されているscriptが呼び出されています。

project/myapp/package.json
  "scripts": {
    "start": "node ./bin/www"
  },

dockerファイル作成

dockerで使用するファイルを作っていきます。
Dockerfileだけでも作成できますが、今後のnginxやmysqlを拡張していくのでdocker-composeも使用します。
docker部分は以下のようなファイル構成になります。

project/
.
├── docker
│   └── construct_app
│       └── Dockerfile-app
├── docker-compose.yml
└── myapp

各ファイルの中身を見ていきます。

Dockerfile

project/docker/construct_app/Dockerfile-app
# ベースイメージを指定
FROM node:10.12

# 環境変数設定
ENV NODE_ENV="development"

# 作業ディレクトリ作成&設定
WORKDIR /src

アプリケーション用のDockerfileなので、Dockerfile-appという名前で作成しています。
各コマンドの解説は以下になります。

FROM node:10.12
node.jsのイメージを取得しています。バージョンは作成時の最新バージョンの10.12です。

ENV NODE_ENV="development"
環境変数「NODE_ENV」を指定しています。開発環境なのでdevelopment

WORKDIR /src
作業デレィクトリを作成しています。今回はルートディレクトリに「/src」というディレクトリを作成し、そこにソースを置きます。

docker-compose.yml

project/docker-compose.yml
version: '3'
services:
  app:
    build:
      context: ./docker/construct_app      # Dockerfile保存場所
      dockerfile: Dockerfile-app    # Dockerfileファイル名
    image: n-app                  # イメージ名
    container_name: n-app         # コンテナ名
    ports:                          # ポート接続
      - 3000:3000
    volumes:                        # mount workdir
      - ./myapp:/src
    command: [sh, -c, npm install && npm start]

version:
使用するdocker-composeのバージョンです。最新版の3を使用
services:
appという名前でサービス名を指定しています。
build:
「context:」でDockerfileの保存場所を相対パスで指定し、「dockerfile:」でDockerfileのファイル名を指定しています。
image:
Dockerfileビルド後に作成されるイメージ名を指定しています。
container_name:
docker-compose実行後に作成されるコンテナ名を指定しています。
ports:
ポート接続を指定しています。3000ポートでアクセスした場合、コンテナ内の3000ポートにアクセスするようになっています。
volumes:
dockerfileで作成した「/src」に「myapp」フォルダをマウントしています。
command:
sh -cを指定することで複数コマンドを実行できるようになっています。
実行場所ですがWORKDIRで/srcを指定しているので、コンテナ内の/srcでコマンドが実行されます。
まず、/srcにあるpackage.jsonに対してnpm installが行われます。その後に「npm start」が実行されます。

docker-compose起動

以下のコマンドでdocker-composeを起動します。
--buildオプションをつけることで、ビルドしながら起動させます。

docker-compose up --build

以下のURLにアクセスすると、画像のようなページが表示されます。
http://localhost:3000/

スクリーンショット 2018-10-11 18.32.23.png

終了する場合は control+c を押してください。

56
56
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?