Nuxt.jsのserverMiddlewareでモックアップのAPIを設置

GitHub:nuxtjs-servermiddleware-api

Nuxt.jsのserverMiddlewareを活用すると、Expressなどのサーバ用フレームワークを追加しなくても簡単に応答するサーバを立ち上げられます。
Nuxt.js環境で開発している場合には手軽でとても便利です。

モックアップのAPIを設置することで、このような効果が期待できます

  • 新規サービスなど、既存のDBが無い開発もデータを入れた状態で行える
  • バックエンドにAPIを用意してもらえるまで手を止めなくてよい

設置方法

Nuxt.JS開発環境へ、このようなJavaScriptを設置します。
場所は、既存の pages middleware など予約されたディレクトリでなければどこでもOKです。

/api/sample.js

export default function (req, res) {
  // req は Node.js の HTTPリクエストオブジェクトです
  console.log(req.url)

  // res は Node.js の HTTPレスポンスオブジェクトです
  res.writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/plain' });
  res.write('SAMPLE');
  res.end();

  // next は 次のミドルウェアを呼び出すための関数です。
  // あなたのミドルウェアが最後でない場合、関数の最後で next を呼び出すのを忘れないでください!
  // next();
}

nuxt.config.jsserverMiddlewareの項目を追加し、設置したjsファイルと任意のパスを指定します。

nuxt.config.js

export default {
  ...
  serverMiddleware: [
    { path: '/api/sample', handler: '~/api/sample.js' },
    { path: '/api/news', handler: '~/api/news.js' },
  ],
  ...
}

これで、/api/sampleへアクセスするとSAMPLEと表示されます。
resとしてJSONを返すようにしたらAPIのように使うことができます。

Vuexactionaxiosから呼ぶときも、このようにルート相対パスでOK。

/store/sample.js

...
const actions = {
  async getSample({ commit }, payload) {
    const api = '/api/sample';
    const params = {
      page: payload.page || 1,
      filter: JSON.stringify(payload.filter),
      max: 10,
    };

    const data = await this.$axios.get(api, { params }).then(res => res.data.response);

    commit('setRecord', data.records);
    commit('setTotal', data.total);
    commit('setPage', data.page);
  },
}
...

APIがわりに使いたいときは 最後にnuxt()しない

テンプレートの最後にある nuxt();がそのまま残っていると
nuxtのres.setHeaderと自分で書いたresの処理が重複し
このようなエラーになるので、削除しておきます。

ERROR Cannot set headers after they are sent to the client

環境変数でaxiosのbaseURLを設定

serverMiddlewareで設定した参照先は、
デフォルトでルートがhttp://localhost:3000になっています。

そのため、何もしないと
localhostではないアドレスからルート相対パスで参照すると
http://localhost:3000/api/xxxを探しに行ってリンク切れになります。

対策として
axiosbaseURL.envから設定できるようにしておくと
storeでのaxiosからの参照はルート相対パスに統一しつつ、環境に応じてパスを調節できて便利です。

.env

# axios endpoint foo BFF
AXIOS_BASE_URL=http://192.168.11.26:8000

nuxt.config.js

export default {
  ...
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    baseURL: process.env.AXIOS_BASE_URL,
  },
  ...
}

クラウドでデプロイしたいときも、このように環境変数を設定すると参照できます。

ダミーのニュースJSONを返すAPI

GitHubへサンプルをおいてます。
ページネーションなどのパラメータに応じてJSONを返すAPIのソースをごらんいただけます。

関連記事