Swagger-UI 本地安裝

Swagger UI是一個API線上文件生成和測試的框架。
頁面簡單直接，方便除錯，是Swagger的一個常用工具
配合Swagger-Editor或線上編輯swagger.yml / swagger.json

1 Download github程式碼

> git clone https://github.com/swagger-api/swagger-ui.git

2 安裝 express

> npm install express --save

3 建立一個空資料夾node_app

> mkdir node_app

4 初始化 node ，根據提示建立package.json檔案

> cd node_ap
> npm init
name: (node_app) node_app 
version: (1.0.0) 
description: 
entry point: (index.js)

5 安裝 express

> npm install express --save

6 建立public資料夾，放static資源

> mkdir public
> cd public

7 建立index.js，啟動檔案

var express = require('express'); var app = express();
app.use('/static', express.static('public')); 
app.get('/', function (req, res) { res.send('Hello World!'); }); 
app.listen(3000, function () { 
    console.log('Example app listening on port 3000!'); 
});

8 把Swagger UI專案中dist 目錄下的檔案全部複製到 public 資料夾下
如果要自定義UI介面，可以在public下修改css

> cp ../../dist/* .

9 啟動node

> node index.js

訪問 http://localhost:3000/static/index.html

---

現在頁面顯示的是官網的例子，替換為自己的swagger

編輯好swagger檔案並切匯出 swagger.json 文件，把 swagger.json 放到 node_app/public 目錄下
在瀏覽器上方URL中改為/static/test.json，點選Explore重新整理

或修改public/index.html

// url = "http://petstore.swagger.io/v2/swagger.json" ,
url = "/static/swagger.json",

重啟 node 服務即可