Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

swaggerサイトの構築(docker-compose.yaml)

f:id:overworker:20200628105903p:plain



swagger-UI、及び、RedocAPIドキュメント表示した際の実施内容を記録します。

事前調査(dockerhub)

swaggerapi/swagger-ui

f:id:overworker:20200810165034p:plain:w400

redocly/redoc

f:id:overworker:20200810165442p:plain:w400

ポイント

ローカル環境のディレクトリ構成

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サイト

swagger-UIサイト

redocサイト

redocサイト

コンテナを停止する

  • cont+cを連打