この記事は、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対応JSONを出力する
YAMLファイルの構成ができたら、
Swagger-UIに渡すためのJSONファイルに変換してあげる必要があるので、
swaggerapi/swagger-codegen-sli-v3のDocker Imageを使って出力します。
今回はGithub Pagesに連携させたかったので、
docsフォルダの中に出力先を指定しています。
docker-compose.ymlを作成
無事に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エンジニアをしていますが、
こういった近い領域の知識を増やしていくのは大事ですね。
閲覧ありがとうございました!
個人アプリをリリースしました。良ければインストールしてみてください🙏
