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というクラウドアプリケーションプラットフォームにファイルをアップするのでその前提で説明します。
Expressをインストール
参考⇒[Node.js]node.jsのインストールとnpmの使い方の簡単な説明
npmでpackage.jsonのdependenciesに追加します。
npm install express --saveExpress application generator（今回は使用しません）
⇒Express application generator
ジェネレータを使用すると簡単にexpressの設定が行えます。
サーバモジュールのインストール
Expressで使用する基本的なWeb機能用のモジュールをインストール。
npm install body-parser --save
npm install cookie-parser --save
npm install swig --saveapp.jsの設置
名前は何でもいいのですがサーバ起動するための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の参考⇒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を使用してミドルウェアの関数をマウントしています。
staticファイル（jsとかCSSとかhtmlから呼び出すファイル）のファイルパスもこちらで指定できます。
var routes = require('./routes/index');
app.use('/', routes);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を書き換えます。
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/