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

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

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

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

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

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

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

https://github.com/swagger-api/swagger-ui

項目 バージョン
Swagger-UI 3.18.3

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

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

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

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

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

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

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

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という変数に代入します。

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

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

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

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

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

無事表示されました!で、試しに実行すると「your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.」エラーが出ます。。

以前スマホ開発時にハマったのですが「Cordova(HTML5+CSS)+REST APIでCORSを有効にする」今回はどうしてもサーバを立てたくないので、Chromeのオプションで回避します。

--disable-web-security

もう一つ別セッションのChromeショートカットを用意しましょう。

別セッションでChromeを起動する方法」参考

このショートカットのプロパティに--disable-web-securityオプションを追加します。

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

「適用」を押して「OK」を押します。

Chromeを起動して実行します。

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

いけました!意地でもローカルサーバを立てたくない場合にローカルファイルのみでSwagger-UIとAPI Gatewayを実行する手順です。

※FireFoxでは確認していません…

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA