問題提起
最近はSinglePageApplicationが流行っているような気がします。
個人的は、SPAの特徴として
- ServerSideとClientSideを切り離して開発できる。
- 動作がブラウザ側で行われるので、サーバーの処理・通信が減る。
- ClientSideの設計がちょっと難しくなる。
といった感じで、今からWebアプリを作るならSPAにしない理由はないかなと思っています。
さて、その場合にClientSideだけで仮サーバーを立てて動作検証したいですよね。
webAPIとかのモックも用意したいですよね。
ということで、gulpで仮サーバーを立てるサンプルを用意してみました。
構成
$ tree .
.
├── ajax.js
├── gulpfile.js
├── index.html
├── package.json
└── webAPI
└── sample_get.json
package.json
package.json
{
"name": "gulp_devServer_sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "uryyyyyyy",
"license": "MIT",
"devDependencies": {
"gulp": "~3.8.10",
"gulp-webserver": "~0.9.0",
"easymock": "~0.2.9"
}
}
- gulp-webserver
- 静的ファイルサーバを起動する。
-
python simplehttpserverみたいなもんだと思ってる。
- easymock
- APIサーバを立てる。
- リクエストがファイル名に一致したデータを返す。詳しくは後述
gulpfile.js
gulpfile.js
var gulp = require('gulp');
gulp.task('easymock', function () {
var MockServer = require('easymock').MockServer;
var options = {
keepalive: true,
port: 3000,
path: './webAPI',
};
var server = new MockServer(options);
server.start();
});
gulp.task('devServer', ['easymock'], function() {
var webserver = require('gulp-webserver');
gulp.src('./')
.pipe(webserver({
livereload: false,
directoryListing: false,
open: false,
proxies: [{
source: '/webAPI',
target: 'http://localhost:3000/'
}]
}));
});
- easymockタスク
- webAPIサーバを立てる。
- 今回の例だと
localhost:3000で、webAPIフォルダを対象にする。
- devServerタスク
- easymockタスク後に実行される。
-
./フォルダを対象にして起動する。 -
webAPIパスへのアクセスをlocalhost:3000へ中継するリバースプロキシも用意する。。
index.html / ajax.js
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./ajax.js"></script>
</html>
ajax.js
$.ajax({
type: "GET",
url: "webAPI/sample",
success: function(res){
alert( "ajax success!: " + res.msg );
}
});
説明は不要。最小サンプル
webAPI
easymockの対象フォルダ。
sample_get.json
{"msg": "Hello, World!"}
easymockは、「[リクエストパス]_[リクエストタイプ]」でマッチングするらしく、
sample_get.jsonだと、/sampleへのGETでのアクセスにこのjsonデータを返すという意味になる。
起動してみる
事前に
npm install gulp -gnpm install
されていること。
gulp devServerと叩いて、http://localhost:8000/を見る。
alertでHello worldが表示されていれば成功。
developers toolを見ても、ちゃんと通信があったことがわかる。
ついでに、http://localhost:3000/sampleと打ってもjsonが返ってくることが確認できる。