OpenAPIを<a href="https://swagger.io/" target="_blank" rel="noopener noreferrer">Swagger</a>とか<a href="https://redocly.com/" target="_blank" rel="noopener noreferrer">Redoc</a>でブラウザに表示させながら、書き換えもしたいし、リアルタイムに変更を見たいし、さらにはHTMLを書き出したい時だってあるよね。 そんな時はこの構成でホットリロードとバンドルをしちゃえば運用コスト低めで叶えることができるよね。

tl;dr

はい、いきなり愚痴が出てしまいました。 そうなんです、OpenAPIをゼロから書く時って割とファイル量が多く、着手から10分後くらいには途方もなさを感じてメンブレ必至です。 既存APIの実装からOpenAPI形式で仕様を書き出すツール等ありますが、初期整備として仕様書を書く際はゼロから書かなければいけないケースが大半かと思います。 前述していますが、OpenAPIは細かい仕様を書くことができる。だからこそ、完成度の高い仕様書を作成するとなると必然的にファイル量は増えてしまいます。

ゼロから書いていくのは割と辛い。

何かしらの仕様に変更や誤りがあったり、単純に誤字していることに気が付いたり。 いざ実装を進めていると、細かいことにも気が付くようになり、多少なり仕様書を書き換えることがあります。 「仕様書を見ていつつも、書き換えもしたい」そんなニーズです。

ちょっと修正したい時だってある。

これはOpenAPIの強みの一つなので、僕にとってファイル分割は必ず採用したいものです。（というより、OpenAPIを一つのファイルで書ききるのは鬼の所業…。） そして、分割されたファイルを一つにバンドルしておきたい。一つのファイルにまとまっていると、何かと便利です。 例えば、<ul><li>ファイルのPath指定による<code>$ref</code>はSwaggerだと上手くいくが、Redocだと上手く参照できずエラーになる。</li><li>OpenAPIをHTMLにしてチーム内で見れるようにホスティングしたいが、分割されていると上手くHTML出力ができない。</li></ul>みたいなケース。（使っているツールに依る部分もあるかと思います。） こんなケースをカバーするためにも、一つのファイルになっていると恩恵を受けることがあります。

ファイル分割は絶対にしたい。でもバンドルもしたい。

OpenAPIに対する悩み

前置きが長くなってしまいました。さて、前述のお悩み解決に対処する方法です。 ポイントはズバリ二つ。<ol><li>ホットリロード</li><li>分割されたファイルのバンドル</li></ol>

以下の内容で構成していきます。今回はDockerでRedocとして表示させるので、Redocの公式イメージを使います。 <ul><li>Docker<ul><li><a href="https://hub.docker.com/r/redocly/redoc/" target="_blank" rel="noopener noreferrer">Redoc公式イメージ</a></li><li>OpenAPIを編集するための作業スペース</li><li>開発中に表示させて確認する</li></ul></li><li>JavaScriptスクリプト<ul><li>OpenAPIのウォッチャー<ul><li><a href="https://github.com/paulmillr/chokidar" target="_blank" rel="noopener noreferrer">paulmillr / chokidar</a></li></ul></li><li>バンドラー<ul><li><a href="https://github.com/WindomZ/swagger-merger" target="_blank" rel="noopener noreferrer">WindomZ / swagger-merger</a></li></ul></li></ul></li><li>OpenAPI</li></ul>

Dockerでレンダリング & ホットリロード & バンドル

<pre><code>/
├── compose.yaml # Docker Compose
├── docker
│&nbsp; &nbsp;└── redoc
│&nbsp; &nbsp; &nbsp; &nbsp;├── Dockerfile
│&nbsp; &nbsp; &nbsp; &nbsp;├── bundle.ts # バンドラー
│&nbsp; &nbsp; &nbsp; &nbsp;└── start.sh # Docker EntryPoint
└── api_docs/ # 分割されまくったOpenAPIたち
 &nbsp; &nbsp;├── components/
 &nbsp; &nbsp;│&nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;├── parameters/
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── path/
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── query/
 &nbsp; &nbsp;│&nbsp; &nbsp;├── requestBodies/
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── xxx/
 &nbsp; &nbsp;│&nbsp; &nbsp;├── responses/
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── xxx/
 &nbsp; &nbsp;│&nbsp; &nbsp;├── schemas/
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── xxx.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;└── securitySchemes/
 &nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;├── xxx.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── index.yaml
 &nbsp; &nbsp;├── paths/
 &nbsp; &nbsp;│&nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;│&nbsp; &nbsp;└── xxx/
 &nbsp; &nbsp;│── tags
 &nbsp; &nbsp; │&nbsp; └── xxx.yaml
 &nbsp; &nbsp;├── index.yaml
 &nbsp; &nbsp;└── openapi.yaml # バンドルされたOpenAPI</code></pre>

ディレクトリ構成

<pre><code>version: "3.8"

	services:
	 redoc:
	 build:
	 context: .
	 dockerfile: ./docker/redoc/Dockerfile
	 volumes:
	 - ./docker/redoc/bundle.ts:/app/bundle.ts
	 - ./docker/redoc/start.sh:/app/start.sh
	 - ./api_docs:/usr/share/nginx/html/docs # Redoc公式イメージでは '/usr/share/nginx/html/' 配下にOpenAPIを置く必要がある
	 ports:
	 - 9000:80</code></pre>

compose.yaml

<pre><code># Redoc公式イメージをベースに
FROM redocly/redoc:v2.0.0
	
WORKDIR /app
	
# ホットリロードにnpmパッケージを使用するためnpmインストール
RUN apk add --no-cache npm
	
# npmパッケージをコンテナ内でしようするための設定
ARG NODE_MODULE_PATH=/node
RUN npm config set prefix=${NODE_MODULE_PATH}
ENV PATH $PATH:${NODE_MODULE_PATH}/bin
ENV NODE_PATH ${NODE_MODULE_PATH}/lib/node_modules
	
# レンダリングするOpenAPIのPath　（Redoc公式イメージの環境変数）
# ファイル分割された '$ref' が含まれていると上手く参照できずエラーになる
# そのため、バンドル前の 'index.yaml' は使わず、バンドルされたファイルを指定する
ENV SPEC_URL docs/openapi.yaml
	
# ホットリロードに使用するnpmパッケージ群をインストール
RUN npm i -g \
 forever \
	ts-node \
	chokidar \
	swagger-merger
	
# EntoryPointにShellスクリプト指定
ENTRYPOINT [ "sh", "start.sh" ]</code></pre>

docker/redoc/Dockerfile

<pre><code># RedocのNginxを立ち上げる
# 'docker/redoc/Dockerfile'の 'ENTRYPOINT' で公式イメージの ' ENTRYPOINT ' は上書きされてしまったので再定義
# '&amp;' を付けてバックグラウンドプロセスにして、後述のバンドラーのプロセスと並走できるようにする
source /usr/local/bin/docker-run.sh &amp;
	
# バンドラー実行
ts-node bundle.ts</code></pre>

docker/redoc/start.sh

<pre><code>// 'ts-ignore' 連発。非常に良くないので反面教師で。。。
// @ts-ignore
const chokidar = require("chokidar") // ウォッチャー
// @ts-ignore
const swaggerMerger = require("swagger-merger") // バンドラー

const rootPath = "/usr/share/nginx/html/docs/" // OpenAPIが置かれているPath
const rootFile = `${rootPath}index.yml` // OpenAPIのルートファイルPath
const mergedFile = `${rootPath}openapi.yml`　　// バンドルしたOpenAPIを吐き出すPath
	
chokidar
 .watch(rootPath, { ignored: mergedFile })
 .on("all", (event: string, path: string) =&gt; {

 // ウォッチャーの検知したイベントをログに出力
 console.log(event, path)

 // OpenAPIをバンドル
 swaggerMerger({ input: rootFile, output: mergedFile })
 .then(() =&gt; {
 	 console.log("ReBundled OpenAPI")
 })
 	.catch((err: object) =&gt; {
	 console.error(err)
	 })
	})</code></pre>

docker/redoc/bundle.ts

この悩みに対処しよう

<ul><li>レンダリング<ul><li>Dockerを立ち上げればRedocをブラウザで確認することができます。</li><li>API実装中には必須だと思います。</li></ul></li><li>ホットリロード<ul><li>OpenAPIを書き換えたらRedocもそのタイミングで更新されます。<ul><li>表示を確認しながらサクサク書くことができます。</li></ul></li><li>「変な表示になってないかな？」「API実装中だけどちょっと修正しとこ。」ができます。</li></ul></li><li>バンドル<ul><li>OpenAPIを書き換えたら一つのOpenAPIとしても書き出されます。</li><li>これさえあれば色んな用途で柔軟に使い回せます。</li></ul></li></ul>

これで何が起こるか (まとめ)

今回はOpenAPIにまつわる開発体験の向上を軸にご紹介しました。割と良くある構成なのかな？とも思いますし、ツールの選定によってはもっとシンプルにすることができるかと思います。 もっと良い構成をご紹介できるように、チャンスがあれば色々試していきたいと思います。 最後まで読んでくださりありがとうございました！では！ﾉｼ

BuildersIO produced by YOKU

#OpenAPI の記事一覧

OpenAPIの運用コスト下げたい。

【Go言語】go mod tidy, go generateでエラーが発生した時の対処法

【React】React Hook Formでフォーム分割して送信時にデータ結合する

【Laravel】JWT認証機能の実装