フロントエンドのテックリードのみゅーとん(@_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
- /users
実装するコードも以下のようになります。 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です。
まとめ
今回は、Nuxt3 の API のモックサーバを実装する方法を紹介しました。
この記事は続き物で、次回あたりにこのモックサーバを使って E2E テストを実装する方法を紹介します。