Skip to content

Swagger UIをWeb上で表示

swagger.jsonをもとに、APIドキュメントをWeb上で閲覧できるようにします。

設定

Swagger UIの実装をもとにした下記ファイルをindex.htmlとして作成することで、nginxなどで閲覧することができます:

html
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Swagger UI</title>

    <link
      rel="stylesheet"
      href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css"
    />
  </head>

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

    <script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
    <script>
      window.onload = () => {
        SwaggerUIBundle({
          url: "./swagger.json",
          dom_id: "#swagger-ui",
          // supportedSubmitMethods: [], // Try it outボタンを無効化
        });
      };
    </script>
  </body>
</html>