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をインストール
Node.jsはインストール済の前提です。
参考⇒[Node.js]node.jsのインストールとnpmの使い方の簡単な説明
npmでpackage.jsonのdependenciesに追加します。
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.jsのroutesで呼び出されている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.htmlをviewsフォルダを作成し中に入れます。
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/
[…] Expressを使用してサーバを構築する […]