Node.js+Expressを使用してサーバを構築する 1



Node.js,Express環境でAurelia.jsを動かしてみる–その3

Node.js,Express環境でAurelia.jsを動かしてみる–その1
Node.js,Express環境でAurelia.jsを動かしてみる–その2
その1とその2でAurelia.jsをローカル環境で実行し、本番用のバンドルファイルを作成するところまでやりました。

今回はNode.jsのWebアプリケーションフレームワークであるExpressを実装してみたいと思います。
最終的にHerokuというクラウドアプリケーションプラットフォームにファイルをアップするのでその前提で説明します。
参考⇒heroku

Expressをインストール

参考⇒http://expressjs.com/

サーバにアップした後にnpmで展開したいため、package.jsondependenciesに追加します。

npm install express --save

Express application generator(今回は使用しません)

Express application generator

ジェネレータを使用すると簡単にexpressの設定が行えます。
今回は使用しませんが便利なので紹介だけしておきます。

サーバモジュールのインストール

Expressで使用する基本的なWeb機能用のモジュールをインストール。

npm install body-parser --save
npm install cookie-parser --save
npm install swig --save
body-parser
フォーム等データ受け渡し
cookie-parser
クッキー取り扱い
swig
テンプレートエンジン表示用

app.jsの設置

名前は何でもいいのですがサーバ起動するためのjsファイルを作成します。

下記今回作成したapp.js全文

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var swig = require('swig');

var app = express();

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
};

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(allowCrossDomain);
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '/')));

var routes = require('./routes/index');
app.use('/', routes);

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

var server = app.listen(app.get('port'), function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

app.jsの簡単な解説

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var swig = require('swig');

var app = express();

各モジュールを呼び出してexpress実行環境にしています。
新しいモジュールでpathがありますがこれはnode.jsの「ファイルパスを扱うユーティリティ」になります。

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
};

CORSの設定になります。
CORSの参考⇒HTTP access control (CORS)|MDN

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

テンプレートエンジンの設定です。ここではviewsフォルダにテンプレートがおかれることが指定されています。

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(allowCrossDomain);
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '/')));

app.useを使用してミドルウェアの関数をマウントしています。
先ほど作成したCORSの設定もここで呼び出しています。
staticファイル(jsとかCSSとかhtmlから呼び出すファイル)のファイルパスもこちらで指定できます。
今回はルートのままにしました。

var routes = require('./routes/index');
app.use('/', routes);

expressによるルーティングの設定です。
pathで指定されたindex.jsをモジュールとして読み込んでいます。(index.jsは後で作ります)
'/' にアクセスがあった場合に呼び出されます。

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

var server = app.listen(app.get('port'), function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

サーバ設定です。

index.jsの設置

app.jsroutesで呼び出されているindex.jsを作成します。ただindex.htmlが表示できれば良いので単純なものにします。

index.js

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

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

module.exports = router;

index.htmlを移動

app.jsで表示で使用するファイル置き場をviewsフォルダに指定したので、index.htmlviewsフォルダを作成し中に入れます。
注意:gulp watch等で使用されるindex.html'/'のものになります。gulpの設定は次回やりますので動作だけするようにしたい場合はindex.htmlを両方に設置してください。
gulpのpathも書き換える場合は下記のファイルのindexへのpathを書き換えます。

build/tasks/serve.js

gulp.task('serve', ['build'], function(done) {
  browserSync({
    online: false,
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      index: "views/index.html",
      middleware: function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
      }
    }
  }, done);
});

起動

node app.js

コマンドラインから上記を実行するとサーバが立ち上がります。

ためしに下記アドレスにブラウザからアクセスしてみて、Aureliaが表示されれば完成です。

http://localhost:5000/


Leave a comment

One thought on “Node.js+Expressを使用してサーバを構築する