Dockerで簡単にSwagger環境を作る

この記事は、SwaggerでAPIドキュメントを表示するフローを理解するために、簡単にDockerでSwagger環境を構築したお話になります。

普段からチームではSwagger（OpenAPI）を使ってAPI連携していますが、

その辺り、ぼんやり感があったので、環境構築してみました。

結果はこんな感じになります。

YAMLファイルでSwaggerの構成を作成

このページを見ながらYAMLファイルを構築していきました。

ファイルを分割したかったので、Swagger-Editorは使用していません。

mock-openapi.yaml
paths
  ∟login.yaml
  ∟me.yaml
  ∟signup.yaml
components
  ∟AccessToken.yaml
  ∟Credential.yaml
  ∟ServerError.yaml
  ∟User.yaml

こんな感じで、

mock-openapi.yamlが親になりそこからpathsファイル郡を呼び、

paths郡のファイルがcomponentsのファイルを呼ぶ構成です。

YAMLファイルの構成ができたら、

Swagger-UIに渡すためのJSONファイルに変換してあげる必要があるので、

swaggerapi/swagger-codegen-sli-v3のDocker Imageを使って出力します。

今回はGithub Pagesに連携させたかったので、

docsフォルダの中に出力先を指定しています。

無事にJSONファイルが出力できたら、docker-compose.ymlファイルを作成していきます。

使用するDocker Imageは swaggerapi/swagger-ui です。

SWAGGER_JSONは /usr/share/nginx/html に文字列連結したパスになるので、先頭に / が必要です。参考

docker-compose.ymlが完成したので、早速実行してみます。

$ docker-compose up -d
$ open http://localhost:8080

無事にブラウザに表示されたことを確認できました。

お疲れ様でした！

今回は、DockerとSwaggerを題材にしてみました。

普段iOSエンジニアをしていますが、

こういった近い領域の知識を増やしていくのは大事ですね。

閲覧ありがとうございました！

個人アプリをリリースしました。良ければインストールしてみてください🙏