カテゴリー
JSON ServerをCLIコマンドを使わずTypescript＆node.jsからサーバーを立てるやり方
※ 当ページには【広告/PR】を含む場合があります。
2022/05/01
CLI有りのJSON Serverの利用手順をおさらい
$ yarn global add 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 --watch db.json
$ curl -XGET http://localhost:3000/posts/1
{ "id": 1, "title": "json-server", "author": "typicode" }
TypescriptでJSON Serverをカスタマイズしてみる
$ yarn add json-server -S
$ yarn add @types/json-server -D
server.ts
import jsonServer from 'json-server';
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const endpoint = 'http://localhost:3000';
server.use(middlewares);
server.use(router);
server.listen(3000, () => {
console.log(`JSON Server is now running at ${endpoint}!`);
});
dist/server.js
$ tsc
$ ls dist/
server.d.ts server.js server.js.map
server.js
$ node dist/server.js
JSON Server is now running at http://localhost:3000!
自作JSON Serverにミドルウェアを仕込む
server.tsexpress.js
$ yarn add express @types/express -D
middlewaremiddlewaretimeStamp.ts
import { Request, Response, NextFunction, RequestHandler } from 'express';
export function timeStamp(): RequestHandler {
return (req: Request, res: Response, next: NextFunction) => {
console.log('Now the time is ', Date.now());
//👇最終的にJSON Serverルーターに到達させるのに必要なnext
next();
}
};
server.ts
import jsonServer from 'json-server';
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
//👇ミドルウェアの呼び出し
import { timeStamp } from './middleware/timeStamp';
const myTimeStamp = timeStamp();
const endpoint = 'http://localhost:3000';
server.use(middlewares);
//👇ミドルウェアを利用する位置に注意
// (必ずrouterよりも前の位置で呼び出し)
server.use(myTimeStamp);
server.use(router);
server.listen(3000, () => {
console.log(`JSON Server is now running at ${endpoint}!`);
});
$ node dist/server.js
JSON Server is now running at http://localhost:3000!
Now the time is 2022-04-29T03:16:21.828Z
GET /posts/1 200 11.158 ms - 85
Typescriptでのルーターレスポンス出力の変形
router(ルーター)router.render
router.render = (req, res) => {
res.jsonp({
body: res.locals.data
})
}
router.render = (req, res) => {
res.status(500).jsonp({
error: "error message here"
})
}
@types/json-serverrouter.render
import jsonServer from 'json-server';
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const endpoint = 'http://localhost:3000';
server.use(middlewares);
server.use(router);
//👇routerを強制的にanyへアップキャストする
(router as any).render = (req: any, res: any) => {
res.jsonp({ data: res.locals.data })
}
server.listen(3000, () => {
console.log(`JSON Server is now running at ${endpoint}!`);
});
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー