自行建立 Swagger server
===
[TOC]
## 前置
> 目錄準備
```bash=
$ pwd
/home/zong/data
# clone ui code and cp dist file into self file
$ git clone https://github.com/swagger-api/swagger-ui.git
$ ls
swagger-ui
# 建立自己的api 目錄
$ mkdir swagger-doc
$ ls
swagger-ui swagger-doc
$ cp swagger-ui/dist/* swagger-doc
$ cd swagger-doc
$ pwd
/home/zong/data/swagger-doc
```
## docker 建置
1. 拉 swagger-ui 的 image
2. local 目錄 mount container 的 /usr/share/nginx/html 目錄
3. 指定 8001 對應 container 內的 8080 port
```bash=
# 拉 image
$ docker pull swaggerapi/swagger-ui
$ docker run -p 8001:8080 -v ~/data/swagger-doc:/usr/share/nginx/html -d swaggerapi/swagger-ui
```
## 目錄結構與相關檔案
index.html
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>API目錄</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.2/markdown-it.js"></script>
<script>
window.searchMap = location.search.substr(1).split('&').reduce(function(r, it) {
var them = it.split('='); r[them[0]] = them[1]; return r;
}, {});
$.ajaxSetup({async: false});
</script>
</head>
<body style='width:70%; margin: auto;'>
<div class="markdown-html"><script>$.get("markdown/index.md", function(text) { document.write(markdownit().render(text)); });</script></div>
</body>
</html>
```
index.md
```mediawiki=
| Name | link | Note |
| -------- | -------- | -------- |
| 會員中心 | [member_center.html](/api/member_center.html) | 2019-10-28 |
```
member_center.html
```htmlmixed=
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="../swagger-ui.css" >
<link rel="icon" type="image/png" href="../favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="../favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="../swagger-ui-bundle.js"> </script>
<script src="../swagger-ui-standalone-preset.js"> </script>
<script>
window.onload = function() {
var url = "doc/member_center.yaml";
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: url,
"dom_id": "#swagger-ui",
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout",
})
// End Swagger UI call region
window.ui = ui
}
</script>
</body>
</html>
```
## Issue - cached 問題
- nginx 那邊有 cached 問題
- 加入設定把 cached 設定為 no-cached
```
// 決定可以儲存response的快取是哪種
// 是私有的 private cache (eg.瀏覽器快取 )
// 還是公用的 shared cache (如： CDN )
public : response可被任何共用、私有快取儲存
private : respone只能被私有快取儲存，共用快取不行，通常用於個人敏感資料
// 可不可以存快取
no-store : request和response的內容都完全不存，每次都要從server拿資源
no-cache : 可以存快取，但使用快取前每次都要送request 問server，server沒有更新的檔案版本才可以用
// 新鮮度
max-age : 指定從目前請求開始，允許擷取的回應重複使用的最長時間 (單位為秒)
```
參考文件: [新手坑：讓人又愛又恨的 HTTP Caching](https://medium.com/frochu/http-caching-3382037ab06f)
---
> [name=zong xie] [time=Mon, Oct 28, 2019 4:40 PM]
###### tags: `build` `Swagger-ui`
Sign in with Wallet
Connect another wallet