エラーページの設定

app.jsのerror handlerの部分を以下のように編集します。

app.js

// error handler
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 : {};

  if(app.get('env') === 'development'){
    res.status(err.status || 500);
    res.render('error');
  } else {
    // render the error page
    res.status(err.status || 500);
    console.log(res.statusCode)
    if(res.statusCode == 404){
      return res.render('error/404');
    } else {
      return res.render('error/500')
    }
  }
});

views/errorディレクトリに「 404.ejs と 500.ejs 」のファイルを作成します。

views/error/404.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エラー</title>
  <style>
    h1{
      text-align: center;
    }
    p {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>404</h1>
  <p>Not Found</p>
</body>
</html>

views/error/500.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エラー</title>
  <style>
    h1{
      text-align: center;
    }
    p {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>500</h1>
  <p>Internal Server Error</p>
</body>
</html>

app.js の内容だと「 development 」だとエラーページを表示することができない為、環境変数に「 production 」を設定して確認する必要があります。

「 production 」に設定してエラーページを確認する

package.jsonを以下のように設定します。

package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node --env-file=conf/.env ./bin/www",
    "product": "node --env-file=conf/.env_product ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "^3.1.10",
    "express": "^5.0.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

exapp
- ... 中略 ...
- conf
  - .env
  - .env_product
- ... 中略 ...
- package.json

.env_productの内容を以下のようにします。

NODE_ENV="production"

以下のコマンドを実行すると.env_productを読み込んで、アプリが起動します。

npm run product

npm startで起動した場合は、.envを読み込み、「 development 」で起動します。

「 production 」、「 development 」どちらが設定されている確認するには、app.jsに、以下のように記述します。

アプリを起動したコマンドプロンプトに「 production 」、「 development 」のどちらかが表示されます。

console.log(app.get('env'));
module.exports = app; // 最終行