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と互換性があるようです。
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を開きます。
デフォルトではヘッダ部分のテキストボックスに「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にアクセスします。
無事表示されました！で、試しに実行すると「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ショートカットを用意しましょう。
このショートカットのプロパティに--disable-web-securityオプションを追加します。
「適用」を押して「OK」を押します。
Chromeを起動して実行します。
いけました！意地でもローカルサーバを立てたくない場合にローカルファイルのみでSwagger-UIとAPI Gatewayを実行する手順です。
※FireFoxでは確認していません…
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
