gulpでwebAPIを備えた仮サーバを立てる #gulp

問題提起

最近は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

{
  "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

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 -g
npm install

されていること。

gulp devServerと叩いて、http://localhost:8000/を見る。

alertでHello worldが表示されていれば成功。

developers toolを見ても、ちゃんと通信があったことがわかる。

ついでに、http://localhost:3000/sampleと打ってもjsonが返ってくることが確認できる。