はじめに

APIの仕様書をオンラインに上げるときの手順書です。
docker image作ってherokuに上げようとしたんですが手間がかかりそうだったのでそのままindex.html上げています。

Qiitaのいろいろな記事を参考にさせていただきました。

開発環境構築

docker-compose.yml

version: "2"
services:
  swagger:
    image: swaggerapi/swagger-ui
    volumes:
      - ./swagger.yml:/usr/share/nginx/html/swagger.yml
    environment:
      API_URL: swagger.yml
    ports:
      - "8080:8080"

$ docker-compose up で起動、
localhost:8080 にアクセスで確認できます。

APIの仕様はswagger.yml に記述してください

herokuへdeploy

ファイル

static.json

{
  "root": "dist/",
  "routes": {
    "/swagger.yml": "../swagger.yml"
  },
  "basic_auth": true
}

dist/index.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui.css" >
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui-bundle.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui-standalone-preset.js"> </script>
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "swagger.yml",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })
      // End Swagger UI call region

      window.ui = ui
    }
  </script>
  </body>
</html>

セットアップ

$ git init
$ heroku git:remote -a app_name
$ heroku stack:set heroku-18
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static -a app_name

デプロイ

$ git push heroku master

参考

ありがとうございました！

Dockerを使ってswagger.yamlをサクッとみる (swagger-ui 3.x)
Swagger x Heroku で手軽に API モック＆ドキュメントを作る