![[PukiWiki]](https://www.masatom.in/pukiwiki/image/kinosite.png "[PukiWiki]"){kind=small}
JSONのmockサーバの構築メモ。 grunt-connect-proxy, grunt-stubbyを利用してAjax用のJSON（モックデータ）を取得する[grunt] ココ参考にさせてもらいました！！ありがとうございます。
npm install grunt-stubby --save-dev
mkdir -p grunt mkdir -p mocks/stubby/hoge
cat grunt/stubby.js
'use strict';
module.exports = function (grunt) {
grunt.config('stubby', {
stubsServer: {
// note the array collection instead of an object
options: {
callback: function (server, options) {
server.get(1, function (err, endpoint) {
if (!err) {
console.log(endpoint);
}
});
},
stubs: 3000,
tls: 8443,
admin: 8010,
location: '0.0.0.0',
persistent: true
},
files: [{
src: ['mocks/stubby/**/*.yaml']
}]
}
});
};
gruntから起動するため Gruntfile.js に
grunt.loadTasks('grunt');
と記述*1。
cat mocks/stubby/hoge.yaml
-
request:
url: ^/ajax/hoge/$
method: GET
response:
-
status: 200
headers:
content-type: application/json
file: mocks/stubby/hoge/get.json
cat mocks/stubby/hoge/get.json
{
"foo":"1",
"bar":"2"
}
grunt stubby
REST なクライアント*2やブラウザから
http://localhost:3000/ajax/hoge/
へアクセスするとJSONデータが取得できましたー。。
grunt serveで起動するために serveのタスクに追加します。
grunt.task.run([ 'clean:server', 'wiredep', 'concurrent:server', 'autoprefixer:server', 'connect:livereload', 'stubby', ←追加 'watch' ]);
https://github.com/masatomix/ui-router-sample/commit/1347af60619368d0eb34731e6d58cbc1ba61ce31
gruntが起動したWEBサーバから、Stubbyで起動したmockサーバにreverse proxyする設定を追加します。というのは、JavaScript?は基本的には別サーバのJSONにはアクセスできない*3つまりgruntのWEBサーバから落としてきたJavaScript?はgruntのJSONにしかアクセスできないので、Stubbyが動いてるmockサーバのJSONに直接アクセスすることはできません。従って、いったんgruntのWEBサーバにアクセスしてreverse proxyする必要があるわけです。
gruntのWEBサーバの /hoge/fuga.json -- proxy --> stubbyの /hoge/fuga.json
つまりこういうことです。
grunt-connect-proxyのめも - yamashiro0110の日記 ココを参考にさせてもらいました。ありがとうございます!!
npm install grunt-connect-proxy --save-dev
ココの下あたりに一行追加。
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
require('jit-grunt')(grunt, { の下あたりに、
configureProxies: 'grunt-connect-proxy',
を追加。
続いて connect.livereload.middleware あたりに以下を追加。あとproxiesの設定も追加。
// The actual grunt server settings
connect: {
options: {
割愛
},
proxies: [
{
// `localhost:9000/ajax`へのリクエストは`localhost:3000/ajax`へプロキシされるようになる
context: '/ajax/',
host: 'localhost',
port: 3000
}
],
// ↑このproxies配列追加
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
proxySnippet, ←ココ追加
connect.static('.tmp'),
... いろいろ書いてあったけど割愛。。。
];
}
}
},
... 以下省略。
最後に grunt serve で起動するためのserveのタスクに追加。
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'configureProxies', ←ココ追加。
'autoprefixer:server',
'connect:livereload',
'stubby',
'watch'
]);
});
grunt serve したあと、
http://localhost:9000/ajax/hoge/
へアクセスしてさっきのJSONデータが取れれば成功です。。
お疲れ様でした。
https://github.com/masatomix/ui-router-sample/commit/d48210149ddd407ab5bbd4d52b870957db2baea9 なんか勝手に整形されていろいろ差分出ちゃってるけどごめんなさいって感じ(´Д`;)。。
-
request:
url: ^/ajax/sample1/1234$ ←完全一致
method: GET
response:
-
status: 200
headers:
content-type: application/json
file: mocks/stubby/hoge/sample1.json
このファイルのJSONデータが返ります。
-
request:
url: ^/ajax/sample2/(([a-z]{3})-([0-9]{3}))$
method: GET
response:
-
status: 200
headers:
content-type: application/json
file: mocks/stubby/hoge/<% url[1] %>.json
たとえば、
/ajax/sample2/abc-123
というリクエストに対して、
mocks/stubby/hoge/abc-123.json
のJSONファイルを返す事ができます。
-
request:
url: ^/ajax/sample3/(([a-z]{3})-([0-9]{3}))$
method: GET
response:
-
status: 200
headers:
content-type: text/html
body:
URL0 [<% url[0] %>] <br />
URL1 [<% url[1] %>] <br />
URL2 [<% url[2] %>] <br />
URL3 [<% url[3] %>] <br />
たとえば、
/ajax/sample3/abc-123
というリクエストに対して、
URL0 [/ajax/sample3/abc-123] <br /> URL1 [abc-123] <br /> URL2 [abc] <br /> URL3 [123] <br />
というhtmlを返す事ができます。ファイル指定でなくて、データ自体を設定に書くこともできますね。ファイルを返すときにつかったプレースホルダはデータ自体にも使えるわけですね。
-
request:
url: ^/ajax/sample4/(([a-z]{3})-([0-9]{3}))$
method: GET
response:
-
status: 200
headers:
content-type: text/html
file: mocks/stubby/hoge/sample4.html
たとえば、
/ajax/sample4/abc-123
というリクエストに対して、固定でファイルを指定します。htmlファイル自体に、
URL0 [<% url[0] %>] <br /> URL1 [<% url[1] %>] <br /> URL2 [<% url[2] %>] <br /> URL3 [<% url[3] %>] <br />
このようにプレースホルダを指定しても正しく置換されました。プレースホルダは設定ファイル内でもつかえるし、その先のファイル内でもつかえるようですね。
npm install phantomjs npm install jasmine-core npm install karma npm install grunt-karma grunt karma
mockとProxy関連。
この記事は
現在のアクセス:4859
