swagger-UI、及び、RedocでAPIドキュメント表示した際の実施内容を記録します。
事前調査（dockerhub）
swaggerapi/swagger-ui
redocly/redoc
ポイント
- SPEC_URL (default "http://petstore.swagger.io/v2/swagger.json") - URL to spec
- PORT (default 80) - nginx port
ローカル環境のディレクトリ構成
swagger_sample
├─docker-compose.yaml
└─swagger
└─openapi-doc.yaml
docker-compose.yaml
version: '3' services: # =================== # Swaggerをブラウザでプレビューするためのコンテナ：Swagger-UI版 # =================== sample-swagger-ui: # ------------- # dpckerhub上に公開されているswagger-uiのdockerイメージ # ------------- image: swaggerapi/swagger-ui # ------------- # ローカルとコンテナ内部のディレクトリ対応を指定（ローカル:コンテナ） # ------------- # SwaggerUIのコンテナではNginxがHTTPサーバとしてコンテナ内で動作する # - Nginxのドキュメントルートに任意のAPI仕様書をマウントすることで、 # Swagger UIからAPI仕様書が参照できるようになる。 # - Nginxでは下記のディレクトリにドキュメントルートが設定されている # - /usr/share/nginx/html # ------------- volumes: - ./swagger:/usr/share/nginx/html/swagger # ------------- # 環境変数の設定 # ------------- # API-URL（環境変数）：Swagger UIの画面を開いたときに初期値として参照するURL # ------------- environment: API_URL: ./swagger/openapi-doc.yaml # ------------- # 接続ポート（ローカル：コンテナ） # ------------- ports: - '8001:8080' # =================== # Swaggerをブラウザでプレビューするためのコンテナ：Redoc版 # =================== sample-redoc: # ------------- # dpckerhub上に公開されているredocのdockerイメージ # ------------- image: redocly/redoc # ------------- # ローカルとコンテナ内部のディレクトリ対応 # ------------- volumes: - ./swagger:/usr/share/nginx/html/swagger # ------------- # 環境変数の設定 # ------------- # SPEC_URL：Redocの画面を開いたときに初期値として参照するURL # PORT：nginx port(default:80) # ------------- environment: SPEC_URL: ./swagger/openapi-doc.yaml PORT: 8080 # ------------- # 接続ポート（ローカル：コンテナ） # ------------- ports: - '8002:8080'
docker-compose up実行結果
D:\--省略--\swagger_sample>docker-compose up Pulling sample-swagger-ui (swaggerapi/swagger-ui:)... latest: Pulling from swaggerapi/swagger-ui cbdbe7a5bc2a: Pull complete 85434292d1cb: Pull complete 75fcb1e58684: Pull complete 2a8fe5451faf: Pull complete 42ceeab04dd4: Pull complete fae5e705c0f3: Pull complete 6ba588ee292c: Pull complete abd81e6781a4: Pull complete 39bc4e09f7b2: Pull complete 2a9006b44cf3: Pull complete ac3e1aecab21: Pull complete Digest: sha256:29a372b3b749334755c17004b47ed3e5bc9e5895f060a95224dc7f73b66c7e1c Status: Downloaded newer image for swaggerapi/swagger-ui:latest Pulling sample-redoc (redocly/redoc:)... latest: Pulling from redocly/redoc cbdbe7a5bc2a: Already exists 85434292d1cb: Already exists 75fcb1e58684: Already exists 2a8fe5451faf: Already exists 42ceeab04dd4: Already exists f53722546a91: Pull complete 44df732874e7: Pull complete 4a4183107acf: Pull complete 2d13c86a983a: Pull complete 555b9716c093: Pull complete Digest: sha256:d39e0efd5af1f0d8621ae54b01f9816d2ce73683eb96d745daae8e2527b94a08 Status: Downloaded newer image for redocly/redoc:latest Creating swagger_sample_sample-redoc_1 ... done Creating swagger_sample_sample-swagger-ui_1 ... done Attaching to swagger_sample_sample-redoc_1, swagger_sample_sample-swagger-ui_1
ローカルサイトにアクセスする
openapi-doc.yamlを編集すると、サイトが更新されます。
- 表示内容を更新するためには、「ページのリロード（
F5）」が必要になります。
swagger-UIサイト
redocサイト
コンテナを停止する
cont+cを連打
