Skip to content

1.x tutorial mock server

Jump to bottom Edit New page
fkei edited this page Dec 20, 2013 · 1 revision

モックサーバー

searchモジュールでは、直接github.comにアクセスしましたが、サーバーサイドが同時に開発中だと通信データの変更やURIの変更 と言った連携で、開発スピードが遅くなってしまいます。

そこでBeezでは、開発サーバーにMockデータ通信機能を装備してこの問題を解決しています。

あらかじめMockデータを入れておけば、開発中にサーバーサイドの作業状況に関わらず開発サーバーを使用してフロントエンドのみで完結した作業ができるようになるので、開発スピードが遅くなりません。

前提

  • ポート 1109
    • HTMLファイルを含む静的ファイルを配信
  • ポート 1121
    • モックデータを配信

Mockサーバー起動

チュートリアルの最初で開発サーバを起動したと思いますが、その起動メッセージをも見ると、Mock Serverが起動していると思います。

....
## 	Express server listening on port:1121
## 		Mock Server start [ success ]
## 		compress: [on]
## 		Please try to access. 
## 			http://0.0.0.0:1121
....

アクセス

http://0.0.0.0:1121/ にアクセスしてください。

下記のようなデータが取得できます。これがMockとして設定しているJSONデータになります。

{
  "title": "/ url access",
  "data": "1384141017989"
}

用途別のアクセスURL

ブラウザから通信するサーバは、HTMLを配信するサーバとXHRを利用した別のWebサーバの2種類がありますが、Beezの開発サーバーでは以下のようにそれぞれのサーバーに通信します。

  • HTMLを配信するサーバにXHRをする場合は、「プロキシアクセス」で通信を行います
  • 別のWebサーバーにXHRする場合は、「直接アクセス」で通信を行います。

プロキシアクセス

Mockサーバは、1121ポートでListenしていますが、URIのパス名の先頭に**/p/**を付けることによって1109ポート経由でもプロクシ経由でモックデータを取得出来ます。

例

下記の２つのURLは同じデータを返します。

モックサーバ直接アクセス (port : 1109) URL : http://0.0.0.0:1121/now プロクシ経由アクセス (port: 1121) URL : http://0.0.0.0:1109/p/now

フォーマット

http://ドメイン:ポート/**p**/{モックURI}

http://0.0.0.0:1109/p/ にアクセスしてください。

下記のように直接Mockサーバ(1121ポート)にアクセスするの同じようにMockデータが取得できます。

{
  "title": "/ url access",
  "data": "1384140448301"
}

直接アクセス


Mockサーバーへ直接アクセスしてモックデータを取得します。 http://0.0.0.0:1121/にアクセスしてください。

下記のようなデータが取得できます。

{
  "title": "/ url access",
  "data": "1384140206799"
}

CORS

２つのアクセス方式の使い分けは、実際に運用する際の構成(主な要因としてクロスドメイン)によるでしょう。

開発サーバーのCORS設定

開発サーバーは、設定ファイルでHTTP Response headerをカスタマイズする事ができます。

====

conf/local.json

{
    "app": { // Beez Foundation Server configure
        "stat": { // Static Server configure
            "compress": true, // gzip
            "port": 1109, // listen port
            "header": { // Add response header
                "Access-Control-Allow-Origin" : "*",
                "Access-Control-Allow-Methods": "GET, OPTIONS",
                "Access-Control-Allow-Headers": "*"
            },
            "include": { // Setting in the configuration file of a different environment
                "path": "./local",
                "from": null
            }
        },
        "mock": { // Mock Server configure
            "use": true, // use mock?
            "compress": true, // gzip
            "port": 1121, // listen port
            "header": { // Add response header
                "Access-Control-Allow-Origin" : "*",
                "Access-Control-Allow-Methods": "GET, OPTIONS",
                "Access-Control-Allow-Headers": "*"
            },
            "include": { // Mock data folder setting
                "path": "./mockdata",
                "from": null
            }
        }
....

app.stat.header

開発サーバ(port : 1109)から返すHTTP response header をこの設定に追加することで、カスタマイズ可能です。

app.mock.header

モックサーバ(port : 1121)から返すHTTP response header をこの設定に追加することで、カスタマイズ可能です。

他にも、GZIP圧縮の有無やポート番号の変更なども設定ファイルから設定可能になっています。

github.com からのデータでモックデータを変更する

モックデータ 作成

チュートリアルで通信しているgithub.comのURLをモックサーバから取得できるように変更します。

モックデータ(mockdata)の定義ファイルを作成

$ mkdir -p conf/mockdata/github/search/
$ touch conf/mockdata/github/search/repositories.json

conf/mockdata/github/search/repositories.json

今回は、logcafe.jsの検索結果をモックデータに設定して http://0.0.0.0:1121/search/repositories?q=logcafe.jsにアクセスしてみてください。

プロキシアクセス : http://0.0.0.0:1109/p/search/repositories?q=logcafe.js

内容は以下になります。

{
    "/search/repositories?q=logcafe.js": {
        "get": {
            "total_count": 1,
            "items": [
                {
                    "id": 9767865,
                    "name": "logcafe.js",
                    "full_name": "CyberAgent/logcafe.js",
                    "owner": {
                        "login": "CyberAgent",
                        "id": 865695,
                        "avatar_url": "https://2.gravatar.com/avatar/73f72c8e64d283b853992af010fd4d37?d=https%3A%2F%2Fidenticons.github.com%2F085d37131f1fcaddad020b3465b82e8b.png&r=x",
                        "gravatar_id": "73f72c8e64d283b853992af010fd4d37",
                        "url": "https://api.github.com/users/CyberAgent",
                        "html_url": "https://github.com/CyberAgent",
                        "followers_url": "https://api.github.com/users/CyberAgent/followers",
                        "following_url": "https://api.github.com/users/CyberAgent/following{/other_user}",
                        "gists_url": "https://api.github.com/users/CyberAgent/gists{/gist_id}",
                        "starred_url": "https://api.github.com/users/CyberAgent/starred{/owner}{/repo}",
                        "subscriptions_url": "https://api.github.com/users/CyberAgent/subscriptions",
                        "organizations_url": "https://api.github.com/users/CyberAgent/orgs",
                        "repos_url": "https://api.github.com/users/CyberAgent/repos",
                        "events_url": "https://api.github.com/users/CyberAgent/events{/privacy}",
                        "received_events_url": "https://api.github.com/users/CyberAgent/received_events",
                        "type": "Organization",
                        "site_admin": false
                    },
                    "private": false,
                    "html_url": "https://github.com/CyberAgent/logcafe.js",
                    "description": "LogCafe.js is a logging framework to support browser application logging. (amd-style and node.js support)",
                    "fork": false,
                    "url": "https://api.github.com/repos/CyberAgent/logcafe.js",
                    "forks_url": "https://api.github.com/repos/CyberAgent/logcafe.js/forks",
                    "keys_url": "https://api.github.com/repos/CyberAgent/logcafe.js/keys{/key_id}",
                    "collaborators_url": "https://api.github.com/repos/CyberAgent/logcafe.js/collaborators{/collaborator}",
                    "teams_url": "https://api.github.com/repos/CyberAgent/logcafe.js/teams",
                    "hooks_url": "https://api.github.com/repos/CyberAgent/logcafe.js/hooks",
                    "issue_events_url": "https://api.github.com/repos/CyberAgent/logcafe.js/issues/events{/number}",
                    "events_url": "https://api.github.com/repos/CyberAgent/logcafe.js/events",
                    "assignees_url": "https://api.github.com/repos/CyberAgent/logcafe.js/assignees{/user}",
                    "branches_url": "https://api.github.com/repos/CyberAgent/logcafe.js/branches{/branch}",
                    "tags_url": "https://api.github.com/repos/CyberAgent/logcafe.js/tags",
                    "blobs_url": "https://api.github.com/repos/CyberAgent/logcafe.js/git/blobs{/sha}",
                    "git_tags_url": "https://api.github.com/repos/CyberAgent/logcafe.js/git/tags{/sha}",
                    "git_refs_url": "https://api.github.com/repos/CyberAgent/logcafe.js/git/refs{/sha}",
                    "trees_url": "https://api.github.com/repos/CyberAgent/logcafe.js/git/trees{/sha}",
                    "statuses_url": "https://api.github.com/repos/CyberAgent/logcafe.js/statuses/{sha}",
                    "languages_url": "https://api.github.com/repos/CyberAgent/logcafe.js/languages",
                    "stargazers_url": "https://api.github.com/repos/CyberAgent/logcafe.js/stargazers",
                    "contributors_url": "https://api.github.com/repos/CyberAgent/logcafe.js/contributors",
                    "subscribers_url": "https://api.github.com/repos/CyberAgent/logcafe.js/subscribers",
                    "subscription_url": "https://api.github.com/repos/CyberAgent/logcafe.js/subscription",
                    "commits_url": "https://api.github.com/repos/CyberAgent/logcafe.js/commits{/sha}",
                    "git_commits_url": "https://api.github.com/repos/CyberAgent/logcafe.js/git/commits{/sha}",
                    "comments_url": "https://api.github.com/repos/CyberAgent/logcafe.js/comments{/number}",
                    "issue_comment_url": "https://api.github.com/repos/CyberAgent/logcafe.js/issues/comments/{number}",
                    "contents_url": "https://api.github.com/repos/CyberAgent/logcafe.js/contents/{+path}",
                    "compare_url": "https://api.github.com/repos/CyberAgent/logcafe.js/compare/{base}...{head}",
                    "merges_url": "https://api.github.com/repos/CyberAgent/logcafe.js/merges",
                    "archive_url": "https://api.github.com/repos/CyberAgent/logcafe.js/{archive_format}{/ref}",
                    "downloads_url": "https://api.github.com/repos/CyberAgent/logcafe.js/downloads",
                    "issues_url": "https://api.github.com/repos/CyberAgent/logcafe.js/issues{/number}",
                    "pulls_url": "https://api.github.com/repos/CyberAgent/logcafe.js/pulls{/number}",
                    "milestones_url": "https://api.github.com/repos/CyberAgent/logcafe.js/milestones{/number}",
                    "notifications_url": "https://api.github.com/repos/CyberAgent/logcafe.js/notifications{?since,all,participating}",
                    "labels_url": "https://api.github.com/repos/CyberAgent/logcafe.js/labels{/name}",
                    "releases_url": "https://api.github.com/repos/CyberAgent/logcafe.js/releases{/id}",
                    "created_at": "2013-04-30T09:22:37Z",
                    "updated_at": "2013-10-16T03:47:17Z",
                    "pushed_at": "2013-10-16T03:47:17Z",
                    "git_url": "git://github.com/CyberAgent/logcafe.js.git",
                    "ssh_url": "git@github.com:CyberAgent/logcafe.js.git",
                    "clone_url": "https://github.com/CyberAgent/logcafe.js.git",
                    "svn_url": "https://github.com/CyberAgent/logcafe.js",
                    "homepage": "",
                    "size": 190,
                    "stargazers_count": 3,
                    "watchers_count": 3,
                    "language": "JavaScript",
                    "has_issues": true,
                    "has_downloads": true,
                    "has_wiki": true,
                    "forks_count": 2,
                    "mirror_url": null,
                    "open_issues_count": 0,
                    "forks": 2,
                    "open_issues": 0,
                    "watchers": 3,
                    "default_branch": "master",
                    "master_branch": "master",
                    "score": 15.102792
                }
            ]
        }
    }
}

アクセスURLを変更

Model(s/search/model/search.js) のURL設定を確認して下さい。

SearchCollection

this.urlRoot + '/search/repositories';

this.urlRootとURI(文字列)で構成されているので、このthis.urlRootが上手く変更できればModelの取得先をモックデータに向けて変更できることがわかります。

urlRootは、明示的に設定指定していない限り、conf/local/develop.jsonの develop.extend.content.config["beez.core"].url.api と develop.requirejs.config["beez.core"].url.apiを設定すれば変更できます。

設定ファイルには、２箇所あります。extend配下とrequirejs配下になります。 extendについては後述しますので、同じ設定をしてください。

{
    "develop": { // enviroment name
        "entrypoint": "index/index", // setting of "data-main"
        "extend": { // Override Setting of requirejs
            "condition": {
                ....
            },
            // overwrite data
            "content": {
                "config": {
                    "beez.core": {
                        "url": {
                            // OSX 10.8 internet share mode
                            //"app":"http://192.168.2.1:1109/m/tutorial", // application server url

                            // 変更前
                            //"api":"https://api.github.com", // api server urlRoot (Backbone.Model#urlRoot)
                            // 変更後
                            "api":"http://0.0.0.0:1109/p", // api server urlRoot (Backbone.Model#urlRoot)

                            "base":"http://192.168.2.1:1109/m/tutorial/s", // require.js#data-main url
                            //"stat":"http://192.168.2.1:1109/m/tutorial/s", // static file server url (css|image|...)
                            "vendor":"http://192.168.2.1:1109/m/tutorial/vendor" // require.js or library url
                        }
                    }
                }
            }
        },
        // Setting require.js
        "requirejs": {
            "baseUrl": "/m/tutorial/s",
            "paths": {
                ....
            },
            "shim": {
                ....
            },
            "config": {
                // configuration information used by beez
                "beez.core": {
                    "url": {
                        //"app":"http://0.0.0.0:1109/m/tutorial", // application server url

                        // 変更前
                        //"api":"https://api.github.com", // api server urlRoot (Backbone.Model#urlRoot)
                        // 変更後
                        "api":"http://0.0.0.0:1109/p", // api server urlRoot (Backbone.Model#urlRoot)

                        "base":"http://0.0.0.0:1109/m/tutorial/s", // require.js#data-main url
                        //"stat":"http://0.0.0.0:1109/m/tutorial/s",// static file server url (css|image|...)
                        "vendor":"http://0.0.0.0:1109/m/tutorial/vendor" // require.js or library url
                    },
                    ....
                    }
                }
            }
        }
    }
}

アクセス

http://0.0.0.0:1109/m/tutorial/s/index/local.develop.html?#search にアクセスして、 テキストボックスに「logcafe.js」と入力して「検索」ボタンを押してください。モックサーバからデータが取得出来ているのが確認できます

Google Chrome の「ディベロッパーツール」等を使って接続先を確認して下さい。

Add a custom footer
Add a custom sidebar

Clone this wiki locally