Contents

Docker Node.js 環境

Docker で Node.js 用の開発環境を構築してみます。
今回は docker-compose を使用します。

環境

Node.js
NPM
MySQL5.7

下記の構成としています。

root
└ docker
   └ db
└ myapp
└ docker-compose.yml

root

└ docker

└ db

└ myapp

└ docker-compose.yml

docker-compose.yml 作成

今回は node12 のイメージをそのまま使用します。

version: '3'

services:
  app:
    image: node:12
    environment:
      - TZ=Asia/Tokyo
      - DEBUG=app:*
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./myapp:/app
    working_dir: /app

version: '3'

services:

app:

image: node:12

environment:

- TZ=Asia/Tokyo

- DEBUG=app:*

tty: true

ports:

- '3000:3000'

volumes:

- ./myapp:/app

working_dir: /app

コンテナ起動

$ docker-compose up -d

1	$ docker-compose up -d

Express 雛形作成

express-generator をインストールして、実行するか、npx を使用して実行することができます。

express-generator をインストールする場合

Express の雛形作成用に express-generator をインストールします。

$ npm install express-generator -g

1

$ npm install express-generator -g

Express 実行
Jade は Pug に改名されたことから pug 指定が推奨されています。

$ express --view=pug myapp

1	$ express --view=pug myapp

下記が作成されます。

public/
public/javascripts/
public/images/
public/stylesheets/
public/stylesheets/style.css
routes/
routes/index.js
routes/users.js
views/
views/error.pug
views/index.pug
views/layout.pug
app.js
package.json
bin/
bin/www

public/

public/javascripts/

public/images/

public/stylesheets/

public/stylesheets/style.css

routes/

routes/index.js

routes/users.js

views/

views/error.pug

views/index.pug

views/layout.pug

app.js

package.json

bin/

bin/www

API での使用など view が不要な場合は --no-view 指定で express を実行します。

$ express --no-view myapp

1	$ express --no-view myapp

下記が作成されます。

public\
public\javascripts\
public\images\
public\stylesheets\
public\stylesheets\style.css
routes\
routes\index.js
routes\users.js
public\index.html
app.js
package.json
bin\
bin\www

public\

public\javascripts\

public\images\

public\stylesheets\

public\stylesheets\style.css

routes\

routes\index.js

routes\users.js

public\index.html

app.js

package.json

bin\

bin\www

npx を使用する場合

npx を使用することで express-generator をグローバルにインストールしなくても生成できます。

$ npx express-generator --view=pug myapp

1

$ npx express-generator --view=pug myapp

package.json ファイルの確認

express-generator で生成された package.json ファイルを確認します。

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "core-js": "^3.6.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

{

"name": "myapp",

"version": "0.0.0",

"private": true,

"scripts": {

"start": "node ./bin/www"

"dependencies": {

"cookie-parser": "~1.4.4",

"core-js": "^3.6.5",

"debug": "~2.6.9",

"express": "~4.16.1",

"http-errors": "~1.6.3",

"morgan": "~1.9.1",

"pug": "2.0.0-beta11"

}

依存関係のインストール

$ npm install

1	$ npm install

core-js 3 未満は非推奨のため core-js 3 にアップグレードします。

$ npm install core-js@^3

1	$ npm install core-js@^3

バージョン確認

$ node -v

$ node -v

v12.18.2

$ npm -v

$ npm -v

6.14.5

Node.js の稼働

$ npm start

# またはデバッグのためログをオンにする場合
$ DEBUG=myapp:* npm start

$ npm start

# またはデバッグのためログをオンにする場合

$ DEBUG=myapp:* npm start

起動コマンドを docker-composer に追加

起動時に npm install と npm start を実行するコマンドを追加してみます。

version: '3'

services:
  app:
    image: node:12
    environment:
      - TZ=Asia/Tokyo
      - DEBUG=app:*
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./myapp:/app
    working_dir: /app
    command: >
      bash -c 'npm install &&
      npm start'

version: '3'

services:

app:

image: node:12

environment:

- TZ=Asia/Tokyo

- DEBUG=app:*

tty: true

ports:

- '3000:3000'

volumes:

- ./myapp:/app

working_dir: /app

command: >

bash -c 'npm install &&

npm start'

DB を docker-compose.yml に追加

version: '3'

services:
  db:
    image: mysql:5.7
    container_name: mysqldb2
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
    - ./docker/db/data:/var/lib/mysql
    - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306

  app:
    image: node:12
    environment:
      - TZ=Asia/Tokyo
      - DEBUG=app:*
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./myapp:/app
    working_dir: /app

version: '3'

services:

db:

image: mysql:5.7

container_name: mysqldb2

environment:

MYSQL_ROOT_PASSWORD: root

MYSQL_DATABASE: database

MYSQL_USER: docker

MYSQL_PASSWORD: docker

TZ: 'Asia/Tokyo'

command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

volumes:

- ./docker/db/data:/var/lib/mysql

- ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf

- ./docker/db/sql:/docker-entrypoint-initdb.d

ports:

- 3306:3306

app:

image: node:12

environment:

- TZ=Asia/Tokyo

- DEBUG=app:*

tty: true

ports:

- '3000:3000'

volumes:

- ./myapp:/app

working_dir: /app

DB 接続

Sequelize で接続します。

インストールから設定、操作については下記を参照ください。
http://vistylee.com/sequelize/

CORSを許可する場合

app.js に下記を追加します。

// CORSを許可する
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// CORSを許可する

app.use(function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

next();

});

エラーハンドリングを行う場合

app.js に下記を追加します。

// 404をキャッチしてエラーハンドラに転送
app.use(function(req, res, next) {
  next(createError(404));
});

// エラーハンドラ
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // エラーページをレンダリングする
  res.status(err.status || 500);
  res.render('error');
});

// 404をキャッチしてエラーハンドラに転送

app.use(function(req, res, next) {

next(createError(404));

});

// エラーハンドラ

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

// エラーページをレンダリングする

res.status(err.status || 500);

res.render('error');

});

まとめ

起動時に npm install と nmp start を行うようにする場合は docker-compose.yml に command を追加して行っています。今回は、Dockerfile を作成しないので、docker-compose.yml に記載しました。
Docker Compose を使わない場合は、Node.js Web アプリケーションを Docker 化する　で簡潔にまとめられています。

参考リンク

Node.js Web アプリケーションを Docker 化する
 Node.js ウェブ・アプリの Docker 化
 Express application generator
Dockerfile のベストプラクティス
 Dockerfile リファレンス
 Docker Compose
Express でのテンプレート・エンジンの使用

Docker で Node.js 環境を構築する

Docker Node.js 環境

環境

docker-compose.yml 作成

コンテナ起動

Express 雛形作成

express-generator をインストールする場合

npx を使用する場合

package.json ファイルの確認

依存関係のインストール

バージョン確認

Node.js の稼働

起動コマンドを docker-composer に追加

DB を docker-compose.yml に追加

DB 接続

CORSを許可する場合

エラーハンドリングを行う場合

まとめ

参考リンク

返信を残すコメントをキャンセル

Docker Node.js 環境

環境

docker-compose.yml 作成

コンテナ起動

Express 雛形作成

express-generator をインストールする場合

npx を使用する場合

package.json ファイルの確認

依存関係のインストール

バージョン確認

Node.js の稼働

起動コマンドを docker-composer に追加

DB を docker-compose.yml に追加

DB 接続

CORSを許可する場合

エラーハンドリングを行う場合

まとめ

参考リンク

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル