Swagger UIでGitLabで管理された定義書を参照する

DockerでSwagger UIを構築し、Swagger UIから常に最新の定義ファイルを確認できるようにする。
GitLabはローカルに構築したものを利用。

Swagger UI構築

Docker Composeを利用する。
swagger-uiの公式イメージはこちら。

$ cat docker-compose.yaml
version: "2"
services:
  swagger:
    image: swaggerapi/swagger-ui
    environment:
      API_URL: https://petstore.swagger.io/v2/swagger.json
    ports:
      - "8080:8080"
$ docker-compose up -d

初期表示(API_URL)は、公式のデモで利用されているペットショップのAPI仕様が表示されるようにしている。

ペットショップのAPIが表示された。
この画面上でGitLabにある定義書が確認できるようにしたい。

Gitリポジトリを表示させる

この状態でExploreのテキストボックスにGitLabで管理された定義ファイルのURLを指定した場合、CORSのエラーが発生してしまう。

CORSのエラーを回避するために、swagger-uiを動かしているNginxでリバースプロキシさせる。

Nginx リバースプロキシ設定

コンテナ内のNginxの設定ファイルを編集する。
serverディレクティブに設定を追記する。
今回は、http://{swagger-uiのホスト}/swagger/{GitLabでのファイルのURLからホスト名を抜いたもの}(e.g. http://localhost:8080/sawgger/skkojiko/hogehoge/raw/master/docs/api/swagger.yml )でアクセスできるようにする。

$ docker container ls
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS                        PORTS                                                      NAMES
d8c85fc008b2        swaggerapi/swagger-ui            "sh /usr/share/ngi..."   33 minutes ago      Up 30 minutes                 80/tcp, 0.0.0.0:8080->8080/tcp
$ docker exec -it d8c85fc008b2 sh
# vi /etc/nginx/nginx.conf
...省略
server {
+    location /swagger/ {
+      proxy_pass      http://gitlab.com/;  # GitLabのURLを指定
+    }
  }
...省略

Nginxの設定を変更したら、コンテナを再起動する。

$ docker container restart d8c85fc008b2

再度、Swagger UIのテキストボックスにURL(e.g. http://localhost:8080/sawgger/skkojiko/hogehoge/raw/master/docs/api/swagger.yml )を入力すれば今度は正常に表示されるようになる。

最初からGitLab上の定義ファイルを表示させる

docker-compose.yamlのAPI_URLを修正する。

$ cat docker-compose.yaml
version: "2"
services:
  swagger:
    image: swaggerapi/swagger-ui
    environment:
      API_URL: http://localhost:8080/sawgger/skkojiko/hogehoge/raw/master/docs/api/swagger.yml
    ports:
      - "8080:8080"