Raspberry Pi 3のnode.js上でExpress4からEJSを使う

Raspberry Pi 3のnode.js上で、Node.jsで使う MVCフレームワーク「Express」からExpressのテンプレートエンジン「EJS」を使います。

Raspberry Pi 3にExpress4のインストール

node.jsは「Raspberry Pi 3にNode.jsのインストール」ですでにインストールしました。Expressバージョン4を次の手順でインストールします。

$ npm install -g express

端末には次のように表示されます。

Express version 4 以降は「express-generator」をインストールすることで、 Web アプリケーションのテンプレートを生成できます。-gでクローバル環境でのインストールとなります。

$ npm install -g express-generator

端末には次のように表示されます。

ホームの下に、.nvmができました。このままだと、使えないので次のexportを.bash_profileファイルに作成して、node.jsのパスを通します。

.bash_profile
export PATH=/home/pi/.nvm/versions/node/v6.9.2/bin:$PATH
export NODE_PATH=/home/pi/.nvm/versions/node/v6.9.2/lib/node_modules

「nvm」と「npm」の違い
・nvm(Node Version Manager) ： Node.js 自体をバージョン管理するツール
・npm(Node Package Manager) ： Node.js で作られたパッケージモジュールを管理するツール。npmは Node.js をインストールすれば一緒にインストールされます

expressのEJSを用いてwebサーバの構築

expressを用いて簡単なwebサーバを作ってみます。テンプレートエンジンとしてEJSを使います。次のexpressコマンドを入力します。-eでテンプレートエンジンEJSが指定できます。今回はhelloというプロジェクト名にします。

$ express -e hello

次のような結果が出力され、helloディレクトリが作成されます。

  warning: option `--ejs' has been renamed to `--view=ejs'


   create : hello
   create : hello/package.json
   create : hello/app.js
   create : hello/public
   create : hello/routes
   create : hello/routes/index.js
   create : hello/routes/users.js
   create : hello/views
   create : hello/views/index.ejs
   create : hello/views/error.ejs
   create : hello/bin
   create : hello/bin/www
   create : hello/public/javascripts
   create : hello/public/stylesheets
   create : hello/public/stylesheets/style.css

   install dependencies:
     $ cd hello && npm install

   run the app:
     $ DEBUG=hello:* npm start

   create : hello/public/images

次に、「index.js」のコードを変更します。’TomoSoft’という文字列をtitleとしてテンプレートファイル「index.ejs」に渡します。

./routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'TomoSoft' });
});

module.exports = router;

次のコマンドで、フォルダ「hello」に移動後、npm installをします。

$ cd hello&& npm install

そして、以下のコマンドより実行します。

$ DEBUG=hello:* npm start

ブラウザを立ち上げて “http://[ラズパイIPアドレス]:3000” にアクセスすると、次のように、”TomoSoft”とブラウザに表示されます。

端末には次のように表示されます。

$ DEBUG=hello:* npm start

> hello@0.0.0 start /home/pi/node_ejs/hello
> node ./bin/www

  hello:server Listening on port 3000 +0ms
GET / 304 117.734 ms - -
GET /stylesheets/style.css 200 22.250 ms - 111
GET /favicon.ico 404 13.506 ms - 926

expressコマンドで作成されたファイル

expressコマンドで作成されたファイルの紐づけについて説明します。

./bin/www

app = require(‘../app’)で、app.jsを読み込んでいます。server.listen(port)によりサーバが起動し始めます。

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('hello:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

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

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
　　　　　　　・・・
　　　　　　　・・・

./package.json

npm は package.json という名前のファイルを作り、連携することでプロジェクト管理や、環境のセットアップを簡単に行うことができます.

{
  "name": "hello",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "ejs": "~2.5.2",
    "express": "~4.14.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}

./app.js

app.jsは、サーバの設定やビューエンジンの設定を行っています。ルートで表示する内容は “./routes/index.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');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

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

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

module.exports = app;

./routes/index.js

このファイルは先ほどのapp.jsと紐付されています。ルート（http://[ラズパイIP]:3000/）にアクセスしたときの処理が記述されています。res.render(‘index’, { title: ‘TomoSoft’ })により、テンプレートである”./view/index.ejs”を読み込みます。
このコードは上記で編集しました。

./routes/users.js

ユーザ管理を行う場合に使用します。

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

./views/index.ejs

このファイルはindex.jsから使われます。記述されている<%= title %>により、titleの中身を使用することができます。titleの中身は、index.jsのrenderにより渡された文字列”TomoSoft”となります。実行すると、ブラウザに”TomoSoft”が表示されます

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

./views/error.ejs

エラー用のテンプレートです。

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

./public/stylesheets/style.css

ブラウザに表示するときのスタイルシートを示します。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}