はじめに

今回はOpenAPIの仕様をもとに簡単にモックサーバーを構築できるPrismを試してみます。
以前、Visual Studio CodeにOpenAPI (Swagger) Editorを入れてYAMLを書く記事を公開しましたが、実際のプロジェクトではモックサーバーが必要になるケースが多いはずなので参考にしてみてください。

この記事ではテスト用のAPIの用意とPrismのインストール、動作確認まで行います。

バージョン情報

テスト用のAPI

今回は動作確認のため、公式で用意されているペットストアのOpenAPIを使用します。

Visual Studio Code（OpenAPI Swagger Editorの拡張機能をインストール済み）で確認してみるとこんな感じです。
①ペットの一覧取得、②ペットの作成、③ペットの詳細情報取得の３つです。

今回は①ペットの一覧取得を使って動作を確認していきます。
先にペットモデルのデータ形式を確認しておきましょう。
petstore.yamlのcomponents > schemasに定義してあります。

components:
  schemas:
    Pet:
      type: object
      required:
        - id
        - name
      properties:
        id:
          type: integer
          format: int64
        name:
          type: string
        tag:
          type: string
    Pets:
      type: array
      maxItems: 100
      items:
        $ref: "#/components/schemas/Pet"

PetモデルはintegerのID（id）とstringの名前（name）、stringのタグ（tag）の３つのプロパティを持つオブジェクトです。
一覧取得（Pets）の際はこれが配列に入る形になります。

Prismをインストール

ではPrismをインストールします。
リポジトリの参考箇所はこちらです。

https://github.com/stoplightio/prism?tab=readme-ov-file#installation-and-usage

npm install -g @stoplight/prism-cli
# OR
yarn global add @stoplight/prism-cli

動作確認

インストールが完了したら実際に動かしてみます。
先ほど作成（コピー）したYAMLファイルがあるディレクトリで、下記コマンドを実行します。

prism mock petstore.yaml

このようになれば起動成功です。

一覧取得のAPIをcurlで叩いてみます。

curl "http://127.0.0.1:4010/pets"

下記レスポンスが返ってきました。
idとnameとtagのオブジェクトが配列形式になっており、リクエストに成功しています。

[{"id":-9007199254740991,"name":"string","tag":"string"}]

下の画像はPrismの方でリクエストを受け取ったところからレスポンスを返すまでの出力です。
ステータスコード200で成功していることが分かります。

まとめ

OpenAPIの仕様書をもとにPrismでモックサーバーを構築してみました。
バックエンドとフロントエンドで開発環境が分かれている場合など、Prismを使えばフロントエンドの開発時に簡単にモックサーバーを起動して実際に確認しながら作業を進められるので効率が上がるかもしれません。
この記事が参考になれば幸いです。

最後まで読んでいただきありがとうございました！

✙

プラスジャムはWeb制作会社です。
ウェブサイト制作、システム開発、Webマーケティングなど、さまざまな課題解決やアイデアを具現化するWebソリューションを提案・提供しています。

noteでプラスジャムを見つけてくださった方は、お時間あればコーポレートサイトや他の記事もご覧いただければ幸いです。

＼コーポレートサイトはこちら／

＼関連記事はこちら／