フロントエンド開発初期段階ではバックエンドがいないため、疑似的なバックエンドを用意したくなります。
React、json-server、http-proxy-middlewareの組み合わせで、疑似バックエンドとの通信をテストしたときのメモです。localhostでjson-serverを動かしています。
やりたいこと
・全ユーザ取得
→ /service/api/userにget
・名前、年齢を入力し、addボタンを押すと、json-serverにユーザ登録
→ /service/api/userにpost
・ラジオボタンでユーザを選択し、deleteボタンを押すと、json-serverからユーザ削除
→ /service/api/user/:idにdelete
・json-serverから応答を待っている間はloading...を表示
json-serverについて
json-serverを動かすためにソースコードを書く必要はありません。データを格納するdb.json、パス設定のroutes.jsonを用意するだけになります。
db.jsonは、存在しない場合はjson-server起動時に自動で下記が作成されます。
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
この状態でhttp://localhost:port/posts/1 にgetすると下記が返ってきます。
{ "id": 1, "title": "json-server", "author": "typicode" }
http://localhost:port/posts/ にgetした場合はpostsの全データが返ってきます。
配列データの場合はidが必須になっています。
GET /posts →全取得
GET /posts/1 →指定したidだけ取得
POST /posts →追加
PUT /posts/1 →指定したidを変更
PATCH /posts/1 →指定したidの一部更新？
DELETE /posts/1 →指定したidを削除
今回はget, post, deleteだけ使いました。
json-serverの設定
インストール
npm install json-server
初期状態ではdb.jsonは空にしました。
{
"user": []
}
json-serverはパスに"/"があっても認識してくれないため、下記のようにパスの変換をする必要があります。
ここの"/user"は、上記db.jsonの"user"と名前を一致させる必要があります。
{
"/service/api/user": "/user",
"/service/api/user/:id": "/user/:id"
}
db.jsonとroutes.jsonをReactのルートディレクトリに格納します。
/
+public/
+src/
|
+db.json
+routes.json
+package.json
下記のようにpackage.jsonに起動処理を追加します。
"json-server": "json-server --watch db.json --routes routes.json --port 5000"
もしdelayをさせたい場合は--delay 1000のようにオプションを指定します。
json-serverの起動は下記です。
npm run json-server
http-proxy-middleware
Reactが/service/api/userにアクセスしようとしてもReact Routerが受け取ってしまうので、proxyを立てて、proxyがjson-serverに転送するようにします。
今回はhttp-proxy-middlewareを使いました。
インストール
npm install http-proxy-middleware
setupProxy.jsを/src直下に格納します。
/
+public/
+src/
| +setupProxy.js
|
+db.json
+routes.json
+package.json
json-server起動時に指定したポート5000を設定します。
これでReactが/service/apiにアクセスするとjson-serverに転送されます。
module.exports = function (app) {
app.use(
createProxyMiddleware(
["/service/api"],
{
target: "http://localhost:5000",
changeOrigin: true,
}
)
);
app.listen(3000);
};
なお、npm run build、serve -s buildした場合はhttp-proxy-middlewareは動きませんので、特にコード修正することなく、本番環境ではproxyなしで動作できます。
動作させる
ユーザを追加していくとdb.jsonにユーザが追加されていきました。
{
"user": [
{
"name": "Taro",
"age": 30,
"id": 1
},
{
"name": "Hiroko",
"age": 20,
"id": 2
},
{
"name": "Koichi",
"age": 40,
"id": 3
},
{
"name": "Hide",
"age": 21,
"id": 4
}
]
}
また、json-server起動時に--delay 2000のようにすることでレスポンスを遅くし、レスポンスが遅い場合にloading...が表示されることも確認できました。
全体図
