Nuxt.jsでAPIサーバーを建てる

趣旨

Nuxtの便利な機能を使ってAPIサーバーを建てます。
なお、筆者は初学者のため内容の正確性を保証できません。間違いの指摘やより良い方法、関連して知っておくと良いことなどありましたら、コメント頂けると幸いです。

Nuxtの公式ホームページ（https://nuxtjs.org/api/configuration-servermiddleware） を参考に書いていきます。

目標

あくまでAPIサーバーを動作させることが目的なので、ものすごく単純な/api/testにアクセスしてなにか適当な文字列を表示させるだけのものを作成します。

動作環境

• Nuxt.js - v2.5.0
• Express - 4.16.4

Expressでバックエンドを書く

プロジェクトフォルダ直下にapiフォルダとその内部にindex.jsを置きます。

project-name/
  ├api/
  │  └ index.js
  ├components
  ├layouts
  ︙ 省略

prefixをapiにしたい場合はフォルダー名をapiに統一する必要があるそうです。

そして、index.jsを記述していきます。

/api/index.js

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

app.get("/test", (req, res) => {
  res.send("API server works fine");
})

module.exports = {
  path: '/api',
  handler: app
}

Expressの詳細な仕様についてはこちらのリンクを参照してください。
https://expressjs.com/

serverMiddleware

APIサーバーの記述が終わったので、あとはNuxtのサーバー機能を利用して建てます。
nuxt.config.jsに以下の記述をします。

nuxt.config.js

module.exports = {
// ...前略
  serverMiddleware: ['~/api/index.js']
}

あとは、npm run devで実際に動かしてみてlocalhost:3000/api/testにアクセスした際にブラウザ上でAPI server works fineが表示されたら確認終了です。

個人的な懸念点

今回は単純化するためindex.jsにapiを記述しましたが、通常のケースだとファイルで分ける場合が多いと思われます。
その場合、例えば以下のディレクトリ構成時にusers.jsに変更を加えてもホットリロードされません。

api/
  └routes/
    └users.js
  └index.js

そのため、何度もnpm run devを繰り返し行っています。もし、なにか解決策等ございましたらコメント頂けると幸いです。