NuxtのserverMiddlewareを利用して簡単なAPIを作成してみる

設定

まずは、serverMiddlewareを利用する為の設定を行います。 nuxt.config.jsに、APIを作成するファイルを登録します。今回はルートディレクトリからapiというディレクトリを作成し、mock.jsというファイルにAPIの処理を書いていきます。 APIのエンドポイントはhttp://localhost:3000/api/v1/mockに立たせる想定で設定を行います。

nuxt.config.js

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

APIを作成する

次にAPIの作成を行います。先程作成したapi/mock.jsファイルに処理を書いて行きます。 serverMiddlewareはExpressによる拡張も可能ですので、今回はExpressを使ってサクッと作成してみたいと思います。

$ npm install express

api/mock.js

import express from 'express'

const app = express()

// ルートパスにアクセスがあった時、'Hello World!'という文字列を返す
app.get('/', (req, res) => res.send('Hello World!'))

export default app

これで設定は完了です！

アクセスしてみる

では実際にAPIが作成されているか確認をしてみましょう。ローカルサーバーを立ち上げて、http://localhost:3000/api/v1/mockにアクセスし、'Hello World!'という文字列が表示されるか確認してみましょう。

作成したAPIから文字列が返され、ブラウザに表示されているかと思います。

まとめ

今回は本当にお試しのような形でのご紹介でしたが、この機能を使って実際にバックエンドとの中継点とするAPIを立てたり、開発途中のモックAPIとして機能させてみたりと、色々な使い方ができる機能だと思います。 Nuxt.jsを使っている方は是非１度試してみてはいかがでしょうか？

TOC

設定

APIを作成する

アクセスしてみる

まとめ