うしこlog
公開: 2014/09/13

Node.jsでラズパイをWebサーバにする

今回の内容

 ラズベリーパイをWebサーバとして使うためにNode.jsをインストールし、その使い方を説明します。また、Node.jsのフレームワークであるExpressを使ってWebサーバの作成の流れを説明していきます。

ラズベリーパイ2をご利用の方

 ラズベリーパイ2を使用している方は、お手数ですが以下のページで、ラズパイ2でのNode.jsインストールについて説明しておりますのでご覧ください。

前回までの内容は?

 前回までで、ラズパイを使うための設定(OSのインストール,SSH等)をして、エアコンの操作や、Juliusによる音声認識、Apacheでのサーバの構築をラズパイ上で行ってきました。
前回までの内容が気になる方や、ラズベリーパイをもっと活用したい方 は、ぜひ以下の記事をご確認ください。

Node.jsの管理マネージャ

 Node.jsはバージョンアップがはやいため、nodebrewという管理マネージャをインストールしていきます。

 ※ラズパイ2を使用の方は、nodebrewを使用してnode.jsをインストールできないので、Node.jsでラズパイ2をWebサーバにするの記事をご覧ください。

 まずはアップデートをしておきます。

sudo apt-get update
sudo apt-get upgrade

 そしてnodebrewをインストールします。

curl -L git.io/nodebrew | perl - setup
nodebrewインストール
nodebrewインストール

 .bashrcに"export PATH=$HOME/.nodebrew/current/bin:$PATH"を追加します。 他に環境変数NODEBREW_ROOTのパスも追加しておきます。

vi .bashrc

[以下を追加]
export PATH=$HOME/.nodebrew/current/bin:$PATH
export NODEBREW_ROOT=$HOME/.nodebrew

 以下のコマンドで変更内容を適用します。

source .bashrc

Node.jsのインストール

 管理マネージャをインストールしたので、Node.jsをインストールします。
2014/8/18時点での安定版はv0.10.30でしたが、途中でインストールに失敗してしまいましたので、Node.jsで他の安定版を探し、v0.10.24をインストールすることにしました。

 以下のコマンドよりNode.jsをインストールします。

nodebrew install-binary v0.10.24

上記はバイナリ版のインストール方法であり、すぐにインストールが完了します。(バイナリ版を使わない場合、インストールまで2時間近くかかります)

 使うバージョンを以下のコマンドより指定します。これでnodeコマンドを使えるようになります。

nodebrew use v0.10.24

 また、インストールされているNode.jsのバージョン一覧は以下のコマンドより確認できます。

nodebrew list

 nodeコマンドが使えるかを確認しましょう。バージョンが表示されると思います。

node -v

 ついでにnpmコマンドが使えることも確認しておきます。npmは、Node.jsに関するパッケージのインストール等を管理するマネージャです。nodebrewをインストールしたときに使えるようになっています。

npm -v

フレームワークのインストール

 Node.jsで使うWebフレームワークであるexpressをインストールしていきます。(2014/09/01時点でexpress4がインストールされます)

 以下のコマンドよりexpressをインストールします。-gでクローバル環境でのインストールとなります。

npm install -g express
npm install -g express-generator

expressの使い方

expressで簡単なwebサーバを作成する

 expressを用いて簡単なwebサーバを作ってみます。

 まず、express用のディレクトリを作ります。

mkdir work

 作成したworkディレクトリに移動し、expressコマンドでejs(テンプレートエンジン)をインストールします。-eでejsを指定できます。今回はtestというプロジェクト名にします。コマンド実行後、testディレクトリがwork以下に作成されます。
ejsの詳しい説明と使い方はhira-Blogさんの「EJSに触れてみる」というページが分かり易いと思います。

express -e test
expressを使った例
expressを使った例

 図2のような結果が出力されるので、testに移動後、npm installをします。

cd test && npm install

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

DEBUG=test ./bin/www
または
npm start

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

nodejsを使ったwebサーバ
nodejsを使ったwebサーバ

 ところで、expressコマンドで作成されたファイルやディレクトリはどうなっているのでしょう。 expressで作成されたディレクトリやファイルを調べると表1のようになっていました。

ディレクトリおよびファイルの説明
ディレクトリ / ファイル説明
app.jsサーバの設定やビューエンジンの設定を行う
bin/このディレクトリ下には、サーバの作成と起動を行うwwwというファイルが存在する。このファイルをnode.jsで実行することでwebサーバが起動する
node_modules/依存するモジュールが格納されている
package.jsonパッケージ情報が記述されている
public/画像、スクリプト、スタイルシートなどの静的なファイルを格納する
routes/画面遷移の処理を行うスクリプトを格納する
view/ページのテンプレートを格納する

ブラウザにExpressと表示されるまで

wwwファイル

 wwwファイルは/bin/wwwに作成されます。wwwファイルを実行することで、サーバの起動を行っています。
3行目のapp = require('../app')で、app.jsを読み込んでいます。
7行目のapp.listen()によりサーバが起動し始めます。

#!/usr/bin/env node
var debug = require('debug')('test');
var app = require('../app');

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

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

app.js

 app.jsは、サーバの設定やビューエンジンの設定を行っています。
8行目routes=require('./routes/index')と、24行目のapp.use('/', routes)により、ルートで表示する内容は "./routes/index.js" が出力した内容となります。

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = 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');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
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 handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
module.exports = app;

index.js

 index.jsは./route/index.jsにあります。このファイルは先ほどのapp.jsと紐付されています。
5~7行で、ルート(http://[ラズパイIP]:3000/)にアクセスしたときの処理が記述されています。

 6行目のres.render('index', { title: 'Express' })により、テンプレートである"./view/index.ejs"を読み込みます。このとき'Express'という文字列をtitleとしてindex.ejsに渡しています。

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

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

module.exports = router;

index.ejs

 index.ejsは、図3で"Express"と表示するためのテンプレートであり"./view/index.ejs"にあります。このファイルは先ほどのindex.jsから使われます。

 4行目や8行目に記述されている<%= title %>により、titleの中身を使用することができます。titleの中身は、index.jsのrenderにより渡された"Express"という文字列となります。そのため、ブラウザに"Express"が表示されます。

<!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>
<< Apache2でラズパイをWebサーバに VPNでラズパイに接続するへ >>

Copyright © Usico All Right Reserved.