App Engine での JSON Server 活用術

14495 ワード
AppEngine フロントエンド AppEngine テキストリンク

はじめに

App Engine とは Google が提供する PaaS です。
JSON Server とは「マジで３０秒未満で REST API のモックが作れちゃうツール」です。

対象読者

App Engine を使ってフロントエンド開発している方に向けた記事です。
フロントエンドとバックエンドを並行開発していて、バックエンドの実装を待たずに通信まわりも実装したい方に向けています。

フロントエンドとバックエンドの並行開発あるある

フロントエンドとバックエンドを並行して開発していると、いろいろと弊害がありますよね？

  • バックエンドの実装が終わるまで、通信まわりの処理が実装できない
  • バックエンドから取得するデータ（リソース）は、 json ファイルから読み込むようにする
  • リソースを json ファイルから読み込むようにもしないで、ハードコーディングしてしまう
  • etc...

JSON Server はこんなことができます

ローカル環境でフロントエンドアプリの通信まわりの処理を確認できるのはもちろん、 JSON Server を App Engine にデプロイすれば App Engine 上で以下のことをプレビューできます。

  • リソースの取得
  • リソースの作成
  • リソースの更新
  • リソースの削除

JSON Server はなかなか優秀なモックなのです。

Getting started JSON Server

JSON Server とは何か簡単に紹介します。(詳しくは説明しないよ、ごめんね)

（１）まずは以下のコマンドを実行して、 JSON Server をインストールします。

$ npm install -g json-server

（２）db.json というファイルを作成して、中身は以下のようにします。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

（３）以下のコマンドを実行して、 JSON Server を実行します。

$ json-server --watch db.json

（４）JSON Server が起動したら、以下の URL にアクセスしてみます。

（５）以下の内容がブラウザに表示されます。

[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

（６）http://localhost:3000/ にアクセスするとリソースの一覧が見れます。

JSON Server を App Engine にデプロイする

npm init

まずは、以下のコマンドを叩いてスケルトン（？）を作成します。

$ mkdir mock-server
$ npm init -y
$ npm install json-server

ファイル構成

まず、以下のファイル構成になるように、いくつかファイルを作成します。

  • app.yaml (* New)
  • dispatch.yaml (* New)
  • index.js (* New)
  • package.json
  • routes.json (* New)
  • db
    • comments.json (* New)
    • posts.json (* New)
    • profile.json (* New)

ファイルの中身は以下のようにします。

app.yaml
service: json-server
runtime: nodejs10
dispatch.yaml
dispatch:
  - url: "*/api/*"
    service: json-server
index.js
const jsonServer = require('json-server')
const routes = require('./routes.json')

const comments = require('./db/comments.json')
const posts = require('./db/posts.json')
const profile = require('./db/profile.json')

const source = {...comments, ...posts, ...profile}

const server = jsonServer.create()
const router = jsonServer.router(source)
const rewriter = jsonServer. rewriter(routes)
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(rewriter)
server.use(router)

server.listen(process.env.PORT || 3000, () => {
  console.log('JSON Server is running')
})
package.json
{
  "name": "mock-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
routes.json
{
  "/api/*": "/$1"
}
db/comments.json
{
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ]
}
db/posts.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ]
}
db/profile.json
{
  "profile": { "name": "typicode" }
}

デプロイ

$ gcloud app deploy
$ gcloud app deploy dispatch.yaml

おわりに

記述中