フロントエンドのテックリードのみゅーとん(@_mew_ton)です。

弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用しています。

このプロジェクトでは、APIコール部分の実装について、以下のようなルールを設けています。

ブラウザからは、 Nuxt3 の ServerRoutes (BFFサーバ) へアクセスする
BFFサーバから、APIサーバへアクセスし必要な情報を取得する
BFFサーバにて、ブラウザで表示するためのデータ構造に変換する (不要な情報を削ぎ落とす)

このプロジェクトでE2Eテストを導入するためBFFサーバのモックを準備しました。

今回は、Nuxt3 の ServerRoutes 機能を利用してモックサーバを作る方法を紹介します！

TL;DR

Nuxt3 は API の実装に server/api 配下にソースを配置する
Nuxt3 が利用しているサーバエンジン Nitro の設定を変更することで、 APIの実装対象となるディレクトリを変更することができる

Nuxt3 の ServerAPI について

Nuxt3 のサーバサイドでは Nitro エンジンが使われています。 Nuxt3 のサーバサイドAPIの生成もNitroの機能の一つとして提供されています。 github.com

また、Nuxt3 では、 server/api 配下にコードを配置することで、サーバサイドのAPIを実装することが出来ます。

例として、server/api/health.get.ts に以下のようなコードを実装します。

import { version } from '~~/package.json'

export default defineEventHandler(async (event) => {
  const health = await $fetch('https://sample.hacomono.jp/health')

  return {
    ...health,
    version
  }
})

たったこれだけで、 /api/health に対して GETリクエストが送信できるようになります。

詳細は公式リファレンスを参照してください。 v3.nuxtjs.org

なぜモックサーバが必要か

主な理由としては

APIを用意せずに、フロントエンドの開発に着手できる
APIを用意せずに、E2Eテストの準備が容易になる

などがあります。

また、Nuxt3のBFFサーバをモック化するにあたり、わざわざ server/api をモック化するのは、以下の理由があります

Nuxt3 の Server Side Rendering の Fetch 時に参照できる
モックサーバに対してtypecheckができ、通常のBFFサーバと同じレスポンスの型を維持できる

モックサーバ化の手順

モックサーバを作成する手順を紹介します

1. モックサーバ用のコードを実装する

/server/api の配下と同じ構成のファイルを別のフォルダ (例: /test/server/api )に作成します

例えば /src/server/api が以下のような構成の場合・・・ - /src/server/api/ - /users - index.get.ts - index.post.ts - [userId].get.ts - [userId].put.ts

モックサーバ用のコードは以下のように構成します

/test/server/api/
- /users
  - index.get.ts
  - index.post.ts
  - [userId].get.ts
  - [userId].put.ts

実装するコードも以下のようになります。 json で必要なデータを用意して、それを返すだけの実装をします。

import users from '~~/mock/users.json'

export default defineEventHandler(async (event) => {
  return users
})

2. Nitro の設定を変更する

nuxt.config.ts に以下のおまじないを追加します

hooks: {
    'nitro:config': (config: NitroConfig) => {
      // nitro の option 側に設定する場合、 scanDirs が nuxt 固有の設定を含んでしまうため、 mock モードではそれをここで上書きする
      // isDebugMode は TEST=true で true を返却するメソッドがどこかで定義されてる
      if (isDebugMode()) {
        const testServer = resolve(__dirname, './test/server')

        config.srcDir = testServer
        config.scanDirs = [testServer]
      }
    }
  },

isDebugMode メソッドは、内容は何でも良いです。例えば、環境変数 TEST=true の場合等に true になればOKです。