🐈

StoplightStudio + openapi2aspida + SwaggerでAPIクライアント自動生成とモックサーバー起動

2023/02/08に公開

Prisma

Swagger

Stoplight Studio

tech

この課題に取り組んだ背景

現在、弊社の自社開発でよく多様しているのが、フロントエンドはReact、バックエンドはnodejsを使用しREST API + SPAの構成でシステムを開発しています。
その際、フロントエンドとバックエンドでエンジニアがそれぞれいるのですが、同時に開発を進めようとすると、API仕様の認識のずれや、サーバーが開発途中だとフロント側のデータ取得・表示部分をどうしようかなどで悩むことがあります。
そこで今回はAPIの仕様書を簡単に作成できるSwaggerを使用し、そこから更にモックサーバーまで建てて、開発効率を上げていきたいと思います。

今回使用した技術・ツールたちの紹介

名前	用途
StoplightStudio	Open APIの定義書をGUIで作成するため
Swagger	モックサーバーを建てるため
openapi2aspida	API定義ファイルからtypescriptの型やAPIクライアントを生成するため

今回の開発の流れ

StoplightStudioを使用して、APIを設計する
上記で作成したAPI定義ファイル（yaml）からSwaggerとPrismでモックサーバーを建てる
API定義ファイルを元にopenapi2aspidaでtypescriptの型とAPIクライアントを自動生成する

1. StoplightStudioを使用して、APIを設計する

アカウントの作成とインストールがまだの人はインストールをする
homebrewだと以下コマンド
```
brew install --cask stoplight-studio
```
開発メンバーとゴリゴリAPIを設計していく。

github連携の機能があるので連携しておくとバージョン管理なり諸々便利

2. SwaggerとPrismでモックサーバーを建てる

こちらを参考にしました。

docker-compose up

3. openapi2aspidaで型定義とAPIクライアントを作成