DockerでSwaggerUIとSwaggerEditorを起動させる方法

Swaggerとは

Swaggerとは、APIドキュメント設計やAPIモック（プロトタイプ）のリクエストを投げることができるAPI構築のフレームワークとことです。
今回使用するSwaggerツールは以下の3つです。

ツール	説明
Swagger Spec	（Spec＝Specification＝仕様書）Swaggerの仕様に関するドキュメントのことであり、YAML/JSON形式で書かれる。
Swagger Editor	ブラウザ上で動くSwagger Specファイルを編集することができ、リアルタイムで構文チェックすることができるツール
Swagger UI	Swagger Specをから動的にドキュメントを生成するツール。

その他のSwagger関連のツールは公式ページのリンクから確認してみてください。

Swaggerツールの関係性について

まずは、Swagger Specファイルの生成を主軸として、Swagger EditorとSwagger UIがどのように使われるのか図解にしてみました。
今回の使用イメージとしては、Swagger Editorを使いブラウザ上でAPIの仕様書となるSwaggerSpecを編集、定義していき、構文を確認できたら実際のyamlファイルに入力してSwagger UIから参照できるようにするという流れです。

手順

設定のポイント:
1. docker-compose.ymlにSwaggerEditorとSwaggerUIのイメージが作成されるように設定する・
2. Swaggerの定義をsample.yamlとして置く。

docker-compose.yml

version: '3.7'
services:
 swagger-editor:
    image: swaggerapi/swagger-editor
    ports:
      - "8001:8080"

  swagger-ui:
    image: swaggerapi/swagger-ui
    ports:
      - "8002:8080"
    volumes:
      - ./sample.yaml:/sample.yaml
    environment:
      SWAGGER_JSON: sample.yaml

ディレクトリ構造

├── docker-compose.yaml
└── sample.yaml

ターミナルで以下を実行。

ターミナル

$ docker-compose up

https://localhosst:8001でSwaggerEditorが起動、https://localhost:8002でSwaggerUIが起動する。