Nuxt.js + Expressでローカルサーバ構築

今回のゴール

• ローカルに擬似的なサーバ（スタブ）を用意して特定のリクエストで(以下イメージではPOST)レスポンスが返ってくるようにします。

ローカルサーバを使いたい局面

• フロントとバックエンドでチームが別れて開発されているような現場でバックエンド側の実装ができていないときにフロント側からリクエストを飛ばしてデータが返却されるようなスタブが欲しい！！そんなとき。

expressの導入

• create-nuxt-appで最初から入れることもできます

既存のアプリケーションにexpressを導入したい場合

npm install express --save

サーバ用のファイルをプロジェクトフォルダ直下へ作成

• まずは必要なフォルダ・ファイルの作成をします。
• プロジェクトフォルダ直下へapiフォルダを作ってその中にserver.jsを作成、続いてmockフォルダをserver.jsと同じ階層に作成しprofileフォルダを作ります（profileフォルダ内に実際にレスポンスとして返すjsonを格納します）

//プロジェクトフォルダ直下にて
$ mkdir api
$ cd api
$ touch server.js
$ mkdir mocks
$ cd mocks
$ mkdir profile
$ cd profile
$ touch test.json

完成した階層

プロジェクトフォルダ
┗api
  ┗server.js//サーバの設定を書くファイル
  ┗mocks
    ┗profile
      ┗test.json//実際に返して欲しいデータを定義するファイル

• ちょっとわかりにくいので画像も

server.jsを編集

• 以下のように記述

server.js

const express = require('express')
const app = express()

app.post('/test', (req, res) => res.json(require('./mocks/profile/test.json')))
//あとは欲しいだけ上記の1行とjsonファイルを追加するだけ

app.listen(8080, () => console.log('API Mock Server is running'))

• expressをappとして用意し、8080ポートをlistenしています。
• app.post(リクエスト,(req, res) => res.(require(返却して欲しいデータを記述したjson)))とすることで最初のゴールのようなレスポンスが返却されます。
• あとは欲しいだけ上記の1行とjsonファイルを追加するだけ

jsonサンプル

• 内容はなんでもいいのですがゴールの動画で食わしたjsonは以下です。

test.json

[
  {
    "header": "テスト テスト",
    "test1": "test",
    "test2": "テスと",
    "test3": "1",
    "items": []
  }
]

package.jsonに起動コマンドを追加する

package.json

"scripts": {
  //省略
  "mock:api": "node api/server.js"//追加
}

• これでnpm run mock:apiでローカルサーバが起動できます。

起動とcurlでPOST

• 起動

npm run mock:api

• POST(別のターミナルを開いて)

curl -XPOST http://localhost:8080/test

• これでゴールのようなレスポンスが返ってきているはずです

所感

• nuxt.jsのフロントに特化した開発担当になった場合は使えるかな、と。以上です。