API GatewayをエクスポートしてSwagger-UIを使う方法

API GatewayをエクスポートしてSwagger-UIを使う方法

API GatewayをエクスポートしてSwagger-UIを使う方法

API GatewayをデプロイしたらステージエディターでOpenAPI3.0+API Gateway拡張の形式でyaml or JSONファイルをエクスポートすることができます。今回エクスポートしたファイルは「sample-dev-oas30-apigateway.yaml」です。

このファイルをSwagger-UIに食わせてみます。

Swagger2.0 → Swagger3.0からOpenAPI3.0と呼称変更しています。

Swagger-UIも3.18.3ではOpenAPI3.0と互換性があるようです。

GitHub - swagger-api/swagger-ui: Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a ...

項目	バージョン
Swagger-UI	3.18.3

3.18.3.zipをダウンロード、解凍してdistフォルダ配下がドキュメントルートとなります。

sample-dev-oas30-apigateway.yamlファイルをdist直下に配置します。

同じdistフォルダ内のindex.htmlを開きます。

デフォルトではヘッダ部分のテキストボックスに「https://petstore.swagger.io/v2/swagger.json」と設定されていますが、これを「./sample-dev-oas30-apigateway.yaml」に変更して「Explore」ボタンを押します。

エラーが出ました。ちなみにindex.htmlのurlプロパティで初期値を変更することが可能です。

<script>
  window.onload = function() {

    // Build a system
    const ui = SwaggerUIBundle({
      url: "./sample-dev-oas30-apigateway.yaml", <!-- ここが初期値 -->
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      layout: "StandaloneLayout"
    })

    window.ui = ui
  }
</script>

Failed to load API definition.

API定義書の読み込みに失敗したというエラーが表示されています。

Chromeのコンソールを見ると「URL scheme must be “http” or “https” for CORS request.」と表示されています。

file://だからですが、以下参考サイトにいくつか解決方法がありました。

参考サイト

specプロパティを使用する

yamlファイルをダウンロードしましたが、jsonファイルをダウンロードします。yamlは削除します。

ダウンロードしたjsonファイル内のjsonオブジェクトをspecという変数に代入します。

jsonファイルの拡張子をjsに変更します。

urlプロパティを削除し、jsファイルを読み込み、specプロパティを追加してspec変数を指定します。以下のような感じです。

<body>
  <div id="swagger-ui"></div>
  <script src="./swagger-ui-bundle.js"> </script>
  <script src="./swagger-ui-standalone-preset.js"> </script>
  <script src="./sample-dev-oas30-apigateway.js"> </script> <!-- jsonファイルをjsに変えて追加 -->
  <script>
  window.onload = function() {

    // Build a system
    const ui = SwaggerUIBundle({
      spec: spec, <!-- specプロパティにspecという変数を指定 -->
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      layout: "StandaloneLayout"
    })

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

これでindex.htmlにアクセスします。