フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。

今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。

json-server

まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。

いつか機をみて使ってみたい。

が、今回は上記の通り不採用した。

app/api

次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。

ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。

これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。

実装

npm i next-swagger-doc
npm i  swagger-ui-react

まずはインストールする。

ちなみにバージョンは下記の通り。

"next": "14.2.3",
"next-swagger-doc": "^0.4.0",
"react": "^18",
"swagger-ui-react": "^5.17.14"

lib/swagger.tsに下記をコピペする。

import { createSwaggerSpec } from "next-swagger-doc";

export const getApiDocs = async () => {
  const spec = createSwaggerSpec({
    apiFolder: "app/api", // define api folder under app folder
    definition: {
      openapi: "3.0.0",
      info: {
        title: "Next Swagger API Example",
        version: "1.0",
      },
      components: {
        securitySchemes: {
          BearerAuth: {
            type: "http",
            scheme: "bearer",
            bearerFormat: "JWT",
          },
        },
      },
      security: [],
    },
  });
  return spec;
};

※以降先頭行がファイル名になっている。

app/api-doc/react-swagger.tsx

'use client';

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

type Props = {
  spec: Record<string, any>,
};

function ReactSwagger({ spec }: Props) {
  return <SwaggerUI spec={spec} />;
}

export default ReactSwagger;

app / api - doc / page.tsx;

import { getApiDocs } from "@/lib/swagger";
import ReactSwagger from "./react-swagger";

export default async function IndexPage() {
  const spec = await getApiDocs();
  return (
    <section className="container">
      <ReactSwagger spec={spec} />
    </section>
  );
}

app/api/hello/route.ts

/**
 * @swagger
 * /api/hello:
 *   get:
 *     description: Returns the hello world
 *     responses:
 *       200:
 *         description: Hello World!
 */
export async function GET(_request: Request) {
  // Do whatever you want
  return new Response('Hello World!', {
    status: 200,
  });
}

これで完成したけど、これもじっと考えてみると、普通にAPI作っているのと何ら変わらないのではないか。

ということに気が付いた。

この労力を使うのではバックエンドサーバー作ったほうがよっぽど早い気がする。

ということで不採用にした。

@stoplight/prism-cliを使うことにした。

結果的に、@stoplight/prism-cliを使うことにした。

これは作成されたSwaggerからモックサーバーを立ち上げてくれるというもの。

どうせAPI仕様書を作ってからバックエンドサーバーを作るので、それをSwaggerで作るという風にすればいい。

そうすればバックエンドを作る前にその仕様書からモックサーバーを立ち上げることができるので、業務ストップがなくなる。

使い方は、

npm install @stoplight/prism-cli

でインストールし、package.jsonに起動の記述を作成する。

"swaggerMock": "prism mock sample.yml"

これで、ルートにsample.ymlを作成するれば、それがモックサーバーとして起動される。