Help us understand the problem. What is going on with this article?

さくっとherokuにswaggerをデプロイする

More than 1 year has passed since last update.

はじめに

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 モック&ドキュメントを作る

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away