Docker上にExpressの最初構成を整えるまでの全て

[これ](http://qiita.com/jumtech/items/9f8cb9a2c015cd490cbf)の続き

# 環境
- OS X El Capitan 10.11.6
- Docker 17.03.0-ce-mac2
- Express 4.15.2

# 前回までのディレクトリ構成
```
jumpage/
  ├ app/
  |  ├ node_modules/
  |  ├ index.js
  |  └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile
```

# 手順
## Expressのプロジェクトを新規作成する
- ホスト側で実行

```sh
cd jumpage
sh scripts/docker_run.sh
```

- コンテナ側で実行

```sh
cd app
# 前回作ったソースファイルを削除
rm -rf ./*
# express-generatorを使って新規作成
express jumpage
```

## JadeをPugにする
- 2017年3月時点では、express-generatorではテンプレートエンジンのデフォルトがJadeだった
- Jadeは、[Jade Software Corporation](https://www.jadeworld.com/solutions-for/logistics/)と名前が被ったので、Pugにリネームされた
    - [リネームについての議論](https://github.com/pugjs/pug/issues/2184)
- Pugという名前に慣れるために、以下の記事を参考に、JadeをPugにする
    - [jadeはpugにリネームされたのでexpressでpugを使う
](http://qiita.com/tdkn_/items/bbb859ec59a02574715a)
- 手順
    - app.js内のテンプレートエンジンの指定をjade->pugに変更
    - views/以下のjadeファイルの拡張子をpugに変更
    - package.jsonのjadeを削除
    - コンテナ側で以下を実行
```
cd jumpage
npm install --save pug@2.0.0-beta11
# package.jsonのその他のモジュールをインストール
npm install
```

## コンテナ内からサーバーを立ち上げてみる

```
npm start
```

- `node ./bin/www`が実行される
    - ホスト側ブラウザでhttp://localhost:8080/ を叩くと、"Welcome to Express"が表示される
    - http://localhost:8080/users を叩くと、"respond with a resource"が表示される

## 自動生成されたファイル群を眺める

- 新しいディレクトリ構成

```
jumpage/
  ├ app/
  |  └ jumpage
  |    ├ app.js
  |    ├ bin
  |    |  └ www
  |    ├ public
  |    |  ├ images/
  |    |  ├ javascripts/
  |    |  └ stylesheet/
  |    ├ routes
  |    |  ├ index.js
  |    |  └ users.js
  |    ├ views
  |    |  ├ index.pug
  |    |  ├ layout.pug
  |    |  └ error.pug
  |    ├ node_modukes
  |    └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile
```

- app.jsがやっていることを理解する

```app.js
// モジュールを読み込む
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// ./routes以下のファイルを読み込む
var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// テンプレート格納ディレクトリを教える
app.set('views', path.join(__dirname, 'views')); // __dirnameは、このファイルのパス
// テンプレートエンジンをpugに指定
app.set('view engine', 'pug');

// faviconを使うときはコメント外す
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
// devモードでログを吐き出す
app.use(logger('dev'));
// リクエストのbodyをパースする設定
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// cookieパースの設定
app.use(cookieParser());
// 静的ファイル(js, img, css)の格納ディレクトリを教える
app.use(express.static(path.join(__dirname, 'public')));

// ルーティングの設定(./routes/index.jsなどに飛ばす)
app.use('/', index);
app.use('/users', users);

// 上のルーティングに当てはまらなかった場合、404を設定
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// エラーぺージの出力
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 : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// 別ファイルから読み込めるようにする
module.exports = app;
```

- bin/wwwがやっていることを理解する

```js:www
#!/usr/bin/env node

/**
 * 依存モジュールを読み込む
 */

var app = require('../app'); // 上で読んだ、app.js
var debug = require('debug')('jumpage:server');
var http = require('http');

/**
 * envファイルがあれば、そこからポート番号を設定する(デフォルトは3000)
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * HTTPサーバを生成
 */

var server = http.createServer(app);

/**
 * 設定したポート番号でリクエストを受け付ける
 */

server.listen(port);
// エラー時はonError()を呼ぶ
server.on('error', onError);
// listen成功時はonListening()を呼ぶ
server.on('listening', onListening);

/**
 * 正しいポート番号かfalseを返す
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * エラー処理(適切なログを吐き出す)
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * 正常系処理(適切なログを吐き出す)
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}
```

- package.jsonを読む
    - `npm start`時は、scripts.startのコマンドが実行される

```package.json
{
  "name": "jumpage",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "express": "~4.14.1",
    "pug": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.2"
  }
}
```


# 参考記事
- [express実践入門](https://gist.github.com/mitsuruog/fc48397a8e80f051a145)
    - 内容が実践的ですごい

# ここまでのディレクトリ構造(再掲)
```
jumpage/
  ├ app/
  |  └ jumpage
  |    ├ app.js
  |    ├ bin
  |    |  └ www
  |    ├ public
  |    |  ├ images/
  |    |  ├ javascripts/
  |    |  └ stylesheet/
  |    ├ routes
  |    |  ├ index.js
  |    |  └ users.js
  |    ├ views
  |    |  ├ index.pug
  |    |  ├ layout.pug
  |    |  └ error.pug
  |    ├ node_modukes
  |    └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile
```
https://github.com/jumtech/jumpage